JS設計模式1-單例模式

標籤：

單例模式是一種常用的模式，有一些對象我們往往只需要一個，比如全域緩衝，window對象。單例模式在js開發中單例模式的用途非常廣泛，比如頁面中有一個登入浮窗，無論單擊多少次登入視窗，這個視窗只會建立一次，那麼這個視窗就適合用單例模式來建立。

1、單例模式執行個體：

要實現單例模式並不複雜，無非是用一個變數來標誌當前是否已經為某個類建立過對象，如果是，則在下一次取該類執行個體的時候，之間返回之前建立的對象。

 1 var Sign=function(name){ 2     this.name=name; 3     this.instance=null; 4 } 5  6 Sign.prototype.getName=function(){ 7     return this.name; 8 } 9 10 Sign.getInstance=function(name){11     if(!this.instance){12         this.instance=new Sign(name);13     }14     return this.instance;15 }16 17 var obj1=Sign.getInstance("gao");18 var obj2=Sign.getInstance("xiang");19 alert(obj1===obj2);   //true

 

2.用代理實現單例模式。

我們可以把負責管理單例的邏輯轉移到代理類Signleton中。

 1 var createDiv=function(html){ 2     this.html=html; 3     this.init(); 4 } 5  6 createDiv.prototype.init=function(){ 7     var div=document.createElement("div"); 8     document.innerHTML=this.html; 9     document.body.appendChild(div);10 }11 12 var Signleton=(function(){13     var instance;14     return function(html){15         if(!instance){16             instance=new createDiv(html);17         }18         return instance;19     }20 })();21 22 var obj1=new Signleton("h1");23 var obj2=new Signleton("h2");24 alert(obj1===obj2)  //true

這樣寫的好處顯而易見，複用性強。

3.惰性單例

什麼是惰性單例，就是指在需要的時候在實現單例，比如在點擊登入按鈕的時候再建立登入浮窗。而不是頁面已載入就已經建立好登入浮窗，因為有些使用者並不需要登入，而只是看看天氣，看看新聞。

 1 var createLogin=(function(){ 2     var div; 3     return function(){ 4         if(!div){ 5             div=document.createElement(‘div‘); 6             div.innerHTML=‘登入視窗‘; 7             div.style.display=‘none‘; 8             document.body.appendChild(div); 9         }10         return div;11     }12 })();13 14 document.getElementById(‘loginBtn‘).addEventListener(‘click‘,function(){15     var loginWindow=createLogin();16     loginWindow.style.display=‘block‘;17 },false);

 

4.通用惰性單例。

上一段代碼違反了單一職責原則，如果有一天我們並不是createDiv，而是createFrame，createScript時就必須改動原始碼了。我們需要把不變的部分隔離出來。實現一個通用的函數。

這個邏輯始終是一樣的。

1 var obj;2 if(!obj){3   obj=xxx;  4 }

現在封裝一個getSignle函數。

var getSignle=function(fn){    var result;    return function(){        return result||(result=fn.apply(this,arguments))    }};

建立對象的方法fn被當場參數傳入getSignle函數中，之後讓getSignle返回一個函數，resule標誌對象是否被建立，如果沒建立，result儲存fn的執行結果，由於result存放在閉包環境中，所以不會被銷毀，在下次請求時，直接返回已經存在的result。

 

 1 var createLoginDiv=function(){ 2     var div=document.createElement("div"); 3     div.innerHTML="我是登入視窗"; 4     div.style.display=‘none‘; 5     document.body.appendChild(div); 6     return div; 7 } 8  9 var divLayout=getSignle(createLoginDiv);10 11 document.getElementById("loginBtn").addEventListener(‘click‘,function(){12     var loginWindow=divLayout();13     loginWindow.style.display=‘block‘;14 },false);

 

JS設計模式1-單例模式