JavaScript设计模式-7.单例模式 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>javascript高级语法7-单例模式</title>
  6     </head>
  7     <body>
  8         <script>
  9             /*单例模式在js中使用非常频繁：
 10              * 1.普通单体
 11              * 2.具有局部变量的强大单体
 12              * 3.惰性单体
 13              * 4.分支单体
 14              */
 15             function demo1(){
 16                 //1.普通单体
 17             (function(){
 18                 //通过确保单例对象只存在一个实例，就可以确信自己在所有的代码中使用的是全局资源
 19                 //例如用户登录后的信息可以用一个单体存储
 20                 var UserInfo = {
 21                     name:"zhangdan",
 22                     code:"0202022",
 23                     deptName:"PD",
 24                     deptCode:"PD001",
 25                     getName:function(){
 26                         return "十里河"
 27                     }
 28                 }
 29                 alert(UserInfo.getName());
 30                 //这就是一个最简单的单体，他用来划分命名空间，并且将一群相关的属性方法组织到一起。 可以用.来访问。
 31                 var comm = {};  //把两个单体组织到comm的命名空间下。
 32                 comm.UserInfo = {
 33                     name:"zhangdan",
 34                     code:"0202022",
 35                 }
 36                 comm.funcInfo = {
 37                     funcName:"",
 38                     funcCode:"",
 39                 }
 40                 //在大型项目下，存在着你写的代码还有你引用的外界的JS类库，还有其他同事写的代码和类库。
 41                 //我们通过单体模式就可以很好的区分，这点只能慢慢体会了。
 42             })()
 43             }
 44             
 45             function demo2(){
 46             //2.具有局部变量的强大单体
 47             (function(){
 48                 //模拟一个ajax操作
 49                 function Ajax(){}
 50                 Ajax.request = function(url,fn){
 51                     if(true){
 52                         fn("javascript","extjs");
 53                     }
 54                 }
 55                 //通过闭包的原理解决在上例中的问题
 56                 
 57                 var UserInfo = (function(){
 58                     //利用闭包使单体拥有自己的私有局部变量
 59                     var name = '';
 60                     var code = '';
 61                     //利用ajax访问数据库来取得数据
 62                     Ajax.request("www.baidu.com",function(n,c){
 63                         name = n;
 64                         code = c;
 65                     })
 66                     return {
 67                         name:name,
 68                         code:code,
 69                     }
 70                 })();                
 71                 alert(UserInfo.name+"  "+UserInfo.code);
 72             })()
 73             }
 74             
 75             function demo3(){
 76             //3.惰性单体
 77             (function(){
 78                 //模拟一个ajax操作
 79                 function Ajax(){}
 80                 Ajax.request = function(url,fn){
 81                     if(true){
 82                         fn("demo3","extjs");
 83                     }
 84                 }
 85                 //通过闭包的原理解决在上例中的问题
 86                 
 87                 var UserInfo = (function(){
 88                     var userInfo = ""  //私有变量
 89                     
 90                     function init(){
 91                         var name = '';
 92                         var code = '';
 93                         //利用ajax访问数据库来取得数据
 94                         Ajax.request("www.baidu.com",function(n,c){
 95                             name = n;
 96                             code = c;
 97                         })
 98                         return {
 99                             name:name,
100                             code:code,
101                         }
102                     }
103                     return {
104                         getInstance:function(){
105                             if(userInfo){
106                                 return userInfo;
107                             }else{
108                                 userInfo = init();
109                                 return userInfo;
110                             }
111                         }
112                     }
113                 })();                
114                 alert(UserInfo.getInstance().name+"  "+UserInfo.getInstance().code);
115             })()
116             }
117             
118             function demo4(){
119                 //4.分支单体
120                 /*
121                  * 用处：在做ajax的时候根据不同的浏览器获得不同的xhr(XMLHttpRequest)
122                  *     在不同分辨率的情况下初始化不一样的界面
123                  */
124                 (function(){
125                     //得到机器分辨率
126                     var screenWidth = window.screen.width;
127                     var screenHeight = window.screen.height;
128                     
129                     var portalInfo = (function(){
130                         var $12801024 = {info:"1,2,3,5"}
131                         var $1024768 = {info:"4,2,1,2"}
132                         if(screenWidth ==1920){
133                             return $12801024;
134                         }else if(screenWidth ==1024){
135                             return $1024768
136                         }
137                     })();
138                     alert(portalInfo.info);
139                 })()
140             /*
141              * 这些并非js的高深技术，是它的使用技巧。
142              */
143             }
144         </script>
145     </body>
146 </html>

 

posted @ 2017-07-16 20:58  橙云生  阅读(199)  评论(0)    收藏  举报