1. 程式人生 > >[讀書筆記] JavaScript設計模式: 單例模式

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

就是 單例對象 func 需要 返回 urn his manager div

單例模式:保證一個類只有一個實例,並提供一個可以訪問它的全局訪問點。

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

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設計模式: 單例模式