将变量从一个 IIFE 传递到另一个答案

【问题标题】：Pass a variable from one IIFE to another将变量从一个 IIFE 传递到另一个
【发布时间】：2018-11-04 12:33:08
【问题描述】：

我有一个这样的index.html 文件和几个.js 和.css 文件。我想要的是让两个.js 文件相互通信，我想将变量从一个文件传递到另一个文件。

index.html：

<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>  

        <link href='/css/a.css' rel='stylesheet'/>
        <link href='/css/b.css' rel='stylesheet'/>
        <link href='/css/c.css' rel='stylesheet'/>
    </head>

    <body>
        <div id='a'></div>
        <div id='c'></div>
        <div id='b'></div>
    </body>

    <script src='/script/a.js' rel='script'/></script>
    <script src='/script/b.js' rel='script'/></script>
    <script src='/script/c.js' rel='script'/></script>
</html>

a.js

var MODULE = (function a() {

    var my = {};
    my.aToPass = 'a'; // variable to pass at file b.js

    var first = 5;
    var second = 'example';

    function test() {
        my.firstToPass = first + 100; // variable to pass at file b.js
        console.log(first);
    }

    return my;

}());

b.js

(function b() {

    console.log('my:', MODULE.my); // undefined
    console.log('my:', MODULE.aToPass); // undefined
    console.log('my:', MODULE.firstToPass); // undefined

    // other code...

}());

我想要的是将变量aToPass 和firstToPass（a.js）传递给b.js 文件。我该怎么做？

我使用IIFE的方式将代码拆分成多个文件，如果有更好的方式，我愿意改变代码结构。

【问题讨论】：

您可以考虑使用标准的模块系统，例如 Webpack，当您有大量代码时，这是一种很好的组织方式。
不确定是否推荐，但您的a.js 和b.js 都可以传入global/window 对象，并将变量aToPass 和firstToPass 注入全局对象
@Isaac 你能发一个简单的例子吗？
console.log('my:', MODULE.my);works just fine。几点注意事项： 1. script 不是html 的有效子代，将它们移入 body，就在关闭</body> 标记之前。 2. rel 不是script 的有效属性。但即使不解决这些问题，它也应该（并且确实）有效。
3.在您的开头 script 标签中，您在 > 之前有一个额外的 /。 HTML 解析器会忽略它，但它仍然不正确。

标签： javascript iife

【解决方案1】：

您可以将对象的实例传递给b。

在您的 b 匿名函数中...

(function b(MODULE) {

    console.log('my:', MODULE.my); // undefined
    console.log('my:', MODULE.aToPass); // undefined
    console.log('my:', MODULE.firstToPass); // undefined

    // other code...

})(MODULE);

【讨论】：

【解决方案2】：

const MODULE = (function () {
      var my = {};

      my.aToPass = 'a'

      var first = 5;
      var second = 'example';

      (function test() {
        my.firstToPass = first + 100; // variable to pass at file b.js

      })();


      return my;
    })();


    module.exports = MODULE;

和 b.js：

const MODULE = require('./try');

    (function b() {

      console.log('my:', MODULE.my); // undefined
      console.log('my:', MODULE.aToPass); // my: a
      console.log('my:', MODULE.firstToPass); // my: 105

      // other code...
    })();

【讨论】：