JavaScript 文件加载顺序和依赖管理

Question

只是想知道这个...

我有几个独立的 javascript 文件，它们都包含基于模块模式的代码。一些模块将其他一些模块作为依赖项。如果我知道在页面加载之前不会在 HTML 上调用任何代码，那么文件加载的顺序是否仍然重要？

模块代码位于即时函数中这一事实足以触发已经加载其他模块的要求吗？

如果需要，我准备研究 RequireJS 库，但只是想先了解一下我的做法是否合适。

Answer 1

如果可能，请设置您的依赖项，以便您可以在加载 javascript 文件时加载和设置所有模块(即使用自执行函数)。

然后在 .ready block 中的所有模块上调用 .init 或等效函数。这样您就可以在加载所有文件后显式调用任何需要依赖项的功能。

一个例子:

foo.js
(function() { 
    function initFoo() { ... }
    ...
    window.namespace.foo = {
         init: initFoo
    }
}());

bar.js
(function() { 
    function initBar() { ... }
    ...
    window.namespace.bar = {
         bar: initBar
    }
}());

main.js
(function() {
     $.ready(function() {
          window.namespace.foo.init();
          window.namespace.bar.bar(); // dependancies on foo
     });

}());

任何没有依赖的代码都可以在foo.js & bar.js 的闭包中执行，任何依赖的代码都可以通过你的init调用 在 .ready 上运行，一旦所有文件都已加载。