深入理解JavaScript 模塊模式

英文：http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

模塊模式是JavaScript一種常用的編碼模式。這是一般的理解，但也有一些高級應用沒有得到很多關注。在本文中，我將回顧基礎知識，瀏覽一些不錯的高級技巧，甚至我認為是原生基礎的。

基礎知識

首先我們開始簡單概述模型模式。三年前Eric Miraglia(YUI)的博文使模型模式眾所周知。如果你已經很熟悉模型模式，可以直接閱讀“高級模式”。

匿名閉包

這是一切成為可能的基礎，也是JavaScript最好的特性。我們將簡單的創建匿名函數，並立即執行。所有函數內部代碼都在閉包(closure)內。它提供了整個應用生命周期的私有和狀態。

1. (function () {
2.         // ... all vars and functions are in this scope only
3.         // still maintains access to all globals
4. }());

復制代碼

注意匿名函數周圍的()。這是語言的要求。關鍵字function一般認為是函數聲明，包括()就是函數表達式。

引入全局

JavaScript有個特性，稱為隱性全局。使用變量名稱時，解釋器會從作用域向后尋找變量聲明。如果沒找到，變量會被假定入全局（以后可以全局調用）。如果會被分配使用，在還不存在時全局創建它。這意味着在匿名函數里使用全局變量很簡單。不幸的是，這會導致代碼難以管理，文件中不容易區分（對人而言）哪個變量是全局的。

幸好，匿名函數還有一個不錯的選擇。全局變量作為參數傳遞給匿名函數。將它們引入我們的代碼中，既更清晰，又比使用隱性全局更快。下面是一個例子：

1. (function ($, YAHOO) {
2.         // 當前域有權限訪問全局jQuery($)和YAHOO
3. }(jQuery, YAHOO));

復制代碼

模塊出口

有時你不只想用全局變量，但你需要先聲明他們（模塊的全局調用）。我們用匿名函數的返回值，很容易輸出他們。這樣做就完成了基本的模塊模式。以下是一個完整例子：

1. var MODULE = (function () {
2.         var my = {},
3.                 privateVariable = 1;
4.         
5.         function privateMethod() {
6.                 // ...
7.         }
8.         
9.         my.moduleProperty = 1;
10.         my.moduleMethod = function () {
11.                 // ...
12.         };
13.         
14.         return my;
15. }());

復制代碼

注意，我們聲明了一個全局模塊MODULE，有兩個公開屬性：方法MODULE.moduleMethod和屬性MODULE.moduleProperty。而且，匿名函數的閉包還維持了私有內部狀態。同時學會之上的內容，我們就很容易引入需要的全局變量，和輸出到全局變量。

高級模式

對許多用戶而言以上的還不足，我們可以采用以下的模式創造強大的，可擴展的結構。讓我們使用MODULE模塊，一個一個繼續。

擴充

模塊模式的一個限制是整個模塊必須在一個文件里。任何人都了解長代碼分割到不同文件的必要。還好，我們有很好的辦法擴充模塊。（在擴充文件）首先我們引入模塊（從全局），給他添加屬性，再輸出他。下面是一個例子擴充模塊：

1. var MODULE = (function (my) {
2.         my.anotherMethod = function () {
3.                 // 此前的MODULE返回my對象作為全局輸出，因此這個匿名函數的參數MODULE就是上面MODULE匿名函數里的my
4.         };
6.         return my;
7. }(MODULE));

復制代碼

我們再次使用var關鍵字以保持一致性，雖然其實沒必要。代碼執行后，模塊獲得一個新公開方法MODULE.anotherMethod。擴充文件沒有影響模塊的私有內部狀態。

松耦合擴充

上面的例子需要我們首先創建模塊，然后擴充它，這並不總是必要的。提升JavaScript應用性能最好的操作就是異步加載腳本。因而我們可以創建靈活多部分的模塊，可以將他們無順序加載，以松耦合擴充。每個文件應有如下的結構：

1. var MODULE = (function (my) {
2.         // add capabilities...
3.         
4.         return my;
5. }(MODULE || {}));

復制代碼

這個模式里，var語句是必須的，以標記引入時不存在會創建。這意味着你可以像LABjs一樣同時加載所有模塊文件而不被阻塞。

緊耦合擴充

雖然松耦合很不錯，但模塊上也有些限制。最重要的，你不能安全的覆寫模塊屬性（因為沒有加載順序）。初始化時也無法使用其他文件定義的模塊屬性（但你可以在初始化后運行）。緊耦合擴充意味着一組加載順序，但是允許覆寫。下面是一個例子（擴充最初定義的MODULE）：

1. var MODULE = (function (my) {
2.         var old_moduleMethod = my.moduleMethod;
3.         
4.         my.moduleMethod = function () {
5.                 // method override, has access to old through old_moduleMethod...
6.         };
7.         
8.         return my;
9. }(MODULE));

復制代碼

我們覆寫的MODULE.moduleMethod，但依舊保持着私有內部狀態。

克隆和繼承

1. var MODULE_TWO = (function (old) {
2.         var my = {},
3.                 key;
4.         
5.         for (key in old) {
6.                 if (old.hasOwnProperty(key)) {
7.                         my[key] = old[key];
8.                 }
9.         }
10.         
11.         var super_moduleMethod = old.moduleMethod;
12.         my.moduleMethod = function () {
13.                 // override method on the clone, access to super through super_moduleMethod
14.         };
15.         
16.         return my;
17. }(MODULE));

復制代碼

這種方式也許最不靈活。他可以實現巧妙的組合，但是犧牲了靈活性。正如我寫的，對象的屬性或方法不是拷貝，而是一個對象的兩個引用。修改一個會影響其他。這可能可以保持遞歸克隆對象的屬性固定，但無法固定方法，除了帶eval的方法。不過，我已經完整的包含了模塊。（其實就是做了一次淺拷貝）。

跨文件私有狀態

一個模塊分割成幾個文件有一個嚴重缺陷。每個文件都有自身的私有狀態，且無權訪問別的文件的私有狀態。這可以修復的。下面是一個松耦合擴充的例子，不同擴充文件之間保持了私有狀態：

1. var MODULE = (function (my) {
2.         var _private = my._private = my._private || {},
3.                 _seal = my._seal = my._seal || function () {
4.                         delete my._private;
5.                         delete my._seal;
6.                         delete my._unseal;
7.                 },//模塊加載后，調用以移除對_private的訪問權限
8.                 _unseal = my._unseal = my._unseal || function () {
9.                         my._private = _private;
10.                         my._seal = _seal;
11.                         my._unseal = _unseal;
12.                 };//模塊加載前，開啟對_private的訪問，以實現擴充部分對私有內容的操作
13.         
14.         // permanent access to _private, _seal, and _unseal
15.         
16.         return my;
17. }(MODULE || {}));

復制代碼

何文件都可以在本地的變量_private中設置屬性，他會對別的擴充立即生效（即初始化時所有擴充的私有狀態都保存在_private變量，並被my._private輸出）。模塊完全加載了，應用調用MODULE._seal()方法阻止對私有屬性的讀取（干掉my._private輸出)。如果此后模塊又需要擴充，帶有一個私有方法。加載擴充文件前調用MODULE._unseal()方法（恢復my._private，外部恢復操作權限）。加載后調用再seal()。

這個模式一直隨我工作至今，我還沒看到別的地方這樣做的。我覺得這個模式很有用，值得寫上。

子模塊

最后的高級模式實際上最簡單。有很多好方法創建子模塊。和創建父模塊是一樣的：

1. MODULE.sub = (function () {
2.         var my = {};
3.         // 就是多一級命名空間
4.         
5.         return my;
6. }());

復制代碼

雖然很簡單，但我還是提一下。子模塊有所有正常模塊的功能，包括擴充和私有狀態。

總結

大多數高級模式可以互相組合成更多有用的模式。如果要我提出一個復雜應用的設計模式，我會組合松耦合、私有狀態和子模塊。

這里我還沒有涉及性能，不過我有個小建議：模塊模式是性能增益的。他簡化了許多，加快代碼下載。松耦合可以無阻塞並行下載，等價於提高下載速度。可能初始化比別的方法慢一點，但值得權衡。只要全局正確的引入，運行性能不會有任何損失，可能還因為局部變量和更少的引用，加快子模塊的加載。

最后，一個例子動態加載子模塊到父模塊（動態創建）中。這里就不用私有狀態了，其實加上也很簡單。這段代碼允許整個復雜分成的代碼核心及其子模塊等平行加載完全。

1. var UTIL = (function (parent, $) {
2.         var my = parent.ajax = parent.ajax || {};
3.         
4.         my.get = function (url, params, callback) {
5.                 // ok, so I'm cheating a bit :)
6.                 return $.getJSON(url, params, callback);
7.         };
8.         
9.         // etc...
10.         
11.         return parent;
12. }(UTIL || {}, jQuery));

復制代碼

我希望你能受益的，並請發表評論，分享您的想法。 現在，繼續前進，並寫出更好的，更模塊化的JavaScript！

轉自：http://www.oschina.net/translate/javascript-module-pattern-in-depth