參考(JAVASCRIPT設(shè)計(jì)模式 張容銘)
1.需求:驗(yàn)證表單,僅驗(yàn)證用戶名,郵箱,密碼
大部分人首先想到的就是下面的方法:
function checkName(){console.log("I am name");}
function checkMail(){}
function checkPass(){}
缺點(diǎn):在團(tuán)隊(duì)開(kāi)發(fā)中,容易導(dǎo)致變量覆蓋
因?yàn)樯鲜鱿喈?dāng)于創(chuàng)建了三個(gè)全局變量,類似于下面的寫(xiě)法:
var checkName = function(){console.log("I am name");}
var checkMail = function(){}
var checkPass = function(){}
2.把三個(gè)方法要組合到一個(gè)對(duì)象中
//以下兩種方法寫(xiě)法一致
//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(){}
}
缺點(diǎn):對(duì)象只有一份,不能供多個(gè)人調(diào)用
為什么只有一份?
相當(dāng)于一個(gè)對(duì)象自己的屬性,和屬性定義的方式一樣。
調(diào)用方式?
兩種調(diào)用方式都需要直接采用對(duì)象名進(jìn)行調(diào)用。
3.讓同一個(gè)對(duì)象能復(fù)用
最簡(jiǎn)單的方法是,用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
缺點(diǎn):每new一個(gè)對(duì)象,就會(huì)有三個(gè)新的方法占用內(nèi)存空間,導(dǎo)致了資源的浪費(fèi)。
4.使用prototype來(lái)定義方法
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.鏈?zhǔn)秸{(diào)用
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.鏈?zhǔn)教砑雍瘮?shù)(把添加的方法封裝成函數(shù))
函數(shù)式和類式感覺(jué)稍微難理解,難點(diǎn)在于寫(xiě)得時(shí)候this[name],和this.prototype[name]的用法,之前這個(gè)用法可能不太常用。
//函數(shù)式鏈?zhǔn)教砑?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;
});
//函數(shù)式鏈?zhǔn)秸{(diào)用
methods.checkName().checkMail();
//類式鏈?zhǔn)教砑?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;
});
//類式鏈?zhǔn)秸{(diào)用
var methods = new Methods();
methods.checkName().checkMail();