【转】JavaScript闭包和模块模式

 

原文：http://www.joezimjs.com/javascript/javascript-closures-and-the-module-pattern/

在JavaScript中一个最广泛使用的设计模式是模块的模式。模块模式使用了JavaScript中的一个很棒的特性-闭包- 用来给你方法中的隐私一些控制这样的第三方应用程序不能访问私有数据或覆盖它。在这篇文章中，我会教你什么是闭包，它是如何工作的，以及如何利用它在你的JavaScript代码中实现模块模式。
什么是闭包？
闭包是JavaScript语言的一种构造。在JavaScript内所有变量都能在全局范围内访问，除非变量在函数内用var关键字声明过。

variable1 = 1; //全局范围
var variable2 = 2; // 不在一个函数内: 全局范围
      
function funcName() {
  variable3 = 3; // 没用var关键字声明: 全局范围
  var variable4 = 4; //仅本地访问
}

 

view raw gistfile1.js This Gist brought to you by GitHub.
在一个函数内，你也可以获得全局范围和每个你所在的函数上级范围的访问权限。换句话说，函数内声明变量只能在函数包围范围内访问。

var globalvar = 1; //全局范围

function outer() {
  var outervar = 2; // outer()范围内

  function inner() {
    var innervar = 3; // inner()范围内
    console.log(globalvar); // => 1
    console.log(outervar); // => 2
    console.log(innervar); // => 3
  }

  console.log(globalvar); // => 1
  console.log(outervar); // => 2
  console.log(innervar); // => Reference Error引用错误;
}

console.log(globalvar); // => 1
console.log(outervar); // => Reference Error引用错误
console.log(innervar); // => Reference Error引用错误

 

每一个真正的JavaScript程序员应该知道这一点，除非他不思进取。知道这一点，你可以得出这样的结论，用一种办法来保持你所有代码在全局命名空间外，是正确的。这特别有用，当你不想给任何人在未经许可的情况下有重写你任何代码的机会。你可以通过使用一个匿名函数（不给它命名，没有被赋予一个变量）立即执行自身。这是众所周知的自调用匿名函数（SIAF），虽然它可能是更准确地称为立即调用的函数表达 (IIFE–读做“iffy”) -作者Ben Alman。

(function() {
    // 这函数立即执行，内部所有变量都是私有的
}());

 

view raw gistfile1.js This Gist brought to you by GitHub.
紧接着右大括号，是左右括号于是函数将立即执行。围绕整个函数表达式的括号不是运行的代码必需的，但一般用作给其他开发人员的信号，这是一个IIFE，而不是一个标准函数。有些人喜欢在前面加上一个惊叹号（!）或分号（;)，而不是用括号包起来。
用闭包的模块模式
知道了闭包是什么，我们就可以使用模块模式创建对象。通过返回一个对象或变量并赋给一个函数外变量，这样我们可以暴露任何希望暴露给外界的，我们可以有公开和私有的方法。

var Module = (function() {
    // 下面函数是私有的，但可以被公开函数访问
    function privateFunc() { … };
  
    // 返回一个对象赋予Module
    return {
        publicFunc: function() {
            privateFunc(); // publicFunc可以直接访问privateFunc
        }
    };
}());

 

这就是模块模式的本质。您还可以使用参数传入或缩写常用资源的名称：

var Module = (function($, w, undefined) {
    // …
    // return {…};
}(jQuery, window));

 

我传入jQuery和window，被分别缩写为$和w。注意我没有传任何东西作为第三个参数。这样参数undefined将是undefined，所以它完美地工作。有些人这样处理undefined是因为无论如何，它是可编辑的。所以，如果你判断某某是否是undefined，但undefined可能已经改变，你的比较将不起作用。这种技术保证它将按预期工作。
透露模块模式revealing module pattern
透露模块模式是另一种方式来写模块模式，需要更多点代码，但有时更容易理解和阅读。不同于在IIFE中定义所有私有变量并在返回对象中定义公开方法，你把所有方法都写在IIFE中，只是“透露”哪些是你想公开在return语句内的。

var Module = (function() {
    // 现在所有函数直接互访
    var privateFunc = function() {
        publicFunc1();
    };
  
    var publicFunc1 = function() {
        publicFunc2();
    };
  
    var publicFunc2 = function() {
        privateFunc();
    };
  
    // 返回对象赋予Module
    return {
        publicFunc1: publicFunc1,
        publicFunc2: publicFunc2
    };
}());

 

对比正常的模块模式，透露模块模式有几个优点：

    所有函数的声明和实现都在同一个地方，从而制造较少的混乱。
    私有函数现在可以访问公开函数，如果他们需要。
    当一个公开函数需要调用另一个公开函数时，他们调用publicFunc2()，而不是用this.publicFunc2()，从而节省了几个字符。

透露模块模式的唯一真正的缺点，正如我所说，是你必须写更多的代码，因为你必须先写好函数然后再把它的名字写在return语句内，尽管它最终可能会因为你可以忽略this.部分而节省你的代码。
扩展模块模式
我想谈的最后一件事是使用模块模式扩展已经存在的模块。这很常用，当为jQuery之类的库做插件，如下。

var jQuery = (function($) {
    $.pluginFunc = function() {
        …
    }
  
    return $;
}(jQuery));

 

此代码是相当灵活的，因为你甚至不需要var jQuery=或接近尾部的return语句。没有它们jQuery仍将可以用这个新方法扩展。实际上返回和赋值整个jQuery对象，可能在性能上有损失，但是，如果你想在扩展jQuery的同时，分配jQuery到一个新的变量名，你只需改变第一行的jQuery为任何你想要的。
结论
朋友们，今天就到这里。这些都是常见的技术和功能，即使你不使用这篇文章的知识，保留在你的脑海，以防万一用到（很可能会发生）。。。最后，不要忘记分享和在下面评论。感谢和编码快乐！