模块和子模块文件完全异步加载

Question

我想要一个完全异步的方法来在客户端加载模块的文件，而不需要额外的工具，比如 requireJS。我的模块模板遵循 "Revealing module pattern" template.

在我的文件中root.js我有

root = (function(thisModule){

  //I'm stuck here, I know I need to add the already 
  //existent properties of thisModule into here 
  //when child.js is loaded first

  function A(){...}
  function B(){...} //public method

  return{
     B:B
  };

})(root || {});

在我的文件中child.js我有

root = root || {};
root.child = (function(){

  function C(){...}     
  function D(){...}  //public methods

  return{
     D:D
  };

})();

如何重写 root.js 中的第一个模块，使文件的加载顺序无关紧要？也就是说，下面的代码永远不会抛出异常。

$.when($.getScript("root.js"), $.getScript("child.js")).done(function(){
   root.B;
   root.child.D;
});

Answer 1

对您的代码进行最简单的调整是保留 thisModule 的内容 - 只需分配给 thisModule 的 B 属性，然后分配给 return thisModule 而不是 return 仅 { B:B }:

var root = (function(thisModule){
  function A(){ }
  function B(){ } //public method
  thisModule.B = B;
  return thisModule;
})(root || {});

如果 root 是全局的，那么如果你明确引用 window.root 可能会更清楚一点，否则如果你不小心将该代码段放在 at 以外的其他地方，你可能会遇到错误顶级：

window.root = (function(thisModule){ ...

附带说明一下，假设您的构建过程使用 Babel（任何严肃的项目都应该使用），您可以考虑使用 shorthand 属性来减少语法噪音，例如：

return{ D };

而不是

return{ D: D };

如果方法名称较长 - 语法噪音较少，这可能会有所帮助。

模块和子模块文件完全异步加载

Modules and submodules files fully asynchronous loading

performance

jquery

asynchronous

module

getscript