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>