JavaScript設計模式-7.單例模式
阿新 • • 發佈：2017-07-16
閉包 cname XML 數據庫 模式 inf 設計模式 分支 col
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>
JavaScript設計模式-7.單例模式