[讀書筆記] JavaScript設計模式: 單例模式

標籤：單例對象   訪問   提取   其他   而不是   style   app   載入完成   項目   

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

 

一種簡單、方便的寫法就是用一個變數來標識當前類是否已經建立過對象，如果有，則返回已經建立好的對象，否則建立一個新對象，並將其返回。

var Singleton = function(name) {  this.name = name;  this.instance = null;}Singleton.prototype.getName = function() {  alert(this.name);}Singleton.getInstance = function(name) {  if (!this.instance) {    this.instance = new Singleton(name);  }  return this.instance}

但是上述寫法有一個問題，那就是使用Singleton這個類的時候，必須參考API文檔，否則使用者不知道必須通過getInstance()方法而不是通過new的方式來擷取對象，這就是增加了這個類的“不透明”性。

修改上述實現方式，使其變得“透明”些。

var Singleton = (function() {  var instance = null;  var Singleton = function(name) {    if (!instance) {      this.name = name;      instance = this;    }    return instance;  }  Singleton.prototype.getName = function() {    alert(this.name)    }  return Singleton;})()

修改後的Singleton類使用起來和其他的類沒有區別，只要new Singleton(‘name‘)就可以了，但是上述寫法也有一點小問題，那就是在Singleton的建構函式中做了兩件事，一是建立對象並初始化name等變數，二是保證了該類只會存在一個對象，違反了設計原則中的“單一職責原則”的概念。如果後續要將Singleton改為非單例類，就必須要修改Singleton的建構函式。

為了使職責分的更加清楚，我們引入代理的方式來實現單例。

var Manager = function(name) {  this.name = name;}Manager.prototype.getName = function() {  alert(this.name);}var Singleton = (function() {  var instance;  return function(name) {    if (!instance) {      instance = new Manager(name)    }    return instance  }})()

通過引入代理類，保證了各個類之間的職責單一。

 

上述是通過類的方式來建立單例對象，在其他語言中經常會看到這樣的寫法，如Java，C#等。但是JavaScript其實是一門無類（class-free）的語言，想要一個對象，直接建立就可以了，沒有必要先建立類，再通過類建立對象，這樣做無異於穿棉衣洗澡。所以說基於“類”的單例在JavaScript中其實並不適用。 

 

在實際項目中經常會用到摸態框，一般來說，一個頁面的模態框是唯一的，最常見的實現方式有以下兩種方式：

1. 在頁面載入完成的時候便建立好模態框，當然這個模態框是隱藏的
2. 當真正需要顯示模態框時再建立

第一種方式簡單，但是可能會浪費DOM元素，因為部分使用者可能一直用不到這個模態框。第二種方式就需要用到將要學習的惰性單例。

var getSingle = (function() {  var instance;  return function(fn) {    return instance || (instance = fn.apply(this, arguments));  }})()var createModal = function() {  var div = document.createElement(‘div‘);  div.innerHTML = ‘modal‘;  document.body.appendChild(div);  return div;}

將getSingle方法提取出來，以後不光可以用於createModal，createXhr，createIframe等等都可以與getSingle組合使用。

[讀書筆記] JavaScript設計模式: 單例模式