《JavaScript设计模式与开发实践》学习笔记——单例模式

单例模式：保证每=一个类仅有一个实例，并提供一个访问它的全局访问点

 

//透明的单例模式

var CreateDiv=(function(){
    var instance;

    var CreateDiv=function(html){
        if(intstance){
            return instance;
        }

        this.html=html;
        this.init();

        return instance=this;
    }

    CreateDiv.prototype.init=function(html){
        var oDiv=document.createElement('div');
        div.innerHTML=html;
        document.body.appendChild(div);
    }

    return CreateDiv;
})

 

 

//用代理实现单例模式

把负责实现单例的逻辑放到一个ProxyCreateDiv的类中，CreateDiv就是一个简单的类，它跟ProxyCreateDiv结合起来达到单例模式的效果

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

CreateDiv.prototype.init=function(){
    var oDiv=document.createElement('div');
    div.innerHTML=this.html;
    document.body.appendChild(oDiv);
}

var ProxyCreateDiv=(function(){
    var instance=null;
    return function(){
        if(!intstance){
            instance=new CreateDiv(html);
        }
        return instance;
    }
})();

var divA=ProxyCreateDiv("sven1");
var divB=ProxyCreateDiv("sven2");

divA===divB;//true

//惰性单例实例：

//例1：页面加载后就创建窗口，在点击按钮后就弹出窗口
//缺点：1、如果用户没有点击登录，则就是浪费
//2、且每次点击都会创建一个按钮

//页面加载的创建窗口
var createLoginLayer=(function(){
    var div=document.createElement("div");
    div.innerHTML="登录窗口"；
    dvi.style.display="none";
    document.body.appendChild(div);
})();

document.getElementById("LoginBtn").onclick=function(){
    div.style.display="block";
}



//例2：解决了第一个缺点，第二个缺点仍然存在
//点击页面的按钮才创建窗口
var createLoginLayer=function(){
    var div=document.createElement("div");
    div.innerHTML="登录窗口"；
    dvi.style.display="none";
    document.body.appendChild(div);
    retur div;
});

document.getElementById("LoginBtn").onclick=function(){
    var loginLayer=createLoginLayer();
    div.style.display="block";
}


//例3：比较完善的方案
//点击页面的按钮才创建窗口，并缓存第一次的创建
var createLoginLayer=function(){

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

document.getElementById("LoginBtn").onclick=function(){
    var loginLayer=createLoginLayer();
    div.style.display="block";
}