如何专业地构建模块模式Javascript项目？

我已经读到了这本书，我喜欢它。但是，对于大型项目，如果“主对象”有几十个子对象，可能有数百个函数，该怎么办呢。我不想把所有的代码都放在一个匿名函数闭包中

---

那么大型模块模式项目是如何管理的呢？

您可以使用增强功能将模块分离到不同的文件中。准备好生产版本后，可以将这些文件连接到一个或多个文件中

文件1定义模块M.n

var M = M || {};
M.n = M.n || {};

(function (self) {
    self.doSomething = function () {
        console.log("something");
    };
})(M.n);

文件2定义了模块M.n.p

var M = M || {};
M.n = M.n || {};
M.n.p = M.n.p || {};

(function (self) {
    self.doSomethingElse = function () {
       console.log("something else");
    };
})(M.n.p);

现在，在“主”脚本中，您可以自由使用这些模块的成员

M.n.doSomething();
M.n.p.doSomethingElse();

定义模块可能有点乏味，但您应该能够快速启动一些东西来实现自动化。在过去，我曾使用这个小脚本来帮助简化，但也可以随意创建自己的脚本。您甚至可以使用一致的文件命名在依赖项管理中烘焙

 var namespace = function(path, context, args) {
  var finalLink = namespace._generateChain(path, window);
  context.apply(finalLink, [finalLink].concat(args));
 };

 namespace._generateChain = function(path, root) {
  var segments = path.split('.'),
      cursor = root,
      segment;

  for (var i = 0; i < segments.length; ++i) {
   segment = segments[i];
   cursor = cursor[segment] = cursor[segment] || {};
  }

  return cursor;
 };

如果出于某种原因希望在其他别名下包含变量，可以将其传递给命名空间函数，并将其作为参数传递给该函数

namespace("M.n.p", function (self, $) {
   self.doSomethingElse = function () {
      $("p").text("something else");
   };
}, jQuery);

用来组织事物。对于共享逻辑，共享方法必须存储在全局可访问的命名空间上，或通过require（）访问。我不喜欢对应用程序代码进行许多require（）调用，所以我将模块分块包含，每个模块通过define inclusion附加到特定的名称空间

//Core.js
define(function(){
  return {
    ns: 'global namespace'
  };
});

//newMethod.js
define(['core'], function( ns ){
  ns.newMethod = function(){ console.log( 'my new method ' ); }
});

//Application code
require(['newMethod'], function( namespace ) {
   console.log( namespace.ns ); //global namespace
   namespace.newMethod(); //'my new method'
});

---

连接将如何删除每个模块周围的许多闭包？@Drew:不会。串联将用于减少生产环境中HTTP请求（来自脚本加载）的数量。同样地，你会通过一个缩微器来减少代码大小。对不起，我以为我在你的解释中读到了，只是说’-你的第二个代码块的第三行有一个错误：M.p应该是M.n.p我还需要为我要加载的每个模块创建一个脚本标记吗？你需要阅读RequireJS的工作原理，但您将创建一个脚本来配置RequireJS。之后，根据需要加载其他脚本。当需要时，通过require（）和define（）调用异步加载它们。

//Core.js
define(function(){
  return {
    ns: 'global namespace'
  };
});

//newMethod.js
define(['core'], function( ns ){
  ns.newMethod = function(){ console.log( 'my new method ' ); }
});

//Application code
require(['newMethod'], function( namespace ) {
   console.log( namespace.ns ); //global namespace
   namespace.newMethod(); //'my new method'
});