如何在IIFE间传递变量？实现多个JS文件的数据交互

首先看你当前代码的核心问题：

1. 访问方式错误：你的MODULE本身就是a.js中IIFE返回的my对象，所以b.js里写MODULE.my是多余的，直接访问MODULE.aToPass即可。
2. 变量未初始化：firstToPass是在test()函数里赋值的，但你没有调用这个函数，所以这个属性还没被添加到MODULE上，自然访问不到。

修复当前IIFE代码的方案 #

先修改a.js，确保test()被调用，完成firstToPass的初始化：

var MODULE = (function a() {
  var my = {};
  my.aToPass = 'a'; // 要传递的变量
  var first = 5;
  var second = 'example';

  function test() {
    my.firstToPass = first + 100; // 赋值要传递的变量
    console.log(first);
  }

  // 调用test函数，触发firstToPass的赋值
  test();

  return my;
}());

然后修改b.js，正确访问MODULE的属性：

(function b() {
  console.log('aToPass:', MODULE.aToPass); // 输出 'a'
  console.log('firstToPass:', MODULE.firstToPass); // 输出 105
}());

这样就能正常获取到a.js里的变量了。

更优的模块化方案：ES6模块 #

IIFE是传统的模块化方式，现在更推荐使用ES6模块，它能避免全局变量污染，语法更清晰规范。

步骤1：修改index.html的script标签

给script标签加上type="module"，告诉浏览器这是ES6模块：

<script type="module" src='/script/a.js'></script>
<script type="module" src='/script/b.js'></script>
<script type="module" src='/script/c.js'></script>

步骤2：修改a.js导出变量

// a.js
// 直接导出需要传递的变量
export const aToPass = 'a';
const first = 5;

function calculateFirstToPass() {
  return first + 100;
}

// 导出计算后的变量，或者导出函数让b.js自行调用
export const firstToPass = calculateFirstToPass();
// 如果需要动态计算，也可以导出函数：
// export function getFirstToPass() { return first + 100; }

步骤3：修改b.js导入变量

// b.js
// 从a.js导入需要的变量
import { aToPass, firstToPass } from './a.js';

console.log('aToPass:', aToPass); // 输出 'a'
console.log('firstToPass:', firstToPass); // 输出 105

异步场景方案：自定义事件总线 #

如果你的变量是异步生成的（比如从接口获取数据），用全局变量或ES6模块同步导入可能会拿到未初始化的值，这时候可以用自定义事件来实现通信：

a.js触发事件传递数据

var MODULE = (function a() {
  var my = {};
  my.aToPass = 'a';
  var first = 5;

  function test() {
    my.firstToPass = first + 100;
    // 创建自定义事件，携带要传递的数据
    const dataEvent = new CustomEvent('dataFromModuleA', {
      detail: {
        aToPass: my.aToPass,
        firstToPass: my.firstToPass
      }
    });
    // 触发事件
    document.dispatchEvent(dataEvent);
    console.log(first);
  }

  // 模拟异步场景，比如延迟调用test
  setTimeout(test, 1000);

  return my;
}());

b.js监听事件接收数据

(function b() {
  // 监听自定义事件
  document.addEventListener('dataFromModuleA', function(event) {
    console.log('aToPass:', event.detail.aToPass); // 输出 'a'
    console.log('firstToPass:', event.detail.firstToPass); // 输出 105
  });
}());

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