模塊模式
Module模式最初定義在傳統的軟件工程中,為類提供私有和公有封裝的方法。在JavaScript中,并不能可以直接聲明類,但我們可以使用閉包來封裝私有的屬性和方法,進而模擬類的概念,在JavaScript中實現Module模式。通過這種方式,我們就使得一個單獨的對象擁有公有/私有方法和變量,從而屏蔽來自全局作用域的特殊部分,也就大大降低了變量聲明之間和函數聲明之間沖突的可能性。
var myModule = (function () {
// 私有變量
var privateVar = 0;
// 私有函數
var privateFun = function (foo) {
console.log(foo);
};
return {
// 私有變量
publicVar: "foo",
// 公有函數
publicFun: function (arg) {
// 修改私有變量
privateVar ++;
// 傳入bar調用私有方法
privateFun(arg);
}
};
}) ();
在JavaScript中一個最廣泛使用的設計模式是模塊的模式。模塊模式使用了JavaScript中的一個很棒的特性-閉包- 用來給你方法中的隱私一些控制這樣的第三方應用程序不能訪問私有數據或覆蓋它。在這篇文章教你什么是閉包,它是如何工作的,以及如何利用它在你的JavaScript代碼中實現模塊模式。
什么是閉包?
閉包是JavaScript語言的一種構造。在JavaScript內所有變量都能在全局范圍內訪問,除非變量在函數內用var關鍵字聲明過。
variable1 = 1; //全局范圍
var variable2 = 2; // 不在一個函數內: 全局范圍
function funcName() {
variable3 = 3; // 沒用var關鍵字聲明: 全局范圍
var variable4 = 4; //僅本地訪問
}
在一個函數內,你也可以獲得全局范圍和每個你所在的函數上級范圍的訪問權限。換句話說,函數內聲明變量只能在函數包圍范圍內訪問。
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() {
// 這函數立即執行,內部所有變量都是私有的
}());
緊接著右大括號,是左右括號于是函數將立即執行。圍繞整個函數表達式的括號不是運行的代碼必需的,但一般用作給其他開發人員的信號,這是一個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之類的庫做插件,如下。
1 2 3 4 5 6 7
var jQuery = (function($) {
$.pluginFunc = function() {
…
}
return $;
}(jQuery));
此代碼是相當靈活的,因為你甚至不需要var jQuery=或接近尾部的return語句。沒有它們jQuery仍將可以用這個新方法擴展。實際上返回和賦值整個jQuery對象,可能在性能上有損失,但是,如果你想在擴展jQuery的同時,分配jQuery到一個新的變量名,你只需改變第一行的jQuery為任何你想要的。