如何在多个JS模块中重赋值共享变量且无需额外更新函数或参数透传

ES 模块规范中，导入的变量属于只读活绑定，你在其他模块中拿到的 activeNode 只是原变量的引用，不允许直接对绑定本身重新赋值，这就是你碰到 Uncaught TypeError: Assignment to constant variable. 报错的根本原因。

方案1：引用类型包装变量（无额外函数、无参数透传，改动最小） #

你不需要额外导出更新函数，只需要把原始变量放到一个引用类型（对象/数组）中导出即可。导入的绑定本身不可修改，但引用类型的内部属性可以自由修改，完全符合你的需求：

代码示例 #

main.js 中修改定义和导出逻辑：

// main.js
// 把单个变量包装到对象中，导出这个对象
export const appState = {
  activeNode: null
}
// 原main.js中用到activeNode的地方，统一替换为 appState.activeNode

keyboard.js / mouse.js 中修改使用逻辑：

// 导入包装对象
import { appState } from './main.js'

// 需要修改变量时直接改对象属性即可，不会报错
function handleKeyPress() {
  appState.activeNode = xxx // 完全合法
}

这个方案的优势：

• 不需要额外导出赋值函数，没有多余的封装成本
• 不需要修改现有函数的参数传递逻辑，不需要多层透传参数
• 状态可追溯，所有对activeNode的修改都对应到appState的属性变更，方便调试

方案2：全局挂载（适合临时调试，不推荐生产环境） #

如果不想做任何导出/导入的修改，也可以直接把变量挂载到全局对象上，所有模块都可以直接读写：

// main.js 中直接挂载
window.activeNode = null

其他模块不需要导入，直接读写window.activeNode即可。这个方案的缺点是会污染全局命名空间，容易和其他第三方脚本的变量冲突，状态变更不可控，仅适合临时调试使用。

内容的提问来源于stack exchange，提问作者Michael Moreno