[讀書筆記] JavaScript設計模式: 單例模式
單例模式:保證一個類只有一個實例,並提供一個可以訪問它的全局訪問點。
一種簡單、方便的寫法就是用一個變量來標識當前類是否已經創建過對象,如果有,則返回已經創建好的對象,否則創建一個新對象,並將其返回。
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中其實並不適用。
在實際項目中經常會用到摸態框,一般來說,一個頁面的模態框是唯一的,最常見的實現方式有以下兩種方式:
- 在頁面加載完成的時候便創建好模態框,當然這個模態框是隱藏的
- 當真正需要顯示模態框時再創建
第一種方式簡單,但是可能會浪費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設計模式: 單例模式