JavaScript設計模式——職責鏈模式
職責鏈模式是設計模式中行為型的一種設計模式;
定義:
使多個物件都有機會處理請求,從而避免請求的傳送者與接收者之間的耦合關係,將這些處理請求的物件形成一個鏈,並沿著這個鏈傳遞請求,直到有一個物件處理它為止;
白話解釋:
作者座標武漢,1000+萬人口的新一線城市 ;以早高峰公交為例,早上早高峰的時候通常都是公交車前門擁堵,以至於沒辦法刷卡乘車;但是後門相對來說會空一些,這時我們選擇後門上車,但是我們後門上車就刷不了卡;逃單?不存在的,這可不是我們作為講文明、有素質的新一代青年應該做的;於是,我們往前面傳遞公交卡,請求前面的乘客幫忙傳遞至刷卡器處刷卡,但是我們是在後門,刷卡器是在前門,我們這傳遞的過程中會通過請求多位乘客幫忙傳遞公交卡,這個傳遞的過程就是一種職責鏈模式,每一位傳遞的乘客就是職責鏈中的節點物件;
程式碼實現:
假設有一個售賣手機的電商網站,經過分別繳納500元定金和200元定價的兩輪預定後(訂單此時生成),現在已經到了正式購買的階段。公司針對支付過定金的客戶有一定的優惠政策。在正式購買時,已支付過500元定金的客戶將獲得100元商城優惠券,已支付過200元的客戶將獲得50元商城優惠券;而之前沒有支付過定金的客戶將沒有任何優惠券,並且在庫存有限的情況下,還不一定能買得到;
引數定義:
1.orderType:表示訂單型別(定金使用者或普通使用者),code的值為1的時候是500元定金使用者,為2的時候是200元定金使用者,為3的時候是普通使用者;
2.pay:表示使用者是否已經支付定金,值為true或false。雖然使用者下過500元的定金的訂單,但如果他一直沒有支付定金,現在只能以普通使用者的身份進行購買;
3.stock:表示普通使用者用於購買手機的庫存數量,已經支付過500元定金或者200元定金的客戶不受此限制;
實現:
var order = function( orderType, pay, stock ){ if ( orderType === 1 ){ // 500 元定金購買模式 if ( pay === true ){ // 已支付定金 console.log( '500 元定金預購, 得到100 優惠券' ); }else{ // 未支付定金,降級到普通購買模式 if ( stock > 0 ){ // 用於普通購買的手機還有庫存 console.log( '普通購買, 無優惠券' ); }else{ console.log( '手機庫存不足' ); } } } else if ( orderType === 2 ){ // 200 元定金購買模式 if ( pay === true ){ console.log( '200 元定金預購, 得到50 優惠券' ); }else{ if ( stock > 0 ){ console.log( '普通購買, 無優惠券' ); }else{ console.log( '手機庫存不足' ); } } } else if ( orderType === 3 ){ if ( stock > 0 ){ console.log( '普通購買, 無優惠券' ); }else{ console.log( '手機庫存不足' ); } } }; order( 1 , true, 500); // 500 元定金預購, 得到100 優惠券
上面的程式碼當然能實現需求功能,但是上述程式碼明顯結構不清晰且order函式方法龐大,耦合程度很高;
職責鏈模式實現:
我們使用職責鏈模式來實現上述功能,我們先把500元定金訂單、200元定金訂單、普通訂單分為3個函式,接下來把orderType、pay、stock這3個引數傳入;如果500元訂單函式不符合處理條件,就將這個請求傳遞給200元訂單函式,如果200元訂單函式也不符合處理條件,則就將這個請求傳遞給普通訂單函式;
var order500 = function( orderType, pay, stock ){ if ( orderType === 1 && pay === true ){ console.log( '500 元定金預購, 得到100 優惠券' ); }else{ order200( orderType, pay, stock ); // 將請求傳遞給200 元訂單 } }; // 200 元訂單 var order200 = function( orderType, pay, stock ){ if ( orderType === 2 && pay === true ){ console.log( '200 元定金預購, 得到50 優惠券' ); }else{ orderNormal( orderType, pay, stock ); // 將請求傳遞給普通訂單 } }; // 普通購買訂單 var orderNormal = function( orderType, pay, stock ){ if ( stock > 0 ){ console.log( '普通購買, 無優惠券' ); }else{ console.log( '手機庫存不足' ); } }; // 測試結果: order500( 1 , true, 500); // 500 元定金預購, 得到100 優惠券 order500( 1, false, 500 ); // 普通購買, 無優惠券 order500( 2, true, 500 ); // 200 元定金預購, 得到500 優惠券 order500( 3, false, 500 ); // 普通購買, 無優惠券 order500( 3, false, 0 ); // 手機庫存不足
可以看到經過修改之後的程式碼,結構比之前的要清晰很多,拆分了函式並且去掉了很多if-else分支判斷;
即使如果,修改後的程式碼依然是違反開放/封閉原則的,因為如果我們後面需求變更,就必須修改這些函式的內部;這顯然不是我們想要的;
改良:
我們先約定該函式不符合處理條件就返回nextSuccessor,如果符合處理條件就執行;
var order500 = function( orderType, pay, stock ){ if ( orderType === 1 && pay === true ){ console.log( '500 元定金預購,得到100 優惠券' ); }else{ return 'nextSuccessor'; // 我不知道下一個節點是誰,反正把請求往後面傳遞 } }; var order200 = function( orderType, pay, stock ){ if ( orderType === 2 && pay === true ){ console.log( '200 元定金預購,得到50 優惠券' ); }else{ return 'nextSuccessor'; // 我不知道下一個節點是誰,反正把請求往後面傳遞 } }; var orderNormal = function( orderType, pay, stock ){ if ( stock > 0 ){ console.log( '普通購買,無優惠券' ); }else{ console.log( '手機庫存不足' ); } }; var Chain = function( fn ){ this.fn = fn; this.successor = null; }; //傳遞請求給下一個節點 Chain.prototype.setNextSuccessor = function( successor ){ return this.successor = successor; }; //傳遞請求給某個節點 Chain.prototype.passRequest = function(){ //接收例項後的方法並將引數作為陣列形式儲存 var ret = this.fn.apply( this, arguments ); console.log(ret); //ret等於nextSuccessor就是不符合處理條件還得往下執行 if ( ret === 'nextSuccessor' ){ //這裡是邏輯短路返回,並集一假則假;如果this.successor存在,則返回後面的執行結果;如果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 ); //沿職責鏈節點傳遞 chainOrder500.setNextSuccessor( chainOrder200 ); chainOrder200.setNextSuccessor( chainOrderNormal ); chainOrder500.passRequest( 1, true, 500 ); // 500 元定金預購,得到100 優惠券 chainOrder500.passRequest( 2, true, 500 ); // 200 元定金預購,得到50 優惠券 chainOrder500.passRequest( 3, true, 500 ); // 普通購買,無優惠券 chainOrder500.passRequest( 1, false, 0 ); // 手機庫存不足
通過改良後,即使後面需求變更要出現定金300的訂單,我們也可以輕鬆應對;
var order300=function(){ //具體實現的行為 }; chainOrder300=newChain(order300); chainOrder500.setNextSuccessor(chainOrder300); chainOrder300.setNextSuccessor(chainOrder200);
tips:
補充知識:邏輯短路;雖然這時JS基礎的知識,但是難免會有遺忘,我在寫這篇文章的時候就忘了;
並集一假得假:如果是並集(並且)關係則第一個數是假的或不存在的,直接返回第二個數的值;
var x = a && b && c 等價於 var x = a; if(a){ x = b; if(b){ x = c; } }
或集一真得真:如果是或集(或者)關係,則第一個數是真的直接返回第一個數,第一個數是假的直接返回第二個;
var x = a || b || c 等價於: var x; if(a){ x = a; } else if(b){ x = b; } else { x = c; }
記住上面加粗的兩句話,基本就可以熟練運用邏輯短路