首页 > 代码库 > JS设计模式1-单例模式
JS设计模式1-单例模式
单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存，window对象。单例模式在js开发中单例模式的用途非常广泛，比如页面中有一个登录浮窗，无论单击多少次登录窗口，这个窗口只会创建一次，那么这个窗口就适合用单例模式来创建。
1、单例模式实例：
要实现单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次取该类实例的时候，之间返回之前创建的对象。
1 var Sign=function(name){ 2 this.name=name; 3 this.instance=null; 4 } 5 6 Sign.prototype.getName=function(){ 7 return this.name; 8 } 9 10 Sign.getInstance=function(name){11 if(!this.instance){12 this.instance=new Sign(name);13 }14 return this.instance;15 }16 17 var obj1=Sign.getInstance("gao");18 var obj2=Sign.getInstance("xiang");19 alert(obj1===obj2); //true
2.用代理实现单例模式。
我们可以把负责管理单例的逻辑转移到代理类Signleton中。
1 var createDiv=function(html){ 2 this.html=html; 3 this.init(); 4 } 5 6 createDiv.prototype.init=function(){ 7 var div=document.createElement("div"); 8 document.innerHTML=this.html; 9 document.body.appendChild(div);10 }11 12 var Signleton=(function(){13 var instance;14 return function(html){15 if(!instance){16 instance=new createDiv(html);17 }18 return instance;19 }20 })();21 22 var obj1=new Signleton("h1");23 var obj2=new Signleton("h2");24 alert(obj1===obj2) //true
这样写的好处显而易见，复用性强。
3.惰性单例
什么是惰性单例，就是指在需要的时候在实现单例，比如在点击登录按钮的时候再创建登录浮窗。而不是页面已加载就已经创建好登录浮窗，因为有些用户并不需要登录，而只是看看天气，看看新闻。
1 var createLogin=(function(){ 2 var div; 3 return function(){ 4 if(!div){ 5 div=document.createElement(‘div‘); 6 div.innerHTML=‘登录窗口‘; 7 div.style.display=‘none‘; 8 document.body.appendChild(div); 9 }10 return div;11 }12 })();13 14 document.getElementById(‘loginBtn‘).addEventListener(‘click‘,function(){15 var loginWindow=createLogin();16 loginWindow.style.display=‘block‘;17 },false);
4.通用惰性单例。
上一段代码违反了单一职责原则，如果有一天我们并不是createDiv，而是createFrame，createScript时就必须改动源代码了。我们需要把不变的部分隔离出来。实现一个通用的函数。
这个逻辑始终是一样的。
1 var obj;2 if(!obj){3 obj=xxx; 4 }
现在封装一个getSignle函数。
var getSignle=function(fn){ var result; return function(){ return result||(result=fn.apply(this,arguments)) }};
创建对象的方法fn被当场参数传入getSignle函数中，之后让getSignle返回一个函数，resule标志对象是否被创建，如果没创建，result保存fn的执行结果，由于result存放在闭包环境中，所以不会被销毁，在下次请求时，直接返回已经存在的result。
1 var createLoginDiv=function(){ 2 var div=document.createElement("div"); 3 div.innerHTML="我是登录窗口"; 4 div.style.display=‘none‘; 5 document.body.appendChild(div); 6 return div; 7 } 8 9 var divLayout=getSignle(createLoginDiv);10 11 document.getElementById("loginBtn").addEventListener(‘click‘,function(){12 var loginWindow=divLayout();13 loginWindow.style.display=‘block‘;14 },false);
JS设计模式1-单例模式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。