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

Question

我已经阅读了有关揭示模块模式的信息,我喜欢它.但是那些"主对象"拥有数十个子对象和数百个函数的大型项目呢？我不想成为将所有代码放在一个匿名函数闭包中的人.

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

Answer 1

您可以使用扩充将模块分离到不同的文件中.准备好生产版本后,可以将这些文件连接成一个或多个文件.

File1定义了模块Mn

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

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

File2定义了模块Mnp

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 () {
      console.log("something else");
   };
});

如果由于某种原因你想在不同的别名下包含一个变量,你可以将它传递给命名空间函数,它将作为参数传递给函数.

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