JavaScript設計模式 Item 6 --單例模式Singleton

JavaScript設計模式 Item 6 --單例模式Singleton

單例模式的定義：保證一個類僅有一個執行個體，並提供一個訪問它的全域訪問點。

單例模式是一種常用的模式，有一些對象我們往往只需要一個，比如線程池、全域緩衝、瀏覽器的window對象。在js開發中，單例模式的用途同樣非常廣泛。試想一下，當我們單擊登入按鈕的時候，頁面中會出現一個登入框，而這個浮窗是唯一的，無論單擊多少次登入按鈕，這個浮窗只會被建立一次。因此這個登入浮窗就適合用單例模式。

1、單例模式的使用情境

在使用一種模式之前，我們最好要知道，這種模式的使用情境。用了這麼久的單例模式，竟全然不知！用它具體有哪些好處呢？

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

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

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

2、最基本的單例模式

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

var Singleton = {    attr1: true ,     attr2: 10 ,    method1 : function(){        alert('我是方法1');    },    method2 : function(){        alert('我是方法2');    }};

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

對象字面量只是建立單例的方法之一。也並非所有的對象字面量都是單例，那些只是用來模仿關聯陣列或容納資料的對象字面量顯然不是單例。

3、借用閉包建立單例

閉包主要的目地 保護資料

// 命名空間var BHX = {} ;BHX.Singleton = (function(){    // 添加自己的私人成員    var a1 = true ;    var a2 = 10  ;    var f1 = function(){        alert('f1');    }    var f2 = function(){        alert('f2');    }                   // 把塊級範圍裡的執行結果賦值給我的單例對象    return {            attr1: a1 ,             attr2: a2 ,            method1 : function(){                return f1();            },            method2 : function(){                return f2();            }                           } ;})();alert(BHX.Singleton.attr1);BHX.Singleton.method1();

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

4、單例模式用於劃分命名空間

1、防止全域聲明的修改

/*using a namespace*/var BHX = {};BHX.Singleton = {    attr1: true ,     attr2: 10 ,    method1 : function(){        alert('我是方法1');    },    method2 : function(){        alert('我是方法2');    }               };BHX.Singleton.attr1;var attr1 = false;

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

2、防止其它來原始碼的修改

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

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

3、用作專用代碼封裝

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

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

XGP.RegPage = {    FORM_ID: 'reg-form',    OUTPUT_ID: 'reg-result',    handleSubmit: function(e){        e.preventDefault(); //stop the normal form submission        var data = {};        var inputs = XGP.RegPage.formEl.getElementByTagName('input');        for(var i=0, len=inputs.length; i

5、惰性單例

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

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

實現步驟如下：

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

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

XGP.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; } }})();

6、分支技術

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

// 分支單例 （判斷程式的分支 <瀏覽器差異的檢測>）var Ext = {} ;var def = false ;Ext.More = (function(){ var objA = { // Firefox瀏覽器 內部的一些配置 attr1:'FF屬性1' // 屬性1 // 屬性2 // 方法1 // 方法2 } ; var objB = { // IE瀏覽器 內部的一些配置 attr1:'IE屬性1' // 屬性1 // 屬性2 // 方法1 // 方法2 } ; return (def) ?objA:objB;})();alert(Ext.More.attr1);

比如說，如果網站中要頻繁使用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.'); } } }})();

7、單例模式的弊端

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

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

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