设计模式-用JavaScript实现单例模式

Ping 2019-09-03

《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)) 
  }
}

相关推荐