設計模式-用JavaScript實現單例模式

《JavaScript設計模式與開發實踐》的學習筆記
設計模式-用JavaScript實現單例模式

說明

定義：保證一個類僅有一個實例,並提供一個訪問它的全局訪問點。
使用場景：全局緩存、Windows對象、登陸浮窗等
關鍵：用一個變量來標誌是否已經爲某個類建立對象，沒有則建立，有則返回這個對象

標準單例模式

代碼實現：
javascript code

/**
 * 標準單例模式
 * 缺點是使用者必須知道這是個單例類，原本能夠直接new xxx，如今變成了xxx.getInstance
 */
var Singleton = function (name) {
  this.name = name
  this.instance = null
};
Singleton.prototype.getName = function () {
  alert(this.name)
}
Singleton.prototype.getInstance = function (name) {
  if(this.instance!==null){
    this.instance = new Singleton(name)
  }
  return this.instance
}

透明單例模式

javascript code

/**
 * 利用閉包和IIFE實現了透明單例模式
 * 但違反了單一職責原則
 * 缺點是，當再也不須要單例時，須要改寫構造函數
 */
var CreateDiv = (function() {
  var instance
  var CreateDiv = function(html) {
    if (instance) {
      return instance
    }
    this.html = html
    this.init() // 執行init方法
    return (instance = this) // 保證只有一個一個對象
  }
  CreateDiv.prototype.init = function() {
    var div = document.createElement('div')
    div.innerHTML = this.html
    document.body.appendChild(div)
  }
  return CreateDiv
})()

用代理實現的單例

javascript code

/**
 * 代理實現單例
 * 將負責管理單例的邏輯移到proxySingletonCreate
 */
var CreateSpan = function(html) {
  this.html = html
  this.init()
}
CreateSpan.prototype.init = function() {
  var span = document.createElement('span')
  span.innerHTML = this.html
  document.body.appendChild(span)
}

var proxySingletonCreate = (function() {
  var instance
  return function(html) {
    if (!instance) [(instance = new CreateSpan('test'))]
    return instance
  }
})()

建立單例的通用方法

由上能夠看出，建立單例的核心即爲使用一個變量表示這個對象是否被建立，即：
javascript code

var instance
if(!instance) {
   instance = xxx
}

具體代碼實現即爲：
javascript code

/**
 * 建立單例的抽象方法
 * @param {function} fn 
 */
var getSingle = function(fn) {
  var result
  return function() {
    return result || (result = fn.apply(this, arguments)) 
  }
}