单例设计模式

单例设计模式的定义

保证一个类仅有一个实例，并提供一个访问它的全局访问点
单例模式是一种常用的设计模式，有一些对象我们往往只需要一个，例如最典型的window对象。在开发中，单例模式的用途非常广泛。试想一下，当我们单击一个登录按钮的时候，页面中会出现一个登录浮窗，而这个浮窗是唯一的，无论单击多少次登录按钮，这个浮窗只会创建一次。这个登录浮窗很适合用单例模式来创建。

实现一个单例模式

要实现一个单例模式并不复杂，只需用一个变量来标志当前是否已经创建过对象，如果是，则下一次直接获取该类的实例。

  var Single = function(name){
     this.name = name;
  }
    Single.prototype.getName = function(){
      console.log(this.name)   
}
   Single.getInstance = function(name){
         if(!this.instance){
            this.instance = new Single(name)
         }
           return this.instance
}
     var a = Single.getInstance('wenYa');
     var b = Single.getInstance('mouMou');
  console.log(a===b) //true

也可以通过闭包实现

   var Single = function(name){
     this.name = name;
  }
    Single.prototype.getName = function(){
      console.log(this.name)   
}
   Single.getInstance = ~function(){
       let instance = null;
        return function(name){
         if(!this.instance){
            this.instance = new Single(name)
         }
           return instance
     }
 }();
     var a = Single.getInstance('wenYa');
     var b = Single.getInstance('mouMou');
  console.log(a===b) //true

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

透明的单例模式

实现在页面中创建唯一的div节点

    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 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 ProxySingleCreateDiv =(function(){
      var instance;
     return function(html){
         if(instance){
          instance = new CreateDiv(html);
        }
       return instance;
      }
   })()
  var a = new ProxySingleCreateDiv('xx');

惰性单例

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

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

  var createLoginLayer = function(){ 
    var div = document.createElement( 'div' ); 
    div.innerHTML = '我是登录浮窗'; 
    div.style.display = 'none'; 
    document.body.appendChild( div ); 
    return div; 
   }; 

  var createSingleLoginLayer = getSingle( createLoginLayer ); 

  document.getElementById( 'loginBtn' ).onclick = function(){ 
    var loginLayer = createSingleLoginLayer(); 
    loginLayer.style.display = 'block'; 
 };