模块可以访问未导入的其他模块中存储的变量，但两个模块都导出到主文件吗？

Question

我是JavaScript领域的初学者，我只是在学习有关模块以及如何使用它们的知识。
情况如下：
我有一个main.js文件和两个module＃.js文件， module1.js和module2.js 。

project/
    main.js
    modules/
        module1.js
        module2.js

这些文件都已分别导入到main.js ，但是module2.js包含一个函数displayAll() ，用于显示数组中的所有项目items = [item1, item2, item3] 。

function displayAll() {
  for (let i = 0; i < items.length; i++) {
  console.log(`Item ${i} is ${items[i]}`)
  }
}

这并不完全是它的外观，但这是重点。 我的问题是， 由于上述函数包含在module2.js ，如何让它访问module1.js包含的数组items ？ 如果需要另一个文件怎么办？ 我如何将其导出到多个文件而不创建混乱的导入网络？
我还不熟悉任何框架，因此请尽可能多地使用核心javascript。
谢谢！

Answer 1

首先，您需要创建一个加载所需内容的函数。

在module2.js中，创建此函数，将module1.js附加到该函数

function loadJS(callback) {                
    var firstScriptElem = document.getElementsByTagName('script')[0], script = document.createElement('script');

    script.type = 'text/javascript';
    script.src = module1.js; 
    script.async = false; 

    // Binds the event to the callback function. We use more than one event for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    firstScriptElem.appendChild(script);       

};

然后，您需要创建一个回调函数，该函数实际上将在检索module1.js后运行您要运行的代码

function callBack() {
// get your array

// do something with the array

}

现在在module2中，调用loadJS(callBack)并在其中找到它。

现在，我知道您是新手，还不想深入研究框架。 但是我要向您提及，requireJS非常简单地完成了所有这些工作。 我已经使用了一段时间，但是一旦我开始使用requireJS，我意识到我应该从一开始就使用它，因为它的组织方式更加合理，您当然不必重复它。 使模块管理更加容易（我也是，最近才开始学习javascript中的模块模式）。