JS设计模式1-单例模式

Posted 2020-08-11

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存，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);