这两种 JavaScript 模式有什么区别吗？

Question

查看一些 JavaScript 库和其他人的代码，我看到了两种常见模式，我不知道使用其中一种是否有区别或优势。这些模式看起来有点像这样：

1.

var app = (function () {
    // Private vars

    // Module
    var obj = {
        prop: "",
        method: function () {}
    };

    return obj;
})();

2.

(function () {
    // Private vars

    // Module
    var obj = {
        prop: "",
        method: function () {}
    };

    window.app = obj;
})();

这些模式是否相同，或者其中一种模式比另一种模式具有优势或用途不同？

提前致谢。

Answer 1

第二个假设父作用域中存在一个名为 window 的对象，并在那里分配一个属性。

第一个将其留给调用者进行分配，并且不依赖于定义的窗口（它可能仅位于网络浏览器内部）。

所以，我想说第一个肯定更好（更独立，更少依赖环境）。

Answer 2

tl;dr：选择一种方法并保持一致。

---

在我看来，第一种方法在可读性方面略有优势。在我的脑海中，当我读到它时，我看到“模块 app 正在被定义”，并且这个闭包内部的所有内容都属于该模块。这对我来说是一个自然的分解，并强加了即将定义的模块的面向对象性质。

我喜欢第一种方法的另一个原因是，更改模块定义的范围更清晰。您定义的每个模块都不需要成为全局范围的一部分。使用第二种方法，如果范围不是通过将父对象传递为 Jared Farrish 通过他的 jQuery 示例进行了说明，如果您决定更改该父对象的名称，那么您将面临破坏代码的风险。此示例说明了这一点：

var namespace = {
  subns: { ... }
};

(function() {
  var module = { ... };
  namespace.subns.someModule = module;
}());

每当标识符 namespace 或 subns 发生更改时，您还必须更新此模块以及遵循此模式并将其自身添加到同一对象的任何其他模块。

总而言之，方法一和方法二（带有依赖注入）都不比另一个“更好”，这只是一个偏好问题。此讨论的唯一好处是您应该选择一种方法并保持一致。

Answer 3

它们都完成相同的事情，即在代码运行时在全局命名空间中创建一个对象。

一个并不比另一个更“硬编码”，因为两者都没有进行任何类型的函数原型设计，在该原型设计中您可以使用 new 关键字创建对象的克隆。在我看来，这只是一个偏好问题。

例如，jquery 做了类似于后者的事情：

(function( window, undefined ) {

// Use the correct document accordingly with window argument (sandbox)
var document = window.document;
var jQuery = (function() {

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    },

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$,

...

但是 Prototype JS 库做了前者：

var Prototype = {
  Version: '1.6.1',

  Browser: (function(){
    var ua = navigator.userAgent;
    var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
    return {
      IE:             !!window.attachEvent && !isOpera,
      Opera:          isOpera,
      WebKit:         ua.indexOf('AppleWebKit/') > -1,
      Gecko:          ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
      MobileSafari:   /Apple.*Mobile.*Safari/.test(ua)
    }
  })(),

...

我不知道为什么一个比另一个更好，或者他们以不同的方式完成他们的任务（在窗口命名空间）。

Answer 4

在第一个示例中，如果 app 在另一个函数中定义，则 app 将仅在该本地范围内可用，而在第二个示例中 app变量被显式分配给全局范围。

在第二个示例中，如果在函数外部的全局作用域中定义，则仅将 app 分配给全局作用域。

Answer 5

第二种形式有一个轻微的优势，因为你有一个完全独立的功能；例如，您的 JS 文件可以有一个标准的页眉和页脚。

我不完全相信的部分是块内的局部变量。我倾向于更喜欢这个：

(function () {
   // Private vars

   // Module
   window.app = {
       prop: "",
       method: function () {}
   };
})();

尽管当您做不止一件事时，例如使用多个方法而不是像本例中的单个对象构建一个对象，这会有点崩溃。