JavaScript設計模式之職責鏈模式

Posted on by

概述

職責鏈模式是設計模式中行為型的一種設計模式；

定義：使多個對象都有機會處理請求，從而避免請求的發送者與接收者之間的耦合關系，將這些處理請求的對象形成一個鏈，並沿著這個鏈傳遞請求，直到有一個對象處理它為止；

白話解釋：作者坐標武漢，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;
}

記住上面加粗的兩句話，基本就可以熟練運用邏輯短路瞭；

以上就是JavaScript設計模式之職責鏈模式的詳細內容，更多關於JavaScript設計模式的資料請關註WalkonNet其它相關文章！

推薦閱讀：