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

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

 

//透明的单例模式

 1 var CreateDiv=(function(){
 2     var instance;
 3 
 4     var CreateDiv=function(html){
 5         if(intstance){
 6             return instance;
 7         }
 8 
 9         this.html=html;
10         this.init();
11 
12         return instance=this;
13     }
14 
15     CreateDiv.prototype.init=function(html){
16         var oDiv=document.createElement('div');
17         div.innerHTML=html;
18         document.body.appendChild(div);
19     }
20 
21     return CreateDiv;
22 })

 

 

//用代理实现单例模式

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

 1 var CreateDiv=function(html){
 2     this.html();
 3     this.init();
 4 };
 5 
 6 CreateDiv.prototype.init=function(){
 7     var oDiv=document.createElement('div');
 8     div.innerHTML=this.html;
 9     document.body.appendChild(oDiv);
10 }
11 
12 var ProxyCreateDiv=(function(){
13     var instance=null;
14     return function(){
15         if(!intstance){
16             instance=new CreateDiv(html);
17         }
18         return instance;
19     }
20 })();
21 
22 var divA=ProxyCreateDiv("sven1");
23 var divB=ProxyCreateDiv("sven2");
24 
25 divA===divB;//true

//惰性单例实例：

 1 //例1：页面加载后就创建窗口，在点击按钮后就弹出窗口
 2 //缺点：1、如果用户没有点击登录，则就是浪费
 3 //2、且每次点击都会创建一个按钮
 4 
 5 //页面加载的创建窗口
 6 var createLoginLayer=(function(){
 7     var div=document.createElement("div");
 8     div.innerHTML="登录窗口"；
 9     dvi.style.display="none";
10     document.body.appendChild(div);
11 })();
12 
13 document.getElementById("LoginBtn").onclick=function(){
14     div.style.display="block";
15 }
16 
17 
18 
19 //例2：解决了第一个缺点，第二个缺点仍然存在
20 //点击页面的按钮才创建窗口
21 var createLoginLayer=function(){
22     var div=document.createElement("div");
23     div.innerHTML="登录窗口"；
24     dvi.style.display="none";
25     document.body.appendChild(div);
26     retur div;
27 });
28 
29 document.getElementById("LoginBtn").onclick=function(){
30     var loginLayer=createLoginLayer();
31     div.style.display="block";
32 }
33 
34 
35 //例3：比较完善的方案
36 //点击页面的按钮才创建窗口，并缓存第一次的创建
37 var createLoginLayer=function(){
38 
39     var div=null;
40     return function(){
41         if(!div){
42             var div=document.createElement("div");
43             div.innerHTML="登录窗口"；
44             dvi.style.display="none";
45             document.body.appendChild(div);            
46         }
47         return div;
48     }
49 })();
50 
51 document.getElementById("LoginBtn").onclick=function(){
52     var loginLayer=createLoginLayer();
53     div.style.display="block";
54 }

 

posted @ 2016-06-14 16:27  秋虹连宇  阅读(145)  评论(0)  编辑  收藏  举报