JavaScript設(shè)計(jì)模式之職責(zé)鏈模式
概述
職責(zé)鏈模式是設(shè)計(jì)模式中行為型的一種設(shè)計(jì)模式;
定義:使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求,從而避免請(qǐng)求的發(fā)送者與接收者之間的耦合關(guān)系,將這些處理請(qǐng)求的對(duì)象形成一個(gè)鏈,并沿著這個(gè)鏈傳遞請(qǐng)求,直到有一個(gè)對(duì)象處理它為止;
白話(huà)解釋?zhuān)鹤髡咦鴺?biāo)武漢,1000+萬(wàn)人口的新一線(xiàn)城市 ;以早高峰公交為例,早上早高峰的時(shí)候通常都是公交車(chē)前門(mén)擁堵,以至于沒(méi)辦法刷卡乘車(chē);但是后門(mén)相對(duì)來(lái)說(shuō)會(huì)空一些,這時(shí)我們選擇后門(mén)上車(chē),但是我們后門(mén)上車(chē)就刷不了卡;逃單?不存在的,這可不是我們作為講文明、有素質(zhì)的新一代青年應(yīng)該做的;于是,我們往前面?zhèn)鬟f公交卡,請(qǐng)求前面的乘客幫忙傳遞至刷卡器處刷卡,但是我們是在后門(mén),刷卡器是在前門(mén),我們這傳遞的過(guò)程中會(huì)通過(guò)請(qǐng)求多位乘客幫忙傳遞公交卡,這個(gè)傳遞的過(guò)程就是一種職責(zé)鏈模式,每一位傳遞的乘客就是職責(zé)鏈中的節(jié)點(diǎn)對(duì)象;
代碼實(shí)現(xiàn)
假設(shè)有一個(gè)售賣(mài)手機(jī)的電商網(wǎng)站,經(jīng)過(guò)分別繳納500元定金和200元定價(jià)的兩輪預(yù)定后(訂單此時(shí)生成),現(xiàn)在已經(jīng)到了正式購(gòu)買(mǎi)的階段。公司針對(duì)支付過(guò)定金的客戶(hù)有一定的優(yōu)惠政策。在正式購(gòu)買(mǎi)時(shí),已支付過(guò)500元定金的客戶(hù)將獲得100元商城優(yōu)惠券,已支付過(guò)200元的客戶(hù)將獲得50元商城優(yōu)惠券;而之前沒(méi)有支付過(guò)定金的客戶(hù)將沒(méi)有任何優(yōu)惠券,并且在庫(kù)存有限的情況下,還不一定能買(mǎi)得到;
參數(shù)定義
1.orderType:表示訂單類(lèi)型(定金用戶(hù)或普通用戶(hù)),code的值為1的時(shí)候是500元定金用戶(hù),為2的時(shí)候是200元定金用戶(hù),為3的時(shí)候是普通用戶(hù);
2.pay:表示用戶(hù)是否已經(jīng)支付定金,值為true或false。雖然用戶(hù)下過(guò)500元的定金的訂單,但如果他一直沒(méi)有支付定金,現(xiàn)在只能以普通用戶(hù)的身份進(jìn)行購(gòu)買(mǎi);
3.stock:表示普通用戶(hù)用于購(gòu)買(mǎi)手機(jī)的庫(kù)存數(shù)量,已經(jīng)支付過(guò)500元定金或者200元定金的客戶(hù)不受此限制;
實(shí)現(xiàn)
var order = function( orderType, pay, stock ){
if ( orderType === 1 ){ // 500 元定金購(gòu)買(mǎi)模式
if ( pay === true ){ // 已支付定金
console.log( '500 元定金預(yù)購(gòu), 得到100 優(yōu)惠券' );
}else{ // 未支付定金,降級(jí)到普通購(gòu)買(mǎi)模式
if ( stock > 0 ){ // 用于普通購(gòu)買(mǎi)的手機(jī)還有庫(kù)存
console.log( '普通購(gòu)買(mǎi), 無(wú)優(yōu)惠券' );
}else{
console.log( '手機(jī)庫(kù)存不足' );
}
}
}
else if ( orderType === 2 ){ // 200 元定金購(gòu)買(mǎi)模式
if ( pay === true ){
console.log( '200 元定金預(yù)購(gòu), 得到50 優(yōu)惠券' );
}else{
if ( stock > 0 ){
console.log( '普通購(gòu)買(mǎi), 無(wú)優(yōu)惠券' );
}else{
console.log( '手機(jī)庫(kù)存不足' );
}
}
}
else if ( orderType === 3 ){
if ( stock > 0 ){
console.log( '普通購(gòu)買(mǎi), 無(wú)優(yōu)惠券' );
}else{
console.log( '手機(jī)庫(kù)存不足' );
}
}
};
order( 1 , true, 500); // 500 元定金預(yù)購(gòu), 得到100 優(yōu)惠券
上面的代碼當(dāng)然能實(shí)現(xiàn)需求功能,但是上述代碼明顯結(jié)構(gòu)不清晰且order函數(shù)方法龐大,耦合程度很高;
職責(zé)鏈模式實(shí)現(xiàn)
我們使用職責(zé)鏈模式來(lái)實(shí)現(xiàn)上述功能,我們先把500元定金訂單、200元定金訂單、普通訂單分為3個(gè)函數(shù),接下來(lái)把orderType、pay、stock這3個(gè)參數(shù)傳入;如果500元訂單函數(shù)不符合處理?xiàng)l件,就將這個(gè)請(qǐng)求傳遞給200元訂單函數(shù),如果200元訂單函數(shù)也不符合處理?xiàng)l件,則就將這個(gè)請(qǐng)求傳遞給普通訂單函數(shù);
var order500 = function( orderType, pay, stock ){
if ( orderType === 1 && pay === true ){
console.log( '500 元定金預(yù)購(gòu), 得到100 優(yōu)惠券' );
}else{
order200( orderType, pay, stock ); // 將請(qǐng)求傳遞給200 元訂單
}
};
// 200 元訂單
var order200 = function( orderType, pay, stock ){
if ( orderType === 2 && pay === true ){
console.log( '200 元定金預(yù)購(gòu), 得到50 優(yōu)惠券' );
}else{
orderNormal( orderType, pay, stock ); // 將請(qǐng)求傳遞給普通訂單
}
};
// 普通購(gòu)買(mǎi)訂單
var orderNormal = function( orderType, pay, stock ){
if ( stock > 0 ){
console.log( '普通購(gòu)買(mǎi), 無(wú)優(yōu)惠券' );
}else{
console.log( '手機(jī)庫(kù)存不足' );
}
};
// 測(cè)試結(jié)果:
order500( 1 , true, 500); // 500 元定金預(yù)購(gòu), 得到100 優(yōu)惠券
order500( 1, false, 500 ); // 普通購(gòu)買(mǎi), 無(wú)優(yōu)惠券
order500( 2, true, 500 ); // 200 元定金預(yù)購(gòu), 得到500 優(yōu)惠券
order500( 3, false, 500 ); // 普通購(gòu)買(mǎi), 無(wú)優(yōu)惠券
order500( 3, false, 0 ); // 手機(jī)庫(kù)存不足
可以看到經(jīng)過(guò)修改之后的代碼,結(jié)構(gòu)比之前的要清晰很多,拆分了函數(shù)并且去掉了很多if-else分支判斷;
即使如果,修改后的代碼依然是違反開(kāi)放/封閉原則的,因?yàn)槿绻覀兒竺嫘枨笞兏捅仨毿薷倪@些函數(shù)的內(nèi)部;這顯然不是我們想要的;
改良
我們先約定該函數(shù)不符合處理?xiàng)l件就返回nextSuccessor,如果符合處理?xiàng)l件就執(zhí)行;
var order500 = function( orderType, pay, stock ){
if ( orderType === 1 && pay === true ){
console.log( '500 元定金預(yù)購(gòu),得到100 優(yōu)惠券' );
}else{
return 'nextSuccessor'; // 我不知道下一個(gè)節(jié)點(diǎn)是誰(shuí),反正把請(qǐng)求往后面?zhèn)鬟f
}
};
var order200 = function( orderType, pay, stock ){
if ( orderType === 2 && pay === true ){
console.log( '200 元定金預(yù)購(gòu),得到50 優(yōu)惠券' );
}else{
return 'nextSuccessor'; // 我不知道下一個(gè)節(jié)點(diǎn)是誰(shuí),反正把請(qǐng)求往后面?zhèn)鬟f
}
};
var orderNormal = function( orderType, pay, stock ){
if ( stock > 0 ){
console.log( '普通購(gòu)買(mǎi),無(wú)優(yōu)惠券' );
}else{
console.log( '手機(jī)庫(kù)存不足' );
}
};
var Chain = function( fn ){
this.fn = fn;
this.successor = null;
};
//傳遞請(qǐng)求給下一個(gè)節(jié)點(diǎn)
Chain.prototype.setNextSuccessor = function( successor ){
return this.successor = successor;
};
//傳遞請(qǐng)求給某個(gè)節(jié)點(diǎn)
Chain.prototype.passRequest = function(){
//接收實(shí)例后的方法并將參數(shù)作為數(shù)組形式保存
var ret = this.fn.apply( this, arguments );
console.log(ret);
//ret等于nextSuccessor就是不符合處理?xiàng)l件還得往下執(zhí)行
if ( ret === 'nextSuccessor' ){
//這里是邏輯短路返回,并集一假則假;如果this.successor存在,則返回后面的執(zhí)行結(jié)果;如果this.successor不存在,則返回this.nextSuccessor的值即為undefined
return this.successor && this.successor.passRequest.apply( this.successor, arguments );
}
};
var chainOrder500 = new Chain( order500 );
var chainOrder200 = new Chain( order200 );
var chainOrderNormal = new Chain( orderNormal );
//沿職責(zé)鏈節(jié)點(diǎn)傳遞
chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal );
chainOrder500.passRequest( 1, true, 500 ); // 500 元定金預(yù)購(gòu),得到100 優(yōu)惠券
chainOrder500.passRequest( 2, true, 500 ); // 200 元定金預(yù)購(gòu),得到50 優(yōu)惠券
chainOrder500.passRequest( 3, true, 500 ); // 普通購(gòu)買(mǎi),無(wú)優(yōu)惠券
chainOrder500.passRequest( 1, false, 0 ); // 手機(jī)庫(kù)存不足
通過(guò)改良后,即使后面需求變更要出現(xiàn)定金300的訂單,我們也可以輕松應(yīng)對(duì);
var order300=function(){
//具體實(shí)現(xiàn)的行為
};
chainOrder300=newChain(order300);
chainOrder500.setNextSuccessor(chainOrder300);
chainOrder300.setNextSuccessor(chainOrder200);
tips:
補(bǔ)充知識(shí):邏輯短路;雖然這是JS基礎(chǔ)的知識(shí),但是難免會(huì)有遺忘,我在寫(xiě)這篇文章的時(shí)候就忘了;
并集一假得假:如果是并集(并且)關(guān)系則第一個(gè)數(shù)是假的或不存在的,直接返回第二個(gè)數(shù)的值;
var x = a && b && c 等價(jià)于
var x = a;
if(a){
x = b;
if(b){
x = c;
}
}
或集一真得真:如果是或集(或者)關(guān)系,則第一個(gè)數(shù)是真的直接返回第一個(gè)數(shù),第一個(gè)數(shù)是假的直接返回第二個(gè);
var x = a || b || c 等價(jià)于:
var x;
if(a){
x = a;
} else if(b){
x = b;
} else {
x = c;
}
記住上面加粗的兩句話(huà),基本就可以熟練運(yùn)用邏輯短路了;
以上就是JavaScript設(shè)計(jì)模式之職責(zé)鏈模式的詳細(xì)內(nèi)容,更多關(guān)于JavaScript設(shè)計(jì)模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序用戶(hù)登錄和登錄態(tài)維護(hù)的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序用戶(hù)登錄和登錄態(tài)維護(hù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
關(guān)于js中removeEventListener取消事件監(jiān)聽(tīng)的坑
許多入前端不久的人都會(huì)遇到removeEventListener無(wú)法清除監(jiān)聽(tīng)的情況,下面這篇文章主要給大家介紹了關(guān)于js中removeEventListener取消事件監(jiān)聽(tīng)的坑,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
JavaScript字符串轉(zhuǎn)換數(shù)字的方法
這篇文章主要介紹了JavaScript字符串轉(zhuǎn)換數(shù)字的方法,文章圍繞JavaScript字符串轉(zhuǎn)換數(shù)字的相關(guān)資料展開(kāi)全文內(nèi)容,需要的小伙伴可以參考一下2021-12-12
JavaScript中this的全面解析及常見(jiàn)實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript中this的全面解析及常見(jiàn)實(shí)例的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
echarts多條折線(xiàn)圖動(dòng)態(tài)分層的實(shí)現(xiàn)方法
這篇文章主要介紹了echarts多條折線(xiàn)圖動(dòng)態(tài)分層的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
微信公眾號(hào)h5使用微信支付及支付寶支付的步驟(前端)
微信H5支付是一種支付解決方案,主要適用于商戶(hù)在微信客戶(hù)端外的移動(dòng)端網(wǎng)頁(yè)上展示商品或服務(wù)的場(chǎng)景,這篇文章主要給大家介紹了關(guān)于微信公眾號(hào)h5使用微信支付及支付寶支付(前端)的相關(guān)資料,需要的朋友可以參考下2024-07-07
JavaScript每天必學(xué)之基礎(chǔ)知識(shí)
JavaScript每天必學(xué)之基礎(chǔ)知識(shí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
js和jquery實(shí)現(xiàn)tab狀態(tài)欄切換效果
這篇文章主要為大家詳細(xì)介紹了js和jquery實(shí)現(xiàn)tab狀態(tài)欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08

