1. 程式人生 > >JavaScript設計模式——職責鏈模式

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

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