如何在不同JS模块或JS文件间实现变量同步修改？

用户正在对现有代码做拆分重构，目标是提升代码整洁度：将原本全集中在index.js的各功能函数，按职责归入对应的独立模块（如把数值修改相关逻辑放到change.js这类独立文件中）。
拆分前所有代码都集中在同一个文件，示例写法：

let number = 5;

function change(){
    number = number + 1;
}

当前遇到的核心问题：

• 直接将change函数移入change.js后调用，会抛出变量未声明的报错——不同ES模块的作用域完全隔离，change.js无法直接访问index.js里定义的number变量
• 如果在change.js内部重新声明number变量，这个变量只会在change.js的模块作用域内生效，修改后的结果完全无法同步回index.js

用户的核心诉求是找到可行方法，实现两个文件间该变量的同步修改，或是把change.js中对变量的修改结果准确传递回index.js。

实现方案 #

所有方案都基于ES模块的作用域隔离规则设计，不存在跨模块直接共享普通原始类型变量的隐式语法，需要通过显式的传参、返回值、状态封装逻辑实现同步。

方案1：传参+返回值（最低耦合） #

这是最符合模块化设计原则的写法，完全不需要跨模块持有状态：

1. 在change.js中不持有任何状态，把change函数改造为「接收当前值、返回计算后新值」的纯函数：

// change.js
export function change(currentNumber) {
  return currentNumber + 1;
}

2. 在index.js中维护自身的状态变量，调用change函数时传入当前number值，把函数返回值重新赋值给本地number变量，就能完成结果同步：

// index.js
import { change } from './change.js'
let number = 5;

// 调用逻辑获取修改后的值
number = change(number);

该方案下模块职责完全清晰，change.js仅负责处理数值修改逻辑，不存储任何可变状态，从根源上避免了作用域混乱的问题。

方案2：闭包封装共享状态（多模块通用） #

如果需要多个模块共享同一份可变状态，可以把状态封装在独立模块的闭包作用域内，通过暴露的方法间接读写状态，实现跨模块同步：

1. 新建独立状态模块state.js，在模块内部私有维护number变量，对外暴露读、改的接口方法：

// state.js
// 变量为模块私有，外部无法直接访问或修改
let number = 5;

export function getNumber() {
  return number;
}

export function updateNumber(newVal) {
  number = newVal;
}

2. 在change.js中引入状态模块的接口，实现修改逻辑：

// change.js
import { getNumber, updateNumber } from './state.js'

export function change() {
  const currentVal = getNumber();
  updateNumber(currentVal + 1);
}

3. 在index.js中正常引入调用，所有对状态的修改都会作用在同一份闭包存储的值上：

// index.js
import { change } from './change.js'
import { getNumber } from './state.js'

console.log(getNumber()); // 输出 5
change();
console.log(getNumber()); // 输出 6

方案3：引用类型共享（轻量适配） #

可以利用JS中引用类型的内存传递特性，把需要共享的变量封装在对象中，通过传递对象引用实现跨模块同步——因为所有拿到同一对象引用的模块，对对象属性的修改会全局生效：

1. 在index.js中把原本的普通变量改造为对象属性存储：

// index.js
import { change } from './change.js'
// 封装为共享状态对象
const sharedState = {
  number: 5
}

2. 在change.js中定义的change函数接收传入的共享对象，直接修改对象属性：

// change.js
export function change(sharedState) {
  // 同一份对象引用下，属性修改会同步到所有持有该引用的模块
  sharedState.number = sharedState.number + 1;
}

3. 调用时传入共享对象即可完成状态同步：

// index.js
change(sharedState);
console.log(sharedState.number); // 输出 6

避坑提示 #

• 不要为了简化操作直接将变量挂载到window全局对象实现跨模块共享，这种写法极易造成全局污染，后续维护时很难定位变量的修改来源
• 模块拆分的核心原则是状态持有与逻辑处理分离，逻辑处理模块尽量不要持有可变状态，降低模块间的耦合度

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