javaScript设计模式 -- 灵活的javaScript语言

Posted 2020-10-28 业精于勤荒于嬉

　　因为好长时间的懒惰和懈怠，好久没有更新文章了，从现在开始我会按时更新一些自己总结的一些知识，和研究的东西，希望能让大家从我这里学到一点点的知识。

　　本文参考了张荣铭的javascript设计模式一书，算是自己对看了文章的总结吧，如果你想学习设计模式，可以去购买一本，学习一下，写的非常好。

javaScript

 在我们的开发中，如果给了自己一些验证姓名、邮箱、密码的任务，按照下面的写法看

 1 //这样写就会污染到全局变量 都会挂载到window下
 2 function checkName() {
 3     //验证姓名
 4 }
 5 function checkEmail() {
 6     //验证邮箱
 7 }
 8 function checkPassword() {
 9     //验证密码
10 }

声明的方式，还有另外一种

1 var checkName = function () {
2     //验证姓名
3 };
4 var checkEmail = function () {
5     //验证邮箱
6 };
7 var checkPassword = function () {
8     //验证密码
9 }

上面的两种声明方式都会产生好多全局变量，会影响其他人的使用，命名，所以我们可以把这些放到一个对象下面

 1 var checkObject = {
 2     checkName : function () {
 3         //验证姓名
 4     },
 5     checkEmail : function () {
 6         //验证邮箱
 7     },
 8     checkPassword : function () {
 9         //验证密码
10     }
11 }

//还有另外一种添加方式
1 var checkObject = function(){}
2 checkObject.checkName = function(){}
3 checkObject.checkEmail = function(){}
4 checkObject.checkPassword = function(){}

 

虽然这样可以满足自己的需求，但是当别人想用你写的对象的方法时候就麻烦了，因为这个对象不能复制一份

要实现复制一份看下面的写法

 1 var checkObject = function() {
 2     return {
 3         checkName : function(){
 4             //验证姓名
 5         },
 6         checkEmail : function () {
 7             //验证邮箱
 8         },
 9         checkPassword : function () {
10             //验证密码
11         }
12     }
13 };
14 ?
15 var a = checkObject();
16 console.log(a);
17 a.checkEmail();

 

上面的方法虽然可以实现我们的功能，但是创建出来的对象a和对象checkObject没有任何关系

我们对其进行改造一下

 1 var CheckObject = function () {
 2     this.checkName = function () {
 3         //验证姓名
 4     };
 5     this.checkEmail = function () {
 6         //验证邮箱
 7     };
 8     this.checkPassword = function () {
 9         //验证密码
10     }
11 };
12 ?
13 var a = new CheckObject();
14 console.log(a);

上面这种方式已经实现了复制,但是我们每一次通过new关键字创建新对象的时候，新创建的对象都会经过this再执行一次，所以这些

新创建的对象都会有属于自己的一套方法，然后有时候这么做造成的性能消耗是非常奢侈的，我们需要处理一下，?

将公有的方法放到构造函数的原型上

 1 var CheckObject = function () {
 2 };
 3 ?
 4 CheckObject.prototype.checkName = function () {
 5     //验证姓名
 6 };
 7 CheckObject.prototype.checkEmail = function () {
 8     //验证邮箱
 9 };
10 CheckObject.prototype.checkPassword = function () {
11     //验证密码
12 };

 

这样创建对象实例的时候，找方法的时候如果自己本身没有的话就会上原型上面一层一层的去找，就可以拥有方法了

 

上面的方法要把peototype写好多遍，还可以写成另外的一种形式

 1 CheckObject.prototype = {
 2     checkName : function(){
 3         //验证姓名
 4     },
 5     checkEmail : function () {
 6         //验证邮箱
 7     },
 8     checkPassword : function () {
 9         //验证密码
10     }
11 };
12 //这两种方法不能混着用，要不然会覆盖
13 //使用方法
14 ?
15 var a = new CheckObject();
16 console.log(a);
17 a.checkEmail();

 

 

经常使用jQ都知道链式操作，其实实现方法很简单就是将当前的对象作为函数的返回值return出去就行了，

链式操作

 1 var CheckObject = function () {
 2     this.checkName = function () {
 3         //验证姓名
 4         return this;
 5     };
 6     this.checkEmail = function () {
 7         //验证邮箱
 8         return this;
 9     };
10     this.checkPassword = function () {
11         //验证密码
12         return this;
13     }
14 };
15 var obj = new CheckObject();
16 obj.checkEmail().checkName().checkPassword();

函数的祖先

1 Function.prototype.checkEmail = function () {
2     console.log(‘验证了邮箱‘);
3 };
4 //我们在他的原型上写了一个这样的方法之后，凡是用函数构造出来的对象都有了这个方法
5 var a = function () {
6 ?
7 };
8 a.checkEmail();

 

如果习惯类的形式还可以这样写

1 var f = new Function(){};
2 f.checkEmail();

 

但是这样做 在这里是不允许的 因为污染了全局变量Function

 

可以用这种方法就可以避免了

 1 Function.prototype.addMethod = function (name,fn) {
 2     this[name] = fn;
 3 };
 4 ?
 5 var methods = function () {
 6 ?
 7 };
 8 methods.addMethod(‘checkName‘,function () {
 9     //验证姓名
10     console.log(‘姓名‘);
11 });
12 methods.addMethod(‘checkEmail‘,function () {
13     //验证邮箱
14     console.log(‘邮箱‘);
15 });
16 ?
17 methods.checkName();
18 methods.checkEmail();

 

当然上面你嫌写了好多个methods对象，你可以用链式方法

 1 Function.prototype.addMethod = function (name,fn) {
 2     this[name] = fn;
 3     return this;  //在这里返回对象就可以了
 4 };
 5 ?
 6 var methods = function () {
 7 ?
 8 };
 9 methods.addMethod(‘checkName‘,function () {
10     //验证姓名
11     console.log(‘姓名‘);
12 }).addMethod(‘checkEmail‘,function () {
13     //验证邮箱
14     console.log(‘邮箱‘);
15 });
16 ?
17 methods.checkName();
18 methods.checkEmail();

 

对于习惯类的人来说也可以这样写

当然习惯用类的人来说 也可以写成类的形式

?

 1 Function.prototype.addMethod = function (name,fn) {
 2    this.prototype[name] = fn;
 3    return this;
 4 };
 5 ?
 6 var Methods = function(){};
 7 ?
 8 Methods.addMethod(‘checkName‘,function () {
 9    //验证姓名
10    console.log(‘姓名‘);
11 }).addMethod(‘checkEmail‘,function () {
12    //验证邮箱
13    console.log(‘邮箱‘);
14 });
15 ?
16 var m = new Methods();
17 ?
18 m.checkName();
19 m.checkEmail();

 

javaScript是一种灵活的语言，使用javascript可以编写出更多的优雅的代码艺术，我会在接下来的一段时间内将一些常用的设计模式的写法，分享给大家，如果你能学到一些知识，我会非常开心的，文章如有不足之处，还望可以提醒。