JS设计模式1-单例模式

时间：2022-07-29 23:14:25

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存，window对象。单例模式在js开发中单例模式的用途非常广泛，比如页面中有一个登录浮窗，无论单击多少次登录窗口，这个窗口只会创建一次，那么这个窗口就适合用单例模式来创建。

1、单例模式实例：

要实现单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次取该类实例的时候，之间返回之前创建的对象。

 var Sign=function(name){
     this.name=name;
     this.instance=null;
 }

 Sign.prototype.getName=function(){
     return this.name;
 }

 Sign.getInstance=function(name){
     if(!this.instance){
         this.instance=new Sign(name);
     }
     return this.instance;
 }

 var obj1=Sign.getInstance("gao");
 var obj2=Sign.getInstance("xiang");
 alert(obj1===obj2);   //true

2.用代理实现单例模式。

我们可以把负责管理单例的逻辑转移到代理类Signleton中。

 var createDiv=function(html){
     this.html=html;
     this.init();
 }

 createDiv.prototype.init=function(){
     var div=document.createElement("div");
     document.innerHTML=this.html;
     document.body.appendChild(div);
 }

 var Signleton=(function(){
     var instance;
     return function(html){
         if(!instance){
             instance=new createDiv(html);
         }
         return instance;
     }
 })();

 var obj1=new Signleton("h1");
 var obj2=new Signleton("h2");
 alert(obj1===obj2)  //true

这样写的好处显而易见，复用性强。

3.惰性单例

什么是惰性单例，就是指在需要的时候在实现单例，比如在点击登录按钮的时候再创建登录浮窗。而不是页面已加载就已经创建好登录浮窗，因为有些用户并不需要登录，而只是看看天气，看看新闻。

 var createLogin=(function(){
     var div;
     return function(){
         if(!div){
             div=document.createElement('div');
             div.innerHTML='登录窗口';
             div.style.display='none';
             document.body.appendChild(div);
         }
         return div;
     }
 })();

 document.getElementById('loginBtn').addEventListener('click',function(){
     var loginWindow=createLogin();
     loginWindow.style.display='block';
 },false);

4.通用惰性单例。

上一段代码违反了单一职责原则，如果有一天我们并不是createDiv，而是createFrame，createScript时就必须改动源代码了。我们需要把不变的部分隔离出来。实现一个通用的函数。

这个逻辑始终是一样的。

 var obj;
 if(!obj){
   obj=xxx;
 }

现在封装一个getSignle函数。

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

创建对象的方法fn被当场参数传入getSignle函数中，之后让getSignle返回一个函数，resule标志对象是否被创建，如果没创建，result保存fn的执行结果，由于result存放在闭包环境中，所以不会被销毁，在下次请求时，直接返回已经存在的result。

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

 var divLayout=getSignle(createLoginDiv);

 document.getElementById("loginBtn").addEventListener('click',function(){
     var loginWindow=divLayout();
     loginWindow.style.display='block';
 },false);

相关文章