模塊模式
Module模式最初定義在傳統(tǒng)的軟件工程中见秤,為類提供私有和公有封裝的方法砂竖。在JavaScript中真椿,并不能可以直接聲明類鹃答,但我們可以使用閉包來封裝私有的屬性和方法,進(jìn)而模擬類的概念突硝,在JavaScript中實現(xiàn)Module模式测摔。通過這種方式,我們就使得一個單獨的對象擁有公有/私有方法和變量解恰,從而屏蔽來自全局作用域的特殊部分锋八,也就大大降低了變量聲明之間和函數(shù)聲明之間沖突的可能性。
var myModule = (function () {
// 私有變量
var privateVar = 0;
// 私有函數(shù)
var privateFun = function (foo) {
console.log(foo);
};
return {
// 私有變量
publicVar: "foo",
// 公有函數(shù)
publicFun: function (arg) {
// 修改私有變量
privateVar ++;
// 傳入bar調(diào)用私有方法
privateFun(arg);
}
};
}) ();
在JavaScript中一個最廣泛使用的設(shè)計模式是模塊的模式护盈。模塊模式使用了JavaScript中的一個很棒的特性-閉包- 用來給你方法中的隱私一些控制這樣的第三方應(yīng)用程序不能訪問私有數(shù)據(jù)或覆蓋它挟纱。在這篇文章教你什么是閉包,它是如何工作的腐宋,以及如何利用它在你的JavaScript代碼中實現(xiàn)模塊模式紊服。
什么是閉包檀轨?
閉包是JavaScript語言的一種構(gòu)造。在JavaScript內(nèi)所有變量都能在全局范圍內(nèi)訪問欺嗤,除非變量在函數(shù)內(nèi)用var關(guān)鍵字聲明過参萄。
variable1 = 1; //全局范圍
var variable2 = 2; // 不在一個函數(shù)內(nèi): 全局范圍
function funcName() {
variable3 = 3; // 沒用var關(guān)鍵字聲明: 全局范圍
var variable4 = 4; //僅本地訪問
}
在一個函數(shù)內(nèi),你也可以獲得全局范圍和每個你所在的函數(shù)上級范圍的訪問權(quán)限煎饼。換句話說讹挎,函數(shù)內(nèi)聲明變量只能在函數(shù)包圍范圍內(nèi)訪問。
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引用錯誤;
}
console.log(globalvar); // => 1
console.log(outervar); // => Reference Error引用錯誤
console.log(innervar); // => Reference Error引用錯誤
每一個真正的JavaScript程序員應(yīng)該知道這一點吆玖,除非他不思進(jìn)取筒溃。知道這一點,你可以得出這樣的結(jié)論沾乘,用一種辦法來保持你所有代碼在全局命名空間外铡羡,是正確的。這特別有用意鲸,當(dāng)你不想給任何人在未經(jīng)許可的情況下有重寫你任何代碼的機會烦周。你可以通過使用一個匿名函數(shù)(不給它命名,沒有被賦予一個變量)立即執(zhí)行自身怎顾。這是眾所周知的自調(diào)用匿名函數(shù)(SIAF)读慎,雖然它可能是更準(zhǔn)確地稱為立即調(diào)用的函數(shù)表達(dá) (IIFE–讀做“iffy”) -作者Ben Alman。
(function() {
// 這函數(shù)立即執(zhí)行槐雾,內(nèi)部所有變量都是私有的
}());
緊接著右大括號夭委,是左右括號于是函數(shù)將立即執(zhí)行。圍繞整個函數(shù)表達(dá)式的括號不是運行的代碼必需的募强,但一般用作給其他開發(fā)人員的信號株灸,這是一個IIFE,而不是一個標(biāo)準(zhǔn)函數(shù)擎值。有些人喜歡在前面加上一個驚嘆號(!)或分號(;)慌烧,而不是用括號包起來。
用閉包的模塊模式
知道了閉包是什么鸠儿,我們就可以使用模塊模式創(chuàng)建對象屹蚊。通過返回一個對象或變量并賦給一個函數(shù)外變量,這樣我們可以暴露任何希望暴露給外界的进每,我們可以有公開和私有的方法汹粤。
var Module = (function() {
// 下面函數(shù)是私有的,但可以被公開函數(shù)訪問
function privateFunc() { … };
// 返回一個對象賦予Module
return {
publicFunc: function() {
privateFunc(); // publicFunc可以直接訪問privateFunc
}
};
}());
這就是模塊模式的本質(zhì)田晚。您還可以使用參數(shù)傳入或縮寫常用資源的名稱:
var Module = (function($, w, undefined) {
// …
// return {…};
}(jQuery, window));
我傳入jQuery和window嘱兼,被分別縮寫為$和w。注意我沒有傳任何東西作為第三個參數(shù)贤徒。這樣參數(shù)undefined將是undefined芹壕,所以它完美地工作胃惜。有些人這樣處理undefined是因為無論如何,它是可編輯的哪雕。所以船殉,如果你判斷某某是否是undefined,但undefined可能已經(jīng)改變斯嚎,你的比較將不起作用利虫。這種技術(shù)保證它將按預(yù)期工作。
透露模塊模式revealing module pattern
透露模塊模式是另一種方式來寫模塊模式堡僻,需要更多點代碼糠惫,但有時更容易理解和閱讀。不同于在IIFE中定義所有私有變量并在返回對象中定義公開方法钉疫,你把所有方法都寫在IIFE中硼讽,只是“透露”哪些是你想公開在return語句內(nèi)的。
var Module = (function() {
// 現(xiàn)在所有函數(shù)直接互訪
var privateFunc = function() {
publicFunc1();
};
var publicFunc1 = function() {
publicFunc2();
};
var publicFunc2 = function() {
privateFunc();
};
// 返回對象賦予Module
return {
publicFunc1: publicFunc1,
publicFunc2: publicFunc2
};
}());
對比正常的模塊模式牲阁,透露模塊模式有幾個優(yōu)點:
所有函數(shù)的聲明和實現(xiàn)都在同一個地方固阁,從而制造較少的混亂。
私有函數(shù)現(xiàn)在可以訪問公開函數(shù)城菊,如果他們需要备燃。
當(dāng)一個公開函數(shù)需要調(diào)用另一個公開函數(shù)時,他們調(diào)用publicFunc2()凌唬,而不是用this.publicFunc2()并齐,從而節(jié)省了幾個字符。
透露模塊模式的唯一真正的缺點客税,正如我所說况褪,是你必須寫更多的代碼,因為你必須先寫好函數(shù)然后再把它的名字寫在return語句內(nèi)更耻,盡管它最終可能會因為你可以忽略this.部分而節(jié)省你的代碼测垛。
擴展模塊模式
我想談的最后一件事是使用模塊模式擴展已經(jīng)存在的模塊。這很常用酥夭,當(dāng)為jQuery之類的庫做插件赐纱,如下脊奋。
1 2 3 4 5 6 7
var jQuery = (function($) {
$.pluginFunc = function() {
…
}
return $;
}(jQuery));
此代碼是相當(dāng)靈活的熬北,因為你甚至不需要var jQuery=或接近尾部的return語句。沒有它們jQuery仍將可以用這個新方法擴展诚隙。實際上返回和賦值整個jQuery對象讶隐,可能在性能上有損失,但是久又,如果你想在擴展jQuery的同時巫延,分配jQuery到一個新的變量名效五,你只需改變第一行的jQuery為任何你想要的。