单例模式

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

用代理实现基于类的单例模式

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

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

// 引入代理
const ProxySingletonCreateDiv=(function(){
  let instance
  return function(html){
    if(!instance){
      instance=new CreateDiv(html)
    }
    return instance
  }
})()

let a=new ProxySingletonCreateDiv('1')
let b=new ProxySingletonCreateDiv('2')
console.log(a===b) // true

javascript中的单例模式

单例模式的核心是确保只有一个实例，并提供全局访问。js全局变量天然具有这个特性。但是全局变量很容易造成命名空间污染，也容易被覆盖。可以用下面这些方法减少全局变量的影响。

使用对象属性作为命名空间

动态创建命名空间

const MyApp={}
MyApp.namespace=function(name){
  let parts=name.split('.')
  let current=MyApp
  for(let i in parts){
    if(!current[parts[i]]){
      current[parts[i]]={}
    }
    current=current[parts[i]]
  }
}

MyApp.namespace( 'event' )
MyApp.namespace( 'dom.style' )

使用闭包封装私有变量

var user = (function(){
    var __name = 'sven',
        __age = 29;

    return {
        getUserInfo: function(){
            return __name + '-' + __age;
        }
    }

})();

惰性单例

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

const getSingleA=getSingle(function(){
  return {name:'foo'}
})
let objA1=getSingleA() // {name:'foo'}
let objA2=getSingleA() // {name:'foo'}
objA1===objA2 // true

const getSingleB=getSingle(function(){
  return {name:'bar'}
})
let objA3=getSingleA() // {name:'bar'}
let objA4=getSingleA() // {name:'bar'}
objA3===objA4 // true

这种单例模式的用途远不止创建对象，比如我们通常渲染完页面中的一个列表之后，接下来要给这个列表绑定click事件，如果是通过ajax动态往列表里追加数据，在使用事件代理的前提下，click事件实际上只需要在第一次渲染列表的时候被绑定一次，但是我们不想去判断当前是否是第一次渲染列表，此时就可以用单例模式。

const bindEvent=getSingle(function(){
  console.log('绑定onclick事件')
  document.getElementById('div1').onclick=function(){
    console.log('click')
  }
  return true
})

const render=function(){
  console.log('开始渲染列表')
  bindEvent()
}

render() // 开始渲染列表 绑定onclick事件
render() // 开始渲染列表
render() // 开始渲染列表

可以看到，虽然调用了render函数三次，onclick事件只会被绑定一次。

单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。