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

How do I professionally structure my module-pattern Javascript projects?

本文关键字：模块 模式 Javascript 项目 我的 构建 何专业      更新时间：2023-09-26

我读过关于揭示模块模式的文章，我喜欢它。但是，对于"主对象"有数十个子对象和数百个函数的大型项目呢？我不想成为将所有代码放在一个匿名函数闭包中的人。

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

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

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

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

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

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

//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'
});
相关文章：