首页 > 代码库 > JavaScript设计模式-6.封装
JavaScript设计模式-6.封装
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,"xxxx@qq.com") 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.封装
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。