单例模式定义: 保证一个类仅有一个实例,并提供一个访问它的全局访问点
上代码:
标准单例模式
//方法1 //标准单例模式 var Singleton = function(name){ this.name = name } Singleton.prototype.getName = function(){ console.log(this.name); } Singleton.getInstance = (function(){ //注意这里的getInstance方法是静态方法 var instance = null //这里使用闭包,作用在于只有当调用到getInstance方法时才进行单例控制,这是一种惰性单例模式,相比标准单例中将instance变量放在Singleton构造函数中性能更好 return function(){ if(!instance){ instance = new Singleton(name) } return instance } })() var a = Singleton.getInstance('nitx') var b = Singleton.getInstance('sxm') console.log(a === b); //true
上述通过Singleton.getInstance来获取Singleton类的唯一对象,这种方法相对简单,但有个问题,增加了类的不透明性,Singleton类的使用者必须知道这是一个单例类,跟以往通过new XXX的方式来获取对象实例不同,这里需要使用Singleton.getInstance来获取对象。这种写法意义不大。
//方法二 //透明的单例模式,用户从这个类中创建对象时,可以像使用其他任何普通类一样,通过new创建类实例。下面单例类的作用是在页面中创建唯一的div节点。 var CreateDivWrap = (function(){ var instance = null; 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 c = new CreateDivWrap('nitx') var d = new CreateDivWrap('sxm') console.log(c === d); //true
上述代码中,还有一个缺点,为了把instance封装起来,使用了自执行匿名函数和闭包,并且让这个匿名函数返回真正的Singleton构造方法CreateDiv,这增加程序复杂度,CreateDiv方法负责两件事,一件是创建对象和执行初始化init方法,第二是保证只有一个对象,这种操作违背“单一职责原则”,假如将来要利用这个类在页面中创建多个类,也就是让这个类从单例类变成普通类,那就得改写CreateDivWrap构造函数,去掉控制唯一对象的那一段代码,麻烦!解决这个问题的方法是使用 代理实现单例模式
//方法三: //先创建普通类,作用是创建div 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) } //创建并引用代理类ProxySingletonCreateDiv,其作用是控制CreateDiv类创建唯一对象 var ProxySingletonCreateDiv = (function(){ var instance = null return function(html){ if(!instance){ instance = new CreateDiv(html) } return instance } })() var e = new ProxySingletonCreateDiv('nitx') var f = new ProxySingletonCreateDiv('sxm') console.log(e === f);
通过引入代理类的方式,同样完成一个单例模式的编写,但和之前方法一、二相比,把负责管理单例的逻辑移到了代理类ProxySingletonCreateDiv中,这样CreateDiv就是一个普通类,CreateDiv类和ProxySingletonCreateDiv类组合起来就是一个单例类。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button type="button" id="btn1">登录</button> </body> <script> //添加dom普通写法,非单例,可无限添加dom,如需保持只有一个dom时,在点击事件中加入删除先前dom的操作 var createLoginLayer = function(){ var div = document.createElement('div') div.innerHTML = '我是登录弹窗' div.style.display = 'none' document.body.appendChild(div) return div } document.getElementById('btn1').onclick = function(){ var loginLayer = createLoginLayer() loginLayer.style.display = 'block' } //添加dom单例写法,只能添加一个dom节点,这种写法缺点是把单例逻辑耦合在具体业务代码中,难以利用 var createLoginLayer = (function(){ var singleResult = null; return function(){ if(!singleResult){ div = document.createElement('div') div.innerHTML = '我是登录弹窗' div.style.display = 'none' document.body.appendChild(div) } return singleResult = div } })() document.getElementById('btn1').onclick = function(){ var loginLayer = createLoginLayer() loginLayer.style.display = 'block' } //单独抽出的单例逻辑 // 惰性单例 var getSingle = function(fn){ var result = null; //创建一个变量来标记是否创建过对象,如果是则下次直接返回已创建过的对象 return function(){ if(!result){ result = fn.apply(this, arguments) //执行createLoginLayer函数结果返回div } return result } } var createLoginLayer = function(){ div = document.createElement('div') div.innerHTML = '我是登录弹窗' div.style.display = 'none' document.body.appendChild(div) return div } var createSingleLoginLayer = getSingle(createLoginLayer) document.getElementById('btn1').onclick = function(){ var loginDialog = createSingleLoginLayer() loginDialog.style.display = 'block' } //第三个例子中,把创建实例对象的职责和管理单例的职责分别放置在两个方法中,这两个方法可以独立变化而互不影响,当组合在一起时,就完成了创建唯一实例对象的功能 </script> </html>
单例模式使用要点,应结合闭包、高阶函数、惰性单例、创建实例对象与管理单例职责的方法拆分。
作者:一期一会
链接:https://blog.csdn.net/qq_34832846/article/details/85987671
来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。