参考(JAVASCRIPT设计模式 张容铭)
1.需求:验证表单,仅验证用户名,邮箱,密码
大部分人首先想到的就是下面的方法:
function checkName(){console.log("I am name");}
function checkMail(){}
function checkPass(){}
缺点:在团队开发中,容易导致变量覆盖
因为上述相当于创建了三个全局变量,类似于下面的写法:
var checkName = function(){console.log("I am name");}
var checkMail = function(){}
var checkPass = function(){}
2.把三个方法要组合到一个对象中
//以下两种方法写法一致
//1
var CheckForm = function(){}
CheckForm.checkName = function(){console.log("I am name");}
CheckForm.checkMail = function(){}
CheckForm.checkPass = function(){}
//2
var CheckForm = {
checkName :function(){console.log("I am name");},
checkMail : function(){},
checkPass : function(){}
}
缺点:对象只有一份,不能供多个人调用
为什么只有一份?
相当于一个对象自己的属性,和属性定义的方式一样。
调用方式?
两种调用方式都需要直接采用对象名进行调用。
3.让同一个对象能复用
最简单的方法是,用return方法
//1.
var CheckForm = function(){
return {
checkName : function(){console.log("I am name");},
checkMail : function(){},
checkPass : function(){}
}
}
var s = new CheckForm();
s.checkName();//I am name
//2.
var CheckForm = function(){
this.checkName = function(){console.log("I am name");}
this.checkMail = function(){}
this.checkPass = function(){}
}
var s = new CheckForm();
s.checkName();//I am name
缺点:每new一个对象,就会有三个新的方法占用内存空间,导致了资源的浪费。
4.使用prototype来定义方法
var CheckForm = function(){}
CheckForm.prototype.checkName = function(){console.log("I am name");}
CheckForm.prototype.checkMail = function(){console.log("I am mail");}
CheckForm.prototype.checkPass = function(){console.log("I am pass");}
var a = new CheckForm();
a.checkName();// I am name
a.checkMail();//I am mail
a.checkPass();//I am pass
拓展:
1.链式调用
var CheckForm = function(){}
CheckForm.prototype.checkName = function(){console.log("I am name");
return this;}
CheckForm.prototype.checkMail = function(){console.log("I am mail");
return this;}
CheckForm.prototype.checkPass = function(){console.log("I am pass");
return this;}
var a = new CheckForm();
a.checkName()// I am name
.checkMail()//I am mail
.checkPass();//I am pass
2.链式添加函数(把添加的方法封装成函数)
函数式和类式感觉稍微难理解,难点在于写得时候this[name],和this.prototype[name]的用法,之前这个用法可能不太常用。
//函数式链式添加
Function.prototype.addMethod = function(name,fn){
this[name] = fn;
return this;
}
var methods = function(){}
methods.addMethod('checkName',function(){
console.log('I am name');
return this;
}).addMethod('checkMail',function(){
console.log('I am mail');
return this;
});
//函数式链式调用
methods.checkName().checkMail();
//类式链式添加
Function.prototype.addMethod = function(name,fn){
this.prototype[name] = fn;
return this;
}
var Methods = function(){}
Methods.addMethod('checkName',function(){
console.log('I am name');
return this;
}).addMethod('checkMail',function(){
console.log('I am mail');
return this;
});
//类式链式调用
var methods = new Methods();
methods.checkName().checkMail();