javascript设计模式-（四）

单例模式

保证一个类仅有一个实例,并提供一个访问它的全局访问点。

用处

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏 览器中的 window 对象等。在 JavaScript开发中，单例模式的用途同样非常广泛。试想一下，当我 们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少 次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。

用代理实现单例模式

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

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

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

            return instance;
        }
    })();

    var a=new proxySingletonCreateDiv("seve1");
    var b=new proxySingletonCreateDiv("seve2");

    alert(a===b);

结果

惰性单例

惰性单例是指在需要的时候才创建对象实例。

以登录框为例

    // 惰性单例模式
    var createLoginLayer=(function(){
        var div;
        return function(){
            if(!div){
                div=document.createElement("div");
                div.innerHTML="我是登录浮窗";
                div.style.dispaly="none";
                document.getElementById("contentBox2").appendChild(div);
            }
            return div;
        }
    })();

    document.getElementById("loginBtn").onclick=function(){
        var loginLayer=createLoginLayer();
        loginLayer.style.dispaly="block";
    }

登录

缺点

这段代码仍然是违反单一职责原则的，创建对象和管理单例的逻辑都放在 createLoginLayer对象内部。

如果我们下次需要创建页面中唯一的 iframe ，或者 script 标签，用来跨域请求数据，就必须得如法炮制，把 createLoginLayer 函数几乎照抄一遍。

通用的惰性单例

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

    var createLoginLayer2=function(){
        var div=document.createElement("div");
        div.innerHTML="我是登录浮窗";
        div.style.dispaly="none";
        document.getElementById("contentBox3").appendChild(div);        
        return div;
    }

    var creatSingleLoginLayer=getSingle(createLoginLayer2);

    document.getElementById("loginBtn2").onclick=function(){
        var loginLayer=creatSingleLoginLayer();
        loginLayer.style.dispaly="block";
    }

登录

tips

在这个例子中，我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里，这两 个方法可以独立变化而互不影响，当它们连接在一起的时候，就完成了创建唯一实例对象的功能， 看起来是一件挺奇妙的事情。

转载于:https://www.cnblogs.com/hlere/p/6746335.html