单例模式

摘自《JavaScript设计模式与开发实践》

单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如浏览器中的 window 对象等。在 JavaScript开发中，单例模式的用途同样非常广泛。试想一下，当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。

// 要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。
  const Singleton = function (name) {
    this.name = name
    this.instance = null
  }
  Singleton.prototype.getName = function () {
    console.log(this.name)
  }
  Singleton.getInstance = function(name) {
    if(!this.instance) {
      this.instance = new Singleton(name)
    }
    return this.instance
  }
  const a = Singleton.getInstance( 'sven1' )
  const b = Singleton.getInstance( 'sven2' )
  alert ( a === b ) // true

我们通过 Singleton.getInstance 来获取 Singleton 类的唯一对象，这种方式相对简单，但有一个问题，就是增加了这个类的“不透明性”， Singleton 类的使用者必须知道这是一个单例类，跟以往通过 new XXX 的方式来获取对象不同，这里偏要使用 Singleton.getInstance 来获取对象。

透明的单例模式

我们现在的目标是实现一个“透明”的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。在下面的例子中，我们将使用 CreateDiv 单例类，它的作用是负责在页面中创建唯一的 div 节点，代码如下：

const CreateDiv = (function () {
    let instance
    let CreateDiv = function (html) {
      if (instance) {
        return instance
      }
      this.html = html
      this.init()
      return instance = this
    }

    CreateDiv.prototype.init = function () {
      const div = document.createElement('div')
      div.innerHTML = this.html
      document.body.appendChild(div)
    }
    return CreateDiv
  })()

为了把 instance 封装起来，我们使用了自执行的匿名函数和闭包，并且让这个匿名函数返回真正的 Singleton 构造方法，这增加了一些程序的复杂度，阅读起来也不是很舒服。

CreateDiv 的构造函数实际上负责了两件事情。第一是创建对象和执行初始化 init 方法，第二是保证只有一个对象。虽然我们目前还没有接触过“单一职责原则”的概念，但可以明确的是，这是一种不好的做法，至少这个构造函数看起来很奇怪。

用代理实现单例模式

现在我们通过引入代理类的方式，来解决上面提到的问题。

  // 首先在 CreateDiv 构造函数中，把负责管理单例的代码移除出去，使它成为一个普通的创建 div 的类：
  const CreateDiv = function (html) {
    this.html = html
    this.init()
  }
  CreateDiv.prototype.init = function () {
    const div = document.createElement('div')
    div.innerHTML = this.html
    document.body.appendChild(div)
  }
  // 接下来引入代理类 proxySingletonCreateDiv ：
  const ProxySingletunCreateDiv = (function() {
    let instance
    return function(html) {
      if(!instance) {
        instance = new CreateDiv(html)
      }
      return instance
    }
  })()
  const a = new ProxySingletonCreateDiv( 'sven1' )
  const b = new ProxySingletonCreateDiv( 'sven2' )
  alert ( a === b )

通过引入代理类的方式，我们同样完成了一个单例模式的编写，跟之前不同的是，现在我们把负责管理单例的逻辑移到了代理proxySingletonCreateDiv 中。这样一来，CreateDiv 就变成了一个普通的类，它跟 proxySingletonCreateDiv 组合起来可以达到单例模式的效果。

JavaScript 中的单例模式

惰性单例

惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点，这种技术在实际开发中非常有用，有用的程度可能超出了我们的想象，实际上在本章开头就使用过这种技术，instance 实例对象总是在我们调用Singleton.getInstance 的时候才被创建，而不是在页面加载好的时候就创建，代码如下：

  Singleton.getInstance = (function() {
    let instance = null
    return function( name ) {
      if ( !instance ) {
        instance = new Singleton( name )
      }
      return instance
    }
  })()

假设我们是 WebQQ的开发人员，当点击左边导航里 QQ头像时，会弹出一个登录浮窗，很明显这个浮窗在页面里总是唯一的，不可能出现同时存在两个登录窗口的情况。

const createLoginLayer = (function () {
    let div

    return function () {
      if (!div) {
        div = document.createElement('div')
        div.innerHTML = '我是登录浮窗'
        div.style.display = 'none'
        document.body.appendChild(div)
      }
      return div
    }
  })()
  document.getElementById('loginBtn').onclick = function () {
    const loginLayer = createLoginLayer()
    loginLayer.style.display = 'block'
  }

通用单例

这段代码仍然是违反单一职责原则的，创建对象和管理单例的逻辑都放在 createLoginLayer 对象内部。如果我们下次需要创建页面中唯一的 iframe ，或者 script 标签，用来跨域请求数据，就必须得如法炮制，把 createLoginLayer 函数几乎照抄一遍：

const createIframe = (function () {
    let iframe
    return function () {
      if (!iframe) {
        iframe = document.createElement('iframe')
        iframe.style.display = 'none'
        document.body.appendChild(iframe)
      }
      return iframe
    }
  })()

我们需要把不变的部分隔离出来，先不考虑创建一个 div 和创建一个 iframe 有多少差异，管理单例的逻辑其实是完全可以抽象出来的，这个逻辑始终是一样的：用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象：

let obj;
if ( !obj ){
  obj = xxx;
}

现在我们就把如何管理单例的逻辑从原来的代码中抽离出来，这些逻辑被封装在 getSingle函数内部，创建对象的方法 fn 被当成参数动态传入 getSingle 函数：

const getSingle = function (fn) {
    let result
    return function () {
      return result || ( result = fn.apply(this, arguments) )
    }
  }

接下来将用于创建登录浮窗的方法用参数 fn 的形式传入 getSingle ，我们不仅可以传入 createLoginLayer ，还能传入 createScript 、 createIframe 、 createXhr 等。

之后再让 getSingle 返回一个新的函数，并且用一个变量 result 来保存 fn 的计算结果。result 变量因为身在闭包中，它永远不会被销毁。在将来的请求中，如果 result 已经被赋值，那么它将返回这个值。代码如下：

const getSingle = function (fn) {
    let result
    return function () {
      return result || ( result = fn.apply(this, arguments) )
    }
  }

  const createLoginLayer = function () {
    const div = document.createElement('div')
    div.innerHTML = '我是登录浮窗'
    div.style.display = 'none'
    document.body.appendChild(div)
    return div
  }
  const createSingleLoginLayer = getSingle(createLoginLayer)
  document.getElementById('loginBtn').onclick = function () {
    const loginLayer = createSingleLoginLayer()
    loginLayer.style.display = 'block'
  }

下面我们再试试创建唯一的 iframe 用于动态加载第三方页面：

const createSingleIframe = getSingle( function(){
    const iframe = document.createElement ( 'iframe' )
    document.body.appendChild( iframe )
    return iframe
  })
  document.getElementById( 'loginBtn' ).onclick = function(){
    const loginLayer = createSingleIframe()
    loginLayer.src = 'http://baidu.com'
  }

在这个例子中，我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里，这两个方法可以独立变化而互不影响。