JS設計模式——5.單體模式(用了這么久，竟全然不知!)

單體模式的優勢

用了這么久的單體模式，竟全然不知！用它具體有哪些好處呢？

1.可以用它來划分命名空間(這個就是就是經常用的了)

2.利用分支技術來封裝瀏覽器之間的差異(這個還真沒用過，挺新鮮)

3.借助單體模式，可以把代碼組織的更為一致，方便閱讀與維護(這個也用過了)

最基本的單體模式

最簡單的單體其實就是一個對象字面量。它把一批有一定關聯的方法和屬性組織在一起。

var Singleton={
    name: nimei,
    age: 2,
    walk: function(){
        ...
    },
    eat: function(){
        ...
    }
}

這個對象可以被修改。你可以添加屬性和方法。你也可以用delete運算符刪除現有成員。這實際上違背了面向對象設計的一條原則：類可以被擴展，但不應該被修改。如果某些變量需要保護，那么可以將其定義在閉包中。

對象字面量只是創建單體的方法之一。也並非所有的對象字面量都是單體，那些只是用來模仿關聯數組或容納數據的對象字面量顯然不是單體。

用作划分命名空間

防止全局聲明的修改

/*using a namespace*/
var common = {
    findProduct: function(){

    },
    ...
}
var findProduct = true;

這樣以來，即使我們在外面聲明了相同的變量，也能在一定程度上防止findProduct的被修改。

防止其它來源代碼的修改

現在網頁上的JavaScript代碼往往不止用一個來源，什么庫代碼、廣告代碼和徽章代碼。為了避免與自己代碼的沖突，可以定義一個包含自己所有代碼的對象。

var JChen = {};
JChen.Common = {
    //A singleton with common methods used by all objects and modules
}
JChen.ErrorCodes = {
    //An object literal used to store data
}
JChen.PageHandler = {
    //A singleton with page specific methods and attributes.
}

用作專用代碼包裝器

在擁有許多網頁的網站中，有些代碼是所有網頁都要用到的，他們通常被存放在獨立的文件中；而有些代碼則是某個網頁專用的，不會被用到其他地方。最好把這兩種代碼分別包裝在自己的單體對象中。

我們經常要用Javascript為表單添加功能。出於平穩退化方面的考慮，通常先創建一個不依賴於Javascript的、使用普通提交機制完成任務的純HTML網頁。

JChen.RegPage = {
    FORM_ID: 'reg-form',
    OUTPUT_ID: 'reg-result',

    handleSubmit: function(e){
        e.preventDefault(); //stop the normal form submission

        var data = {};
        var inputs = JChen.RegPage.formEl.getElementByTagName('input');

        for(var i=0, len=inputs.length; i<len; i++){
            data[inputs[i].name] = inputs[i].value;
        }

        JChen.RegPage.sendRegistration(data);
    },
    sendRegistration: function(data){
        //make an xhr request and call displayResult() when response is recieved
        ...
    },
    displayResult: function(response){
        JChen.RegPage.outputEl.innerHTML = response;
    },
    init: function(){
        JChen.RegPage.formEl =$(JChen.RegPage.Form_ID);
        JChen.RegPage.outputEl = $(JChen.RegPage.OUTPUT_ID);
        //hijack the form submission
        addEvent(JChen.RegPage.formEl, 'submit', JChen.RegPage.handleSubmit);
    }
}
//invoke initialization method after the page load
addLoadEvent(JChen.RegPage.init);

擁有私有成員的單體

第3章介紹的創建類的私有成員的做法的缺點在於它們比較耗費內存，因為每個實例都有方法的一份新副本。

不過，由於單體對象只會被實例化一次，因此為其定義私用方法是不必考慮內存方面的問題。

使用下划線表示法

這個方法就不介紹了，太簡單了。

使用閉包

JChen.DataParser = (function(){
    //private members
    var whitespaceRegex = /\s+/;

    function stripWhitespace(str){
        return str.replace(whitespaceRegex, '');
    }
    function stringSplit(str, delimiter){
        return str.split(delimiter);
    }

    return {
        //public members
        stringToArray: function(str, delimiter, stripWS){
            if(stripWS){
                str = stripWhitespace(str);
            }
            var outputArray = stringSplit(str, delimiter);
            return outputArray;
        }
    }
})();

這種單體模式又稱模塊模式，指的是它可以把一批相關的方法和屬性組織為模塊並起到划分命名空間的作用。

現在這些私用方法和屬性可以直接用其名來訪問，不必在其前面加上this.或JChen.DataParser，這些前綴只適用於訪問單體對象的公用成員。

惰性實例化技術

前面所講的單體模式又一個共同點：單體對象都是在腳本加載時被創建出來。對於資源密集的或配置開銷甚大的單體，更合理的做法是將其實例化推遲到需要使用他的時候。

這種技術就是惰性加載(lazy loading)。

實現步驟如下：

1.將所有代碼移到constructor方法中

2.全權控制調用時機(正是getInstance所要做的)

JChen.lazyLoading = (function(){
    var uniqInstance;

    function constructor(){
        var attr = false;
        function method(){

        }

        return {
            attrp: true,
            methodp: function(){

            }
        }
    }

    return {
        getInstance: function(){
            if(!uniqInstance){
                uniqInstance = constructor();
            }
            return uniqInstance;
        }
    }
})();

分支技術

分支是一種用來把瀏覽器間的差異封裝在運行期間進行設置的動態方法中的技術。

比如說，如果網站中要頻繁使用xhr，每次調用都要再次運行瀏覽器嗅探代碼，這樣會嚴重缺乏效率。

更有效的做法是在腳本加載時一次性地確定針對瀏覽器的代碼。這正是分支技術所做的事情。

當然，分支技術並不總是更高效的選擇，在兩個或者多個分支中只有一個分支被用到了，其他分支就占用了內存。

在考慮是否使用分支技術的時候，必須在縮短時間和占用更多內存這一利一弊之間權衡一下。

下面利用分支技術實現XHR：

var XHR = (function(){
    var standard = {
        createXhrObj: function(){
            return new XMLHttpRequest();
        }
    };
    var activeXNew = {
        createXhrObj: function(){
            return new ActiveXObject('Msxml2.XMLHTTP');
        }
    };
    var activeXOld = {
        createXhrObj: function(){
            return new ActiveXObject('Microsoft.XMLHTTP');
        }
    };

    var testObj;
    try{
        testObj = standard.createXhrObj();
        return testObj;
    }catch(e){
        try{
            testObj = activeXNew.createXhrObj();
            return testObj;
        }catch(e){
            try{
                testObj = activeXOld.createXhrObj();
                return testObj;
            }catch(e){
                throw new Error('No XHR object found in this environment.');
            }
        }
    }
})();

單體模式的弊端

了解了這么多關於單體的知識，我們再來看看它的弊端。

由於單體模式提供的是一種單點訪問，所以它有可能導致模塊間的強耦合。因此也就不利於單元測試了。

綜上，單體還是留給定義命名空間和實現分支型方法這些用途。