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

Question

<分区>

Answer 1

您可以使用扩充将模块分离到不同的文件中。准备好发布产品后，您可以将这些文件连接成一个或多个文件。

File1 定义模块 M.n

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

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

File2 定义模块 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 () {
      console.log("something else");
   };
});

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

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