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

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 属性，然后返回 thisModule 而不是只返回 { B:B }：

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

如果root 是全局的，那么如果你明确引用window.root 可能会更清楚一点，否则如果你不小心把sn-p 放在顶层以外的地方，你可能会遇到错误：

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

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

return{ D };

而不是

return{ D: D };

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