5

我遇到了一个以奇怪方式构建的 JS 文件：

var modal = (function(){
  var method = {};

  // Center the modal in the viewport
  method.center = function () {};

  // Open the modal
  method.open = function (settings) {};

  // Close the modal
  method.close = function () {};

  return method;
}());

我了解将函数包装到“模态”对象中的部分，但是为什么将所有函数绑定到method最后返回呢？

4

2 回答 2

6

这是一种将功能分组到模块中并摆脱全局变量的设计模式。这会导致更好的代码。

  1. 函数调用创建了一个“闭包”，即在该函数中声明的所有变量的作用域，即使在函数退出后它们仍然存在，并且它们在函数外部不可见。

           var modal = (function(){
       var method = {};
       // Center the modal in the viewport
       method.center = function () {};

      // Open the modal
      method.open = function (settings) {};

      // Close the modal
      method.close = function () {};

      return method;
    }());  // This function call here creates a "closure" ( scope )

  2. 现在要使模块的某些成员在模块外部可用，它们需要从函数中返回，这里return method正是这样做的，创建method了一个可以在外部使用的模块的公共对象。

  3. 不是创建诸如等的单独变量open，而是close将相关函数作为属性（对象的键）分配给主method对象，以便返回单个对象使所有相关函数都可以访问。这也有助于减少闭包范围内的标识符（名称）的数量。

阅读有关此modular模式的这篇非常好的文章：

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

于 2013-05-16T18:22:56.287 回答
3

对于该特定代码，没有任何优势。它与以下内容相同：

var modal = {

  // Center the modal in the viewport
  center: function () {},

  // Open the modal
  open: function (settings) {},

  // Close the modal
  close: function () {},

};

但是，如果你在函数中放置一个局部变量，那就是另一回事了：

var modal = (function(){

  // a variable that is private to the object
  var local = 'hello world';

  var method = {};

  // Center the modal in the viewport
  method.center = function () {};

  // Open the modal
  method.open = function (settings) {};

  // Close the modal
  method.close = function () {};

  return method;
}());

现在对象中的所有方法都可以访问私有变量，但不能从对象外部直接访问。

于 2013-05-16T18:25:12.600 回答