javascript - 这两种 JavaScript 模式有什么区别

Question

我正在尝试更好地组织我的 JavaScript。我的目标是拥有模块化架构，我可以将其分解为单独的文件(sitename.js、sitename.utils.js 等)。

我想知道这两种模式的优点和缺点是什么，哪种模式更适合分解为单独文件中的模块。

模式 #1(模块模式)

var MODULE = (function () {

    //private methods

    return {
        common: {
            init: function() {
                console.log("common.init");
            }
        },
        users: {
            init: function () {
                console.log("users.init");
            },
            show: function () {
                 console.log("users.show");
            }
        }
    }
})();

模式 #2(单例)

var MODULE = {
  common: {
    init: function() {
        console.log("common.init");
    }
  },

  users: {
    init: function() {
      console.log("users.init");
    },

    show: function() {
      console.log("users.show");
    }
  }
};

Answer 1

个人比较推荐#1的扩展，如下:

var Module = (function(Module) {
  // A comment
  Module.variable1 = 3;

  /**
   * init()
   */
  Module.init = function() {
    console.log("init");
  };

  // ...

  return Module;
})(Module || {});

我喜欢这种模式有几个原因。第一，当所有函数都是声明而不是大哈希时，文档(特别是 javadoc 样式)看起来更自然。第二，如果您的子模块的大小增加，它可以让您将它们分成多个文件而无需任何重构。

例如，如果 Module.Users 进入它自己的文件:

var Module = Module || {};
Module.Users = (function(Users) {
  /**
   * init()
   */
  Users.init = function() {
    console.log("Module.Users.init");
  };

  // ...

  return Users;
})(Module.Users || {});

现在“module.js”和“module.users.js”可以是单独的文件，无论加载顺序如何，它们都可以工作。还要注意模块名称的局部作用域——如果您的模块名称很长，这将非常方便，因为您可以使用“MyApp.Users.EditScreen”并在模块定义范围内使用诸如“ES”之类的变量来引用它.