JavaScript设计模式-6.封装

Posted 2020-09-28 橙云生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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,"[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.封装的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 片段
JavaScript 有用的代码片段和 trick
VSCode自定义代码片段14——Vue的axios网络请求封装
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计咖啡网页设计美食餐饮网页设计...(代码片段