单例模式 介绍和举例

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

 

实现单例模式：

    var Singleton = function( name ) {
      this.name = name
    }

    Singleton.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
    }

    var a = Singleton.getInstance('one')
    var b = Singleton.getInstance('two')

    console.log(a === b)

用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一个获取该类的实例时，返回之前创建的对象。我们通过Singleton.getInstance来获取Singleton类唯一对象。这种方式相对简单，但是增加了这个类的“不透明性”。

 

透明的单例模式：

我们现在实现一个“透明”单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。

    var CreateDiv = (function() {
      var instance

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

      CreateDiv.prototype.init = function() {
        var div = document.createElement('div')
        div.innerHTML = this.html
        document.body.appendChild(div)
      }
      return CreateDiv
    })()
    
    var a = Singleton.getInstance('one')
    var b = Singleton.getInstance('two')

    console.log(a === b)

虽然完成了透明单例类编写，但是使用了匿名函数和闭包，增加了程序复杂度，看起来也不舒服。

 

用代理实现单例模式：

    var CreateDiv = function(html) {
      this.html = html
      this.init()
    }

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

    var ProxySingletenCreateDiv = (function() {
      var instance
      return function(html) {
        if (!instance) {
          instance = new CreateDiv(html)
        }
        return instance
      }
    })()

    var a = new ProxySingletenCreateDiv('one')
    var b = new ProxySingletenCreateDiv('two')

    console.log(a === b)

通过引入代理类完成一个单例模式的编写，把负责管理单例的逻辑放到代理类ProxySingletenCreateDiv中。这样可以做到和普通类分离。

 

惰性单例：

惰性单例是指在需要的时候才创建对象实例。

此时我们还可以将单例逻辑从原代码中剥离出来，将这些逻辑封装在getSingle函数内部，创建对象的方法被单做参数传入getSingle函数：

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

用一个变量result来保存fn的计算结果，result在闭包中永远不会被销毁。在将来的请求中，如果result已被赋值，则直接返回这个值。

下面是一个创建唯一iframe用于动态加载第三方页面：

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

    var createSingleIframe = getSingle(function() {
      var iframe = document.createElement('iframe')
      document.body.appendChild(iframe)
      return iframe
    })

    document.getElementById('loginBtn').onclick = function() {
      var loginLayer = createSingleIframe()
      loginLayer.src = 'http://www.baidu.com'
    }

 

JavaScript中的单例模式：

单例模式的核心是确保只有一个实例，并提供全局访问。

全局变量不是单例模式，但是在js开发中，我们会把全局变量当作单例来用。

为了尽量减少全局变量污染可以使用以下两种方法进行优化：

• 使用命名空间

    var namespace1 = {
      a: function() {
        alert(1)
      },
      b: function() {
        alert(2)
      }
    }

• 使用闭包封装私有变量

    var user = (function() {
      var _name = 'aaa'
      var _age = 12

      return {
        getUserInfo: function() {
          return _name + '-' + _age
        }
      }