本文详解如何通过 es6 模块封装状态管理逻辑，实现跨文件变量的读写共享，避免直接导出/导入原始变量导致的不可变性错误，并提供可立即运行的代码示例与关键注意事项。
本文详解如何通过 es6 模块封装状态管理逻辑，实现跨文件变量的读写共享，避免直接导出/导入原始变量导致的不可变性错误，并提供可立即运行的代码示例与关键注意事项。
在前端开发中，新手常误以为 export let colorPicked = 'red' 后，可在另一文件中直接 import { colorPicked } from './app.js' 并修改其值（如 colorPicked = 'blue'）。但这是无效且会报错的：ES6 模块导入的绑定是只读的实时绑定（live read-only binding），任何对导入变量的赋值操作都会触发 TypeError: Assignment to constant variable 或静默失败（取决于环境），这也是用户遇到“变量不更新”且“汉堡菜单功能失效”的根本原因——脚本因模块错误中断执行。
✅ 正确解法是：不导出原始变量，而是导出用于读写该变量的函数，将状态封装在模块内部，形成可控的状态接口。
✅ 推荐实践：使用 Getter/Setter 函数管理共享状态
以颜色选择场景为例（第一页选色 → 第二页复用），推荐结构如下：
1. 创建状态管理模块（state.js）
// state.js —— 唯一可信的状态源
let colorPicked = '';
let furniturePicked = '';
export function getColor() {
return colorPicked;
}
export function setColor(value) {
colorPicked = value;
}
export function getFurniture() {
return furniturePicked;
}
export function setFurniture(value) {
furniturePicked = value;
}2. 在第一页 JS 中设置值（page1.js）
import { setColor, setFurniture } from './state.js';
// 用户选择后调用（例如点击事件中）
document.getElementById('red-btn').addEventListener('click', () => {
setColor('#ff6b6b');
setFurniture('/images/red-sofa.png');
});3. 在第二页 JS 中读取值（page2.js）
import { getColor, getFurniture } from './state.js';
// 页面加载时应用上次选择
document.addEventListener('DOMContentLoaded', () => {
const savedColor = getColor();
const savedFurniture = getFurniture();
if (savedColor) {
document.body.style.backgroundColor = savedColor;
}
if (savedFurniture) {
document.getElementById('preview-img').src = savedFurniture;
}
});4. HTML 中正确引入（两页均需）
<!-- page1.html & page2.html 中均添加 --> <script type="module" src="./page1.js"></script> <!-- 或 --> <script type="module" src="./page2.js"></script>
⚠️ 关键要求：所有使用模块的 <script> 标签必须声明 type="module"，否则 import 语法会报错。</script>
立即学习“Java免费学习笔记（深入）”；
⚠️ 重要注意事项
-
不要混合模块与传统脚本：若 page1.js 是模块，而 page2.js 是普通 <script>（无 type="module"），则无法跨页共享状态——因为每个模块拥有独立作用域，且浏览器中不同 HTML 页面的 JS 执行环境完全隔离。上述方案仅适用于<strong>单页应用（SPA）或同一页面内多模块协作。<br /> ? 若你确实需要<strong>跨 HTML 页面持久化数据（如从 index.html 跳转到 second.html 仍保留颜色），请改用 localStorage：</script>
// 设置（page1.js） localStorage.setItem('userColor', '#ff6b6b'); // 获取（page2.js） const savedColor = localStorage.getItem('userColor') || '#ffffff'; 初始化时机很重要：避免在模块顶层直接调用 getColor()（如 console.log(getColor())），此时变量可能尚未被设置。务必在用户交互后或 DOM 加载完成后再读取。
模块路径需准确：确保 import 中的相对路径（如 './state.js'）与实际文件位置一致，且服务器支持 .js 文件 MIME 类型（开发时推荐使用 Vite、Webpack 或 Live Server 插件）。
✅ 总结
| 方式 | 适用场景 | 是否跨 HTML 页面 | 安全性 |
|---|---|---|---|
| 模块函数封装（本文方案） | 同一 HTML 内多 JS 模块协作 | ❌ 否 | ✅ 高（状态受控） |
| localStorage / sessionStorage | 真正跨页面/跨刷新持久化 | ✅ 是 | ✅ 高（需注意 XSS） |
| 直接 export let x + import {x} | ❌ 禁止！会导致运行时错误或静默失败 | — | ❌ 低 |
掌握这种“函数式状态封装”思维，不仅能解决变量共享问题，更是迈向可维护前端架构的关键一步。
