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

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

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