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

hiyangguo發表於2016-01-07

簡介

Module模式是JavaScript程式設計中一個非常通用的模式,一般情況下,大家都知道基本用法,本文嘗試著給大家更多該模式的高階使用方式。

首先我們來看看Module模式的基本特徵:

  1. 模組化,可重用

  2. 封裝了變數和function,和全域性的namaspace不接觸,解耦合

  3. 只暴露可用public的方法,其它私有方法全部隱藏

關於Module模式,最早是由YUI的成員Eric Miraglia在2007年左右(原文為4年前,文章釋出日期為2011年所以我算了一下是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 = "segmentfault";

    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

關於本文

本文轉自TOM大叔深入理解JavaScript系列

【深入理解JavaScript系列】文章,包括了原創,翻譯,轉載,整理等各型別文章,原文是TOM大叔的一個非常不錯的專題,現將其重新整理髮布。謝謝大叔。

相關文章