在JavaScript中一個(gè)最廣泛使用的設(shè)計(jì)模式是模塊的模式。模塊模式使用了JavaScript中的一個(gè)很棒的特性-閉包- 用來(lái)給你方法中的隱私一些控制這樣的第三方應(yīng)用程序不能訪問(wèn)私有數(shù)據(jù)或覆蓋它。在這篇文章中球订，我會(huì)教你什么是閉包哪替，它是如何工作的饵逐，以及如何利用它在你的JavaScript代碼中實(shí)現(xiàn)模塊模式穆端。什么是閉包困曙？
閉包是JavaScript語(yǔ)言的一種構(gòu)造恰矩。在JavaScript內(nèi)所有變量都能在全局范圍內(nèi)訪問(wèn)记盒，除非變量在函數(shù)內(nèi)用var關(guān)鍵字聲明過(guò)。
variable1 = 1; //全局范圍
var variable2 = 2; // 不在一個(gè)函數(shù)內(nèi): 全局范圍
function funcName() {
variable3 = 3; // 沒(méi)用var關(guān)鍵字聲明: 全局范圍
var variable4 = 4; //僅本地訪問(wèn)
}
在一個(gè)函數(shù)內(nèi)外傅，你也可以獲得全局范圍和每個(gè)你所在的函數(shù)上級(jí)范圍的訪問(wèn)權(quán)限纪吮。換句話說(shuō)，函數(shù)內(nèi)聲明變量只能在函數(shù)包圍范圍內(nèi)訪問(wèn)萎胰。
var globalvar = 1; //全局范圍
function outer() {
var outervar = 2; // outer()范圍內(nèi)
function inner() {
var innervar = 3; // inner()范圍內(nèi)
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引用錯(cuò)誤;
}
console.log(globalvar); // => 1
console.log(outervar); // => Reference Error引用錯(cuò)誤
console.log(innervar); // => Reference Error引用錯(cuò)誤
每一個(gè)真正的JavaScript程序員應(yīng)該知道這一點(diǎn)碾盟，除非他不思進(jìn)取。知道這一點(diǎn)技竟，你可以得出這樣的結(jié)論冰肴，用一種辦法來(lái)保持你所有代碼在全局命名空間外，是正確的。這特別有用熙尉，當(dāng)你不想給任何人在未經(jīng)許可的情況下有重寫(xiě)你任何代碼的機(jī)會(huì)估盘。你可以通過(guò)使用一個(gè)匿名函數(shù)（不給它命名，沒(méi)有被賦予一個(gè)變量）立即執(zhí)行自身骡尽。這是眾所周知的自調(diào)用匿名函數(shù)（SIAF）遣妥，雖然它可能是更準(zhǔn)確地稱為立即調(diào)用的函數(shù)表達(dá) (IIFE–讀做“iffy”) -作者BenAlman。
(function() {
// 這函數(shù)立即執(zhí)行攀细，內(nèi)部所有變量都是私有的
}());
緊接著右大括號(hào)箫踩，是左右括號(hào)于是函數(shù)將立即執(zhí)行。圍繞整個(gè)函數(shù)表達(dá)式的括號(hào)不是運(yùn)行的代碼必需的谭贪，但一般用作給其他開(kāi)發(fā)人員的信號(hào)境钟，這是一個(gè)IIFE，而不是一個(gè)標(biāo)準(zhǔn)函數(shù)俭识。有些人喜歡在前面加上一個(gè)驚嘆號(hào)（!）或分號(hào)（;)慨削，而不是用括號(hào)包起來(lái)。
用閉包的模塊模式###
知道了閉包是什么套媚，我們就可以使用模塊模式創(chuàng)建對(duì)象缚态。通過(guò)返回一個(gè)對(duì)象或變量并賦給一個(gè)函數(shù)外變量，這樣我們可以暴露任何希望暴露給外界的堤瘤，我們可以有公開(kāi)和私有的方法玫芦。
var Module = (function() {
// 下面函數(shù)是私有的，但可以被公開(kāi)函數(shù)訪問(wèn)
function privateFunc() { … };
// 返回一個(gè)對(duì)象賦予Module
return {
publicFunc: function() {
privateFunc(); // publicFunc可以直接訪問(wèn)privateFunc
}
};
}());
這就是模塊模式的本質(zhì)本辐。您還可以使用參數(shù)傳入或縮寫(xiě)常用資源的名稱：
var Module = (function($, w, undefined) {
// …
// return {…};
}(jQuery, window));
我傳入jQuery和window桥帆，被分別縮寫(xiě)為$和w。注意我沒(méi)有傳任何東西作為第三個(gè)參數(shù)慎皱。這樣參數(shù)undefined將是undefined老虫，所以它完美地工作。有些人這樣處理undefined是因?yàn)闊o(wú)論如何茫多，它是可編輯的祈匙。所以，如果你判斷某某是否是undefined地梨，但undefined可能已經(jīng)改變菊卷，你的比較將不起作用。這種技術(shù)保證它將按預(yù)期工作宝剖。()
透露模塊模式revealing module pattern###
透露模塊模式是另一種方式來(lái)寫(xiě)模塊模式洁闰，需要更多點(diǎn)代碼，但有時(shí)更容易理解和閱讀万细。不同于在IIFE中定義所有私有變量并在返回對(duì)象中定義公開(kāi)方法扑眉，你把所有方法都寫(xiě)在IIFE中纸泄，只是“透露”哪些是你想公開(kāi)在return語(yǔ)句內(nèi)的。
var Module = (function() {
// 現(xiàn)在所有函數(shù)直接互訪
var privateFunc = function() {
publicFunc1();
};
var publicFunc1 = function() {
publicFunc2();
};
var publicFunc2 = function() {
privateFunc();
};
// 返回對(duì)象賦予Module
return {
publicFunc1: publicFunc1,
publicFunc2: publicFunc2
};
}());
對(duì)比正常的模塊模式腰素，透露模塊模式有幾個(gè)優(yōu)點(diǎn)：所有函數(shù)的聲明和實(shí)現(xiàn)都在同一個(gè)地方聘裁，從而制造較少的混亂。
私有函數(shù)現(xiàn)在可以訪問(wèn)公開(kāi)函數(shù)弓千，如果他們需要衡便。
當(dāng)一個(gè)公開(kāi)函數(shù)需要調(diào)用另一個(gè)公開(kāi)函數(shù)時(shí)，他們調(diào)用publicFunc2()洋访，而不是用this.publicFunc2()镣陕，從而節(jié)省了幾個(gè)字符。
透露模塊模式的唯一真正的缺點(diǎn)姻政，正如我所說(shuō)呆抑，是你必須寫(xiě)更多的代碼，因?yàn)槟惚仨毾葘?xiě)好函數(shù)然后再把它的名字寫(xiě)在return語(yǔ)句內(nèi)汁展，盡管它最終可能會(huì)因?yàn)槟憧梢院雎詔his.部分而節(jié)省你的代碼鹊碍。
擴(kuò)展模塊模式###
我想談的最后一件事是使用模塊模式擴(kuò)展已經(jīng)存在的模塊。這很常用食绿，當(dāng)為jQuery之類的庫(kù)做插件侈咕，如下。
var jQuery = (function($) {
$.pluginFunc = function() {
…
}
return $;
}(jQuery));
此代碼是相當(dāng)靈活的炫欺，因?yàn)槟闵踔敛恍枰獀ar jQuery=或接近尾部的return語(yǔ)句乎完。沒(méi)有它們jQuery仍將可以用這個(gè)新方法擴(kuò)展熏兄。實(shí)際上返回和賦值整個(gè)jQuery對(duì)象品洛，可能在性能上有損失，但是摩桶，如果你想在擴(kuò)展jQuery的同時(shí)桥状，分配jQuery到一個(gè)新的變量名，你只需改變第一行的jQuery為任何你想要的硝清。
