javascript --- 設計模式之Module模式

基本用法

先看一下最簡單的一個實現，代碼以下：

var Calculator = function(){
    // 這裏能夠聲明私有成員
    var eqCtrl = document.getElement(eq);
    return {
        // 暴露公開的成員
        add: function(x,  y){
             var val = x + y;
             eqCtrl.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。無論怎麼樣，我仍是把這一個方式放在這個帖子裏了，你們使用的時候注意一下就好了。