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; }

 　　　　記住上面加粗的兩句話，基本就能夠熟練運用邏輯短路了；

原文出處：https://www.cnblogs.com/dengyao-blogs/p/11725141.html