Javascript模組化程式設計詳解_基礎知識

模組化程式設計是一種非常常見Javascript程式設計模式。它一般來說可以使得程式碼更易於理解，但是有許多優秀的實踐還沒有廣為人知。

基礎

我們先簡單地概述一下，自從三年前Eric Miraglia（YUI的開發者）第一次發表部落格描述模組化模式以來的一些模組化模式。如果你已經對於這些模組化模式非常熟悉了，大可以直接跳過本節，從「進階模式」開始閱讀。

匿名閉包

這是一個讓一切變成可能的基本結構，同時它也是Javascript最棒的特性。我們將簡單地創建一個匿名函數並立即執行它。所有的程式碼將跑在這個函數內，生存在一個提供私有化的閉包中，它足以使得這些閉包中的變數能夠貫穿我們的應用的整個生命週期。

複製程式碼 程式碼如下:

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

注意這對包裹匿名函數的最外層括號。因為Javascript的語言特性，這對括號是必須的。在js中由關鍵字function開頭的語句總是會被認為是函數宣告式。把這段程式碼包裹在括號中就可以讓解釋器知道這是個函數表達式。

全域變數導入

Javascript有一個特性叫做隱式全域變數。無論一個變數名在哪裡被用到了，解釋器會根據作用域鏈來反向找到這個變數的var宣告語句。如果沒有找到var宣告語句，那麼這個變數就會被視為全域變數。如果這個變數用在一句賦值語句中，同時這個變數又不存在時，就會創造出一個全域變數。這意味著在匿名閉包中使用或建立全域變數是很容易的。不幸的是，這會導致寫出的程式碼極難維護，因為對於人的直覺感受來說，一眼根本分不清那些是全域的變數。

幸運的是，我們的匿名函數提供了簡單的變通方法。只要將全域變數作為參數傳遞到我們的匿名函數中，就可以得到比隱式全域變數更清晰又快速的程式碼了。下面是範例：

複製程式碼 程式碼如下:

(function ($, YAHOO) {
    // now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));

模組導出

有時你不僅想要使用全域變量，你還想要聲明它們，以供重複使用。我們可以很容易地透過導出它們來做到這一點——透過匿名函數的返回值。這樣做將會完成一個基本的模組化模式雛形，接下來會是一個完整的例子：

複製程式碼 程式碼如下:

var MODULE = (function () {
    var my = {},
        privateVariable = 1;
    function privateMethod() {
        // ...
    }
    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };
    return my;
}());

注意我們已經宣告了一個叫做MODULE的全域模組，它擁有2個公有的屬性：一個叫做MODULE.moduleMethod的方法和一個叫做MODULE.moduleProperty的變數。另外，它也維護了一個利用匿名函數閉包的、私有的內建狀態。同時，我們可以輕鬆地導入需要的全域變量，並像之前我們所學到的那樣來使用這個模組化模式。

進階模式

上面一節所描述的基礎已經足以應對許多情況，現在我們可以將這個模組化模式進一步的發展，創造更多強大的、可擴展的結構。讓我們從MODULE模組開始，一一介紹這些進階模式。

放大模式

整個模組必須在一個檔案中是模組化模式的一個限制。任何一個參與大型專案的人都會明白將js拆分多個檔案的價值。幸運的是，我們擁有一個很棒的實作來放大模組。首先，我們導入一個模組，並為它添加屬性，最後再導出它。下面是一個例子－從原本的MODULE中放大它：

複製程式碼 程式碼如下:

var MODULE = (function (my) {
    my.anotherMethod = function () {
        // added method...
    };
    return my;
}(MODULE));

我們用var關鍵字來保證一致性，雖然它在此處不是必須的。在這段程式碼執行完之後，我們的模組就已經擁有了一個新的、叫做MODULE.anotherMethod的公有方法。這個放大檔案也會維護它自己的私有內建狀態和匯入的物件。

寬放大模式

我們上面的範例需要我們的初始化模組最先被執行，然後放大模組才能執行，當然有時這可能也不一定是必需的。 Javascript應用程式可以做到的、用來提升效能的、最棒的事之一就是非同步執行腳本。我們可以創建靈活的多部分模組並透過寬放大模式使它們可以以任意順序載入。每一個文件都需要依照下面的結構來組織：

複製程式碼 程式碼如下:

var MODULE = (function (my) {
    // add capabilities...
    return my;
}(MODULE || {}));

在這個模式中，var表達式使必需的。注意如果MODULE還未初始化過，這句導入語句會建立MODULE。這意味著你可以用一個像LABjs的工具來並行載入你所有的模組文件，而不會被阻塞。

緊密放大模式

寬放大模式非常不錯，但它也會為你的模組帶來一些限制。最重要的是，你不能安全地覆蓋模組的屬性。你也無法在初始化的時候，使用其他檔案中的屬性（但你可以在運行的時候使用）。緊放大模式包含了一個載入的順序序列，並且允許覆蓋屬性。這兒是一個簡單的例子（放大我們的原始MODULE）：

複製程式碼 程式碼如下:

var MODULE = (function (my) {
    var old_moduleMethod = my.moduleMethod;
    my.moduleMethod = function () {
        // method override, 有 access to old through old_moduleMethod...
    };
    return my;
}(MODULE));

我們在上面的例子中覆蓋了MODULE.moduleMethod的實現，但在需要的時候，可以維護一個對原來方法的引用。

克隆與繼承

複製程式碼 程式碼如下:

var MODULE_TWO = (function (old) {
    var my = {},
        key;
    for (key in old) {
        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }
    var super_moduleMethod = old.moduleMethod;
    my.moduleMethod = function () {
        // override method on the clone, access to super through super_moduleMethod
    };
    return my;
}(MODULE));

這個模式可能是最缺乏彈性的一種選擇了。它確實使得程式碼顯得很整潔，但那是用靈活性的代價換來的。正如我上面寫的這段程式碼，如果某個屬性是物件或函數，它將不會被複製，而是會成為這個物件或函數的第二個引用。修改了其中的某一個就會同時修改另一個（譯者註：因為它們根本就是一個啊！）。這可以透過遞歸克隆過程來解決這個物件克隆問題，但函數克隆可能無法解決，也許用eval可以解決。因此，我在這篇文章中講述這個方法只是考慮到文章的完整性。

跨檔案私有變數

把一個模組分到多個檔案中有一個重大的限制：每一個檔案都維護了各自的私有變量，並且無法存取到其他檔案的私有變數。但這個問題是可以解決的。這裡有一個維護跨檔案私有變數的、寬放大模組的範例：

複製程式碼 程式碼如下:

var MODULE = (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;
        };
    // permanent access to _private, _seal, and _unseal
    return my;
}(MODULE || {}));

所有檔案可以在它們各自的_private變數上設定屬性，並且它理解可以被其他檔案存取。一旦這個模組載入完成，應用程式可以呼叫MODULE._seal()來防止外部對內部_private的呼叫。如果這個模組需要被重新放大，在任何一個檔案中的內部方法可以在載入新的檔案前呼叫_unseal()，並在新檔案執行好以後再呼叫_seal()。我如今在工作中使用這種模式，而且我在其他地方還沒有見過這種方法。我覺得這是一個非常有用的模式，很值得就這個模式本身寫一篇文章。

子模組

我們的最後一種進階模式是顯而易見最簡單的。創建子模組有許多優秀的實例。這就像是創建一般的模組一樣：

複製程式碼 程式碼如下:

MODULE.sub = (function () {
    var my = {};
    // ...
    return my;
}());

雖然這看起來很簡單，但我覺得還是值得在這裡提一提。子模組擁有一切一般模組的進階優勢，包括了放大模式和私有化狀態。

結論

大多數進階模式可以結合在一起來創建一個更有用的模式。如果我實在要我推薦一種設計複雜應用程式的模組化模式的化，我會選擇結合寬放大模式、私有變數和子模組。

我還未考慮過這些模式的性能問題，但我寧願把這轉化為一個更簡單的思考方式：如果一個模組化模式有很好的性能，那麼它能夠把最小化做的很棒，使得下載這個腳本檔案更快。使用寬放大模式可以允許簡單的非阻塞並行下載，這就會加快下載速度。初始化時間可能會稍慢於其他方法，但權衡利弊後這還是值得的。只要全域變數匯入準確，運行時效能應該會不會受到影響，而且還有可能在子模組中透過用私有變數縮短引用鏈來得到更快的運行速度。

作為結束，這裡是一個子模組動態地把自身加載到它的父模組的例子（如果父模組不存在則創建它）。為了簡潔，我把私有變數給去除了，當然加上私有變數也是很簡單的囉。這種程式模式允許一整個複雜層級結構程式碼庫透過子模組並行地完成載入。

複製程式碼 程式碼如下:

var UTIL = (function (parent, $) {
    var my = parent.ajax = parent.ajax || {};
    my.get = function (url, params, callback) {
        // ok, so I'm cheating a bit :)
        return $.getJSON(url, params, callback);
    };
    // etc...
    return parent;
}(UTIL || {}, jQuery));

本文總結了目前＂Javascript模組化程式設計＂的最佳實踐，說明如何投入實用。雖然這不是初級教程，但只要稍稍了解Javascript的基本語法，就能看懂。