JS設(shè)計(jì)模式一 基礎(chǔ)篇

參考(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();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容