javascript設計模式－－單例模式

javascript單例模式總結

1.什麼是單例模式？

單例模式的定義是：一個類僅有一個實例，而且能夠在全局訪問。
在平常開發中，單例模式的使用十分普遍。例如開發登陸浮窗，咱們不管點擊登陸按鈕多少次，浮窗都只會建立一次。
這時，浮窗就很適合使用單例模式來建立。

2.實現單例模式

var CreatePopbox = function(html){
    this.html = html;
    this._init();
};

CreatePopbox.prototype._init = function(){
    this.div = document.createElement('div');
    this.div.innerHTML = this.html;
    this.div.style.display = 'none';
    document.body.appendChild(this.div);

};

CreatePopbox.prototype.show = function(){
    this.div.style.display = 'block';
};

CreatePopbox.prototype.hide = function(){
    this.div.style.display = 'none';
};

//經過代理函數達到單例模式的效果

var proxysingleCreatePopbox = (function(){
    var instance;
    return function(html){
        if(!instance){
            instance = new CreatePopbox(html);
        }
        return instance;
    }
})();


//建立CreatePopbox:

var a = new proxysingleCreatePopbox("this is a");
var b = new proxysingleCreatePopbox("this is b");

console.log(a === b);  //true

能夠看到，a和b都指向了同一個實例，執行new proxysingleCreatePopbox("this is b") 時，並不會從新生成一個新的CreatePopbox。
這符合了單例模式的核心：確保實例只有一個。

經過以上例子，咱們已經瞭解單例模式的實現方式，但還有一些缺陷：

建立對象和單例管理的邏輯都合在proxysingleCreatePopbox裏邊，當須要建立其餘單例時，只能把proxysingleCreatePopbox拷貝一次。

所以，咱們須要把代碼再改造一下，把不變的部分隔離出來。

//
var getSingle = function(fn){
  var singleObj;
  return function(obj){
    if(!singleObj){
      singleObj = new fn(obj);
    }
    return singleObj;
  }
}



var CreatePopbox = function(opation){
  this.html = opation.html;
  this._init();
};

CreatePopbox.prototype._init = function(){
  this.div = document.createElement('div');
  this.div.innerHTML = this.html;
  document.body.appendChild(this.div);
};

var singlePopbox = getSingle(CreatePopbox);

var a = new singlePopbox({html:"this is a"});

//建立一個新的單例

var CreateTipbox = function(opation){
  this.div = document.createElement('div');
  this.div.style.color = opation.color;
  this.div.innerHTML = opation.html;
  document.body.appendChild(this.div);
} 

//使用getSingle管理
var singleTipbox = getSingle(CreateTipbox);
var b = new singleTipbox({html:"this is b",color:"#f00"});

---

原文連接：javascript設計模式－－單例模式