Question

我是JavaScript世界的初学者，我只是在学习模块以及如何使用它们情况如下：
我有main.js个文件和两个模块＃.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中，如何让它访问items中包含的数组module1.js？如果需要另一个文件怎么办？它？如何在不创建混乱的导入网络的情况下将其导出到多个文件？我还不熟悉任何框架，所以请尽量使用核心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中学习模块模式）。

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

1 个答案: