这两种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"的变量引用它.