深入理解JavaScript系列(3) 全面解析Module模式

簡介
Module模式是JavaScript編程中一個非常通用的模式，一般情況下，大家都知道基本用法，本文嘗試著給大家更多該模式的進階使用方式。
首先我們來看看Module模式的基本特徵：
模組化，可重用
封裝了變數和function，和全域的namaspace不接觸，松耦合
只暴露可用public的方法，其它私人方法全部隱藏
關於Module模式，最早是由YUI的成員Eric Miraglia在4年前提出了這個概念，我們將從一個簡單的例子來解釋一下基本的用法（如果你已經非常熟悉了，請忽略這一節）。
基本用法
先看一下最簡單的一個實現，代碼如下： 複製代碼 代碼如下:var Calculator = function (eq) {
//這裡可以聲明私人成員
var eqCtl = document.getElementById(eq);
return {
// 暴露公開的成員
add: function (x, y) {
var val = x + y;
eqCtl.innerHTML = val;
}
};
};

我們可以通過如下的方式來調用： 複製代碼 代碼如下:var calculator = new Calculator('eq');
calculator.add(2, 2);

大家可能看到了，每次用的時候都要new一下，也就是說每個執行個體在記憶體裡都是一份copy，如果你不需要傳參數或者沒有一些特殊苛刻的要求的話，我們可以在最後一個}後面加上一個括弧，來達到自執行的目的，這樣該執行個體在記憶體中只會存在一份copy，不過在展示他的優點之前，我們還是先來看看這個模式的基本使用方法吧。
匿名閉包
匿名閉包是讓一切成為可能的基礎，而這也是JavaScript最好的特性，我們來建立一個最簡單的閉包函數，函數內部的代碼一直存在於閉包內，在整個運行周期內，該閉包都保證了內部的代碼處於私人狀態。 複製代碼 代碼如下:(function () {
// ... 所有的變數和function都在這裡聲明，並且範圍也只能在這個匿名閉包裡
// ...但是這裡的代碼依然可以訪問外部全域的對象
}());

注意，匿名函數後面的括弧，這是JavaScript語言所要求的，因為如果你不聲明的話，JavaScript解譯器預設是聲明一個function函數，有括弧，就是建立一個函數運算式，也就是自執行，用的時候不用和上面那樣在new了，當然你也可以這樣來聲明：
(function () {/* 內部代碼 */})();
不過我們推薦使用第一種方式，關於函數自執行，我後面會有專門一篇文章進行詳解，這裡就不多說了。
引用全域變數
JavaScript有一個特性叫做隱式全域變數，不管一個變數有沒有用過，JavaScript解譯器反向遍曆範圍鏈來尋找整個變數的var聲明，如果沒有找到var，解譯器則假定該變數是全域變數，如果該變數用於了賦值操作的話，之前如果不存在的話，解譯器則會自動建立它，這就是說在匿名閉包裡使用或建立全域變數非常容易，不過比較困難的是，代碼比較難管理，尤其是閱讀代碼的人看著很多區分哪些變數是全域的，哪些是局部的。
不過，好在在匿名函數裡我們可以提供一個比較簡單的替代方案，我們可以將全域變數當成一個參數傳入到匿名函數然後使用，相比隱式全域變數，它又清晰又快，我們來看一個例子： 複製代碼 代碼如下:(function ($, YAHOO) {
// 這裡，我們的代碼就可以使用全域的jQuery對象了，YAHOO也是一樣
} (jQuery, YAHOO));

現在很多類庫裡都有這種使用方式，比如jQuery源碼。
不過，有時候可能不僅僅要使用全域變數，而是也想聲明全域變數，如何做呢？我們可以通過匿名函數的傳回值來返回這個全域變數，這也就是一個基本的Module模式，來看一個完整的代碼： 複製代碼 代碼如下:var blogModule = (function () {
var my = {}, privateName = "部落格園";
function privateAddTopic(data) {
// 這裡是內部處理代碼
}
my.Name = privateName;
my.AddTopic = function (data) {
privateAddTopic(data);
};
return my;
} ());

上面的代碼聲明了一個全域變數blogModule，並且帶有2個可訪問的屬性：blogModule.AddTopic和blogModule.Name，除此之外，其它代碼都在匿名函數的閉包裡保持著私人狀態。同時根據上面傳入全域變數的例子，我們也可以很方便地傳入其它的全域變數。
進階用法
上面的內容對大多數使用者已經很足夠了，但我們還可以基於此模式延伸出更強大，易於擴充的結構，讓我們一個一個來看。
擴充
Module模式的一個限制就是所有的代碼都要寫在一個檔案，但是在一些大型項目裡，將一個功能分離成多個檔案是非常重要的，因為可以多人合作易於開發。再回頭看看上面的全域參數匯入例子，我們能否把blogModule自身傳進去呢？答案是肯定的，我們先將blogModule傳進去，添加一個函數屬性，然後再返回就達到了我們所說的目的，上代碼： 複製代碼 代碼如下:var blogModule = (function (my) {
my.AddPhoto = function () {
//添加內部代碼
};
return my;
} (blogModule));

這段代碼，看起來是不是有C#裡擴充方法的感覺？有點類似，但本質不一樣哦。同時儘管var不是必須的，但為了確保一致，我們再次使用了它，代碼執行以後，blogModule下的AddPhoto就可以使用了，同時匿名函數內部的代碼也依然保證了私密性和內部狀態。
松耦合擴充
上面的代碼儘管可以執行，但是必須先聲明blogModule，然後再執行上面的擴充代碼，也就是說步驟不能亂，怎麼解決這個問題呢？我們來回想一下，我們平時聲明變數的都是都是這樣的：
var cnblogs = cnblogs || {} ;
這是確保cnblogs對象，在存在的時候直接用，不存在的時候直接賦值為{}，我們來看看如何利用這個特性來實現Module模式的任意載入順序： 複製代碼 代碼如下:var blogModule = (function (my) {
// 添加一些功能
return my;
} (blogModule || {}));

通過這樣的代碼，每個單獨分離的檔案都保證這個結構，那麼我們就可以實現任意順序的載入，所以，這個時候的var就是必須要聲明的，因為不聲明，其它檔案讀取不到哦。
緊耦合擴充
雖然松耦合擴充很牛叉了，但是可能也會存在一些限制，比如你沒辦法重寫你的一些屬性或者函數，也不能在初始化的時候就是用Module的屬性。緊耦合擴充限制了載入順序，但是提供了我們重載的機會，看如下例子： 複製代碼 代碼如下:var blogModule = (function (my) {
var oldAddPhotoMethod = my.AddPhoto;
my.AddPhoto = function () {
// 重載方法，依然可通過oldAddPhotoMethod調用舊的方法
};
return my;
} (blogModule));

通過這種方式，我們達到了重載的目的，當然如果你想在繼續在內部使用原有的屬性，你可以調用oldAddPhotoMethod來用。
複製與繼承 複製代碼 代碼如下:var blogModule = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var oldAddPhotoMethod = old.AddPhoto;
my.AddPhoto = function () {
// 複製以後，進行了重寫，當然也可以繼續調用oldAddPhotoMethod
};
return my;
} (blogModule));

這種方式靈活是靈活，但是也需要花費靈活的代價，其實該對象的屬性對象或function根本沒有被複製，只是對同一個對象多了一種引用而已，所以如果老對象去改變它，那複製以後的對象所擁有的屬性或function函數也會被改變，解決這個問題，我們就得是用遞迴，但遞迴對function函數的賦值也不好用，所以我們在遞迴的時候eval相應的function。不管怎麼樣，我還是把這一個方式放在這個文章裡了，大家使用的時候注意一下就行了。
跨檔案分享權限設定私人對象
通過上面的例子，我們知道，如果一個module分割到多個檔案的話，每個檔案需要保證一樣的結構，也就是說每個檔案匿名函數裡的私人對象都不能交叉訪問，那如果我們非要使用，那怎麼辦呢？ 我們先看一段代碼： 複製代碼 代碼如下:var blogModule = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
return my;
} (blogModule || {}));

任何檔案都可以對他們的局部變數_private設屬性，並且設定對其他的檔案也立即生效。一旦這個模組載入結束，應用會調用 blogModule._seal()"上鎖"，這會阻止外部接入內部的_private。如果這個模組需要再次增生，應用的生命週期內，任何檔案都可以調用_unseal() ”開鎖”，然後再載入新檔案。載入後再次調用 _seal()”上鎖”。
子模組
最後一個也是最簡單的使用方式，那就是建立子模組 複製代碼 代碼如下:blogModule.CommentSubModule = (function () {
var my = {};
// ...
return my;
} ());

儘管非常簡單，我還是把它放進來了，因為我想說明的是子模組也具有一般模組所有的進階使用方式，也就是說你可以對任意子模組再次使用上面的一些應用方法。
總結
上面的大部分方式都可以互相組合使用的，一般來說如果要設計系統，可能會用到松耦合擴充，私人狀態和子模組這樣的方式。另外，我這裡沒有提到效能問題，但我認為Module模式效率高，代碼少，載入速度快。使用松耦合擴充允許並行載入，這更可以提升下載速度。不過初始化時間可能要慢一些，但是為了使用好的模式，這是值得的。
參考文章：
http://yuiblog.com/blog/2007/06/12/module-pattern/
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
同步與推薦
本文已同步至目錄索引：深入理解JavaScript系列
深入理解JavaScript系列文章，包括了原創，翻譯，轉載等各類型的文章，如果對你有用，請推薦支援一把，給大叔寫作的動力。