JavaScript設計模式-6.封裝
阿新 • • 發佈：2017-07-16
弊端 單元 類的定義 相同 return 驗證 demo 完成 問題：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript高級語法6-封裝</title> 6 </head> 7 <body> 8 <script> 9 /* 10 * 信息的隱藏是最終的目的，封裝只不過是隱藏的一種方法 11 */12 13 function demo1(){ 14 (function(){ 15 /*類的定義形式： 16 * 1.門戶大開類型 17 * 2.命名規範區別私有和公有方式 18 * 3.閉包 19 */ 20 21 //門戶大開型 22 function Person(age,name){ 23 this.name = name; 24 if(!this.checkAge(age)){ 25 throw new Error("年齡必須在0-150之間") 26 } 27 this.age = age; 28 } 29 // var p = new Person(-10,"jim"); 30 // alert(p.name+" "+p.age); //年齡-10，不符合常規 31 //解決上述問題 32 Person.prototype = { 33 checkAge:function(age){ 34 if(age>=0 && age<150){ 35 return true 36 }else{ 37 return false; 38 } 39 } 40 }; 41 Person.prototype["getName"] = function(){ 42 return this.name || "javascript.com" 43 } 44 // var p = new Person(-10,"jim"); 45 // alert(p.name+" "+p.age); 46 //讀取規則的驗證 47 var p2 = new Person(27); 48 alert(p2.getName()+" "+p2.age); 49 50 })() 51 } 52 53 //用命名規範來區別私有和公有變量 54 function demo2(){ 55 (function(){ 56 function Person(name,age,email){ 57 //定義私有變量 58 this._name; 59 this._age; 60 this.setName(name); 61 this.setAge(age); 62 this.emial = email; 63 64 } 65 Person.prototype = { 66 setName:function(name){ 67 this._name = name; 68 }, 69 setAge:function(age){ 70 71 if(age>=0 && age<150){ 72 this._age = age; 73 }else{ 74 throw new Error("年齡必須在0-150之間") 75 } 76 } 77 }; 78 79 var p = new Person("jim",1,"張丹"); 80 81 })(); 82 } 83 84 //閉包實現封裝 85 function demo3(){ 86 (function(){ 87 function Person(name,age,email,sex){ 88 this.email = email; 89 //get 90 this.getName = function(){ 91 return this.name; 92 } 93 this.getAge = function(){ 94 return this.age; 95 } 96 97 //set 98 this.setName = function(name){ 99 this.name = name; 100 } 101 this.setAge = function(age){ 102 if(age>=0 && age<150){ 103 this.age = age; 104 }else{ 105 throw new Error("年齡必須在0-150之間") 106 } 107 }; 108 109 var _sex="M"; //這也是私有變量的編寫方式 110 this.getSex = function(){ 111 return _sex; 112 } 113 this.setSex = function(sex){ 114 _sex = sex; 115 } 116 this.init = function(){ 117 this.setName(name); 118 this.setAge(age); 119 } 120 this.init(); 121 122 } 123 var p = new Person("jim",-1,"[email protected]") 124 })(); 125 } 126 127 //靜態化 128 (function(){ 129 /* 130 * 普通的屬性和函數是作用在對象上的 131 * 靜態函數是定義到類上的 132 */ 133 134 function Person(name,age){ 135 this.name = name; 136 this.showName = function(){ 137 alert(this.name); 138 } 139 } 140 //第一種靜態函數的寫法 141 Person.add = function(x,y){ 142 return x+y 143 } 144 //alert(Person.add(1,3)) 145 146 //第二種方式：用類中類的方式完成每一個對象全擁有相同的屬性和函數 147 var cat = (function(){ 148 //私有靜態屬性 149 var AGE = 10; 150 //私有函數 151 function add(x,y){ 152 return x+y 153 } 154 return function(){ 155 this.AGE = AGE; 156 this.add = function(x,y){ 157 return add(x,y); 158 } 159 this.setAge = function(age){ 160 AGE = age;//這個可以設置成功，但只對以後創建實例的初始化有效。 161 } 162 } 163 })() 164 165 alert(new cat().add(1,2)+" "+new cat().AGE); 166 new cat().setAge(20); //這個可以設置成功，但只對以後創建實例的初始化有效。 167 alert(new cat().AGE); 168 })(); 169 170 /* 171 * 1.保護內部數據的完整性是封裝一大用處 172 * 2.對象的重構變得很輕松，(可以動態化變更部分代碼) 173 * 3.弱化模塊之間的耦合。 174 * 弊端：私有的方法會變得很難進行單元測試，使用封裝就意味著與復雜的代碼打交道。 175 * 最大的問題：封裝在javascript是很難實現的。 176 */ 177 </script> 178 </body> 179 </html>
JavaScript設計模式-6.封裝