单例模式

简单的单例模式

通过一个getInstance方法获取对象，首先判断一个对象是否存在，如果存在则就将改对象返回，如果不存在就先实例化对象（创建对象），然后再返回

将实例存储在对象中

let Singleton = function(name){   this.name = name; }  // 将实例存储在对象中 Singleton.getInstance = function() {    // 如果本身到   if(this.instance === null){     this.instance = new Singleton();   }   return this.instance; }  let aIns = Singleton.getInstance("test"); let bIns = Singleton.getInstance("test");  console.log(aIns === bIns); 

使用闭包存储实例对象

// 将实例使用闭包的形式存储起来 Singleton.getInstanceNew = (function() {    let instance = null;   return function(){     if(instance === null){       instance = new Singleton();     }     return instance;   }  }())    let cIns = Singleton.getInstanceNew("test"); let dIns = Singleton.getInstanceNew("test");  console.log(cIns === dIns, aIns === dIns); 

我们看到以上两个方法，都是创建单例的简单方法，虽然实现了，但是如果别人不知道这个对象时单例的，还是可以使用new关键字创建。并且不再是单例了，所以很容易违背了我们单例的初心

透明的单例模式

我们依然通过new创建实例，但是创建的还是单例的，这样即使不需要我们特意去嘱咐这个对象是单例

var TransparentSingleton = (function() {    var instance = null;    var TransparentSingleton = function(){       if(instance){         return instance;       }       this.init();       return instance = this;    }      TransparentSingleton.prototype.init = function(){     console.log("Dom操作")   }    return TransparentSingleton; }())   let eIns = new TransparentSingleton(); let fIns = new TransparentSingleton();  console.log(eIns === fIns); 

这种方法虽然满足了我们的要求，但是这里存在一个问题，就是内部的TransparentSingleton的这对象，成为了一个私有对象，我们在外面无法访问到

代理版单例模式

var CreateDom = function(html){   this.html = html;   this.init(); }  CreateDom.prototype.init = function(){   console.log(this.html); }  var ProxyCreateDom = (function(){   let instance = null;   return function(html){     if(instance === null){       instance = new CreateDom(html);     }     return instance;   } }())  let hIns = new ProxyCreateDom("测试"); let gIns = new ProxyCreateDom("前端"); console.log(hIns === gIns, hIns.html, gIns.html)  

这里我们将对象提了出来了，通过ProxyCreateDom去创建一个关于CreateDom的单例，但是这个版本是比较有限的，我们可以看到这个代理单例并不是一个可复用的，代码很可能会翻倍。并且不管我们需不要单例，其实ProxyCreateDom里的instance就创建了。并且这个是属于传统面向对象语言的，在JavaScript这个没有类的语言中，这样创建意义并不大

惰性单例模式通用版本

let getSingleton = function(func) {    let result = null;   return function(){      return result || (result = func.apply(this, arguments));   } }  function createLoginLayer(){   var div = document.createElement("div");   div.innerHTML = "我是登录浮窗";   div.style.display = "none";   document.body.appendChild(div);   return div; }  /**  * 测试代码   */ let createSingleLoginLayer = getSingleton(createLoginLayer);  // 添加一个登陆浮窗 document.getElementById("loginTest").onclick = function(){   var loginLayer = createSingleLoginLayer();   loginLayer.style.display = "block" } // 创建一个iframe的单例 var createSingleIfame = getSingleton(function () {   var iframe = document.createElement("iframe");   document.body.appendChild(iframe);   return iframe; }) // 创建一个iframe，并将src属性设置为百度 document.getElementById("loginBtn").onclick = function(){   var loginLayer = createSingleIfame();   loginLayer.src = "http://baidu,com"; } // 将浮窗单例隐藏 document.getElementById("closeLoginBtn").onclick = function(){   var loginLayer = createSingleLoginLayer();   loginLayer.style.display = "none" } // 改变iframe的src属性 document.getElementById("changeUrlBtn").onclick = function(){   var loginLayer = createSingleIfame();   loginLayer.src = "http://127.0.0.1:5500/index.html"; }