職責(zé)鏈模式是設(shè)計(jì)模式中行為型的一種設(shè)計(jì)模式；

定義：使多個(gè)對象都有機(jī)會(huì)處理請求，從而避免請求的發(fā)送者與接收者之間的耦合關(guān)系，將這些處理請求的對象形成一個(gè)鏈，并沿著這個(gè)鏈傳遞請求，直到有一個(gè)對象處理它為止；

白話解釋：作者坐標(biāo)武漢，1000+萬人口的新一線城市 ；以早高峰公交為例，早上早高峰的時(shí)候通常都是公交車前門擁堵，以至于沒辦法刷卡乘車；但是后門相對來說會(huì)空一些，這時(shí)我們選擇后門上車，但是我們后門上車就刷不了卡；逃單？不存在的，這可不是我們作為講文明、有素質(zhì)的新一代青年應(yīng)該做的；于是，我們往前面?zhèn)鬟f公交卡，請求前面的乘客幫忙傳遞至刷卡器處刷卡，但是我們是在后門，刷卡器是在前門，我們這傳遞的過程中會(huì)通過請求多位乘客幫忙傳遞公交卡，這個(gè)傳遞的過程就是一種職責(zé)鏈模式，每一位傳遞的乘客就是職責(zé)鏈中的節(jié)點(diǎn)對象；

假設(shè)有一個(gè)售賣手機(jī)的電商網(wǎng)站，經(jīng)過分別繳納500元定金和200元定價(jià)的兩輪預(yù)定后（訂單此時(shí)生成），現(xiàn)在已經(jīng)到了正式購買的階段。公司針對支付過定金的客戶有一定的優(yōu)惠政策。在正式購買時(shí)，已支付過500元定金的客戶將獲得100元商城優(yōu)惠券，已支付過200元的客戶將獲得50元商城優(yōu)惠券；而之前沒有支付過定金的客戶將沒有任何優(yōu)惠券，并且在庫存有限的情況下，還不一定能買得到；

1.orderType：表示訂單類型（定金用戶或普通用戶），code的值為1的時(shí)候是500元定金用戶，為2的時(shí)候是200元定金用戶，為3的時(shí)候是普通用戶；

2.pay：表示用戶是否已經(jīng)支付定金，值為true或false。雖然用戶下過500元的定金的訂單，但如果他一直沒有支付定金，現(xiàn)在只能以普通用戶的身份進(jìn)行購買；

3.stock：表示普通用戶用于購買手機(jī)的庫存數(shù)量，已經(jīng)支付過500元定金或者200元定金的客戶不受此限制；

var order = function( orderType, pay, stock ){ if ( orderType === 1 ){ // 500 元定金購買模式if ( pay === true ){ // 已支付定金 console.log( ’500 元定金預(yù)購, 得到100 優(yōu)惠券’ );}else{ // 未支付定金，降級(jí)到普通購買模式 if ( stock > 0 ){ // 用于普通購買的手機(jī)還有庫存console.log( ’普通購買, 無優(yōu)惠券’ ); }else{console.log( ’手機(jī)庫存不足’ ); }} } else if ( orderType === 2 ){ // 200 元定金購買模式if ( pay === true ){ console.log( ’200 元定金預(yù)購, 得到50 優(yōu)惠券’ );}else{ if ( stock > 0 ){console.log( ’普通購買, 無優(yōu)惠券’ ); }else{console.log( ’手機(jī)庫存不足’ ); }} } else if ( orderType === 3 ){if ( stock > 0 ){ console.log( ’普通購買, 無優(yōu)惠券’ );}else{ console.log( ’手機(jī)庫存不足’ );} }};order( 1 , true, 500); // 500 元定金預(yù)購, 得到100 優(yōu)惠券

上面的代碼當(dāng)然能實(shí)現(xiàn)需求功能，但是上述代碼明顯結(jié)構(gòu)不清晰且order函數(shù)方法龐大，耦合程度很高；

我們使用職責(zé)鏈模式來實(shí)現(xiàn)上述功能，我們先把500元定金訂單、200元定金訂單、普通訂單分為3個(gè)函數(shù)，接下來把orderType、pay、stock這3個(gè)參數(shù)傳入；如果500元訂單函數(shù)不符合處理?xiàng)l件，就將這個(gè)請求傳遞給200元訂單函數(shù)，如果200元訂單函數(shù)也不符合處理?xiàng)l件，則就將這個(gè)請求傳遞給普通訂單函數(shù)；

var order500 = function( orderType, pay, stock ){ if ( orderType === 1 && pay === true ){console.log( ’500 元定金預(yù)購, 得到100 優(yōu)惠券’ ); }else{order200( orderType, pay, stock ); // 將請求傳遞給200 元訂單 }};// 200 元訂單var order200 = function( orderType, pay, stock ){ if ( orderType === 2 && pay === true ){console.log( ’200 元定金預(yù)購, 得到50 優(yōu)惠券’ ); }else{orderNormal( orderType, pay, stock ); // 將請求傳遞給普通訂單 }};// 普通購買訂單var orderNormal = function( orderType, pay, stock ){ if ( stock > 0 ){console.log( ’普通購買, 無優(yōu)惠券’ ); }else{console.log( ’手機(jī)庫存不足’ ); }};// 測試結(jié)果：order500( 1 , true, 500); // 500 元定金預(yù)購, 得到100 優(yōu)惠券order500( 1, false, 500 ); // 普通購買, 無優(yōu)惠券order500( 2, true, 500 ); // 200 元定金預(yù)購, 得到500 優(yōu)惠券order500( 3, false, 500 ); // 普通購買, 無優(yōu)惠券order500( 3, false, 0 ); // 手機(jī)庫存不足

可以看到經(jīng)過修改之后的代碼，結(jié)構(gòu)比之前的要清晰很多，拆分了函數(shù)并且去掉了很多if-else分支判斷；

即使如果，修改后的代碼依然是違反開放/封閉原則的，因?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ù)購，得到100 優(yōu)惠券’ ); }else{return ’nextSuccessor’; // 我不知道下一個(gè)節(jié)點(diǎn)是誰，反正把請求往后面?zhèn)鬟f }};var order200 = function( orderType, pay, stock ){ if ( orderType === 2 && pay === true ){console.log( ’200 元定金預(yù)購，得到50 優(yōu)惠券’ ); }else{return ’nextSuccessor’; // 我不知道下一個(gè)節(jié)點(diǎn)是誰，反正把請求往后面?zhèn)鬟f }};var orderNormal = function( orderType, pay, stock ){ if ( stock > 0 ){console.log( ’普通購買，無優(yōu)惠券’ ); }else{console.log( ’手機(jī)庫存不足’ ); }};var Chain = function( fn ){ this.fn = fn; this.successor = null;};//傳遞請求給下一個(gè)節(jié)點(diǎn)Chain.prototype.setNextSuccessor = function( successor ){ return this.successor = successor;};//傳遞請求給某個(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的值即為undefinedreturn 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ù)購，得到100 優(yōu)惠券chainOrder500.passRequest( 2, true, 500 ); // 200 元定金預(yù)購，得到50 優(yōu)惠券chainOrder500.passRequest( 3, true, 500 ); // 普通購買，無優(yōu)惠券chainOrder500.passRequest( 1, false, 0 ); // 手機(jī)庫存不足

通過改良后，即使后面需求變更要出現(xiàn)定金300的訂單，我們也可以輕松應(yīng)對；

var order300=function(){//具體實(shí)現(xiàn)的行為};chainOrder300=newChain(order300);chainOrder500.setNextSuccessor(chainOrder300);chainOrder300.setNextSuccessor(chainOrder200);

tips：

補(bǔ)充知識(shí)：邏輯短路；雖然這是JS基礎(chǔ)的知識(shí)，但是難免會(huì)有遺忘，我在寫這篇文章的時(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;}

記住上面加粗的兩句話，基本就可以熟練運(yùn)用邏輯短路了；

以上就是JavaScript設(shè)計(jì)模式之職責(zé)鏈模式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript設(shè)計(jì)模式的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！