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

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

想要改进这个问题？通过编辑这篇文章来更新问题，使其仅关注一个问题。

5 年前已关闭。

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);

Answer 2

使用 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'
});