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>
时间： 2024-10-07 20:23:04