職責鏈的定義：使多個物件都有機會處理請求，從而避免請求的傳送者和接收者之間的耦合關係，將這些物件連成一條鏈，並沿著這條鏈傳遞該請求，直到有一個物件能處理它為止，傳遞鏈中的這些物件就叫節點。

需求背景： 一個電商網站，使用者交500定金且定金已付時，可享受500優惠券且不受貨物數量限制；使用者交200定金且定金已付時，可享受500優惠券且不受貨物數量限制；使用者不交定金時受貨物數量限制，有貨時原價買，無貨時則無法買。

原始版本， if else一路判斷

var buyOrder = function(orederType, pay, stock){
    if(orederType ==
 
 1){
        if(pay){
            console.log('500優惠券');
        }else {
            if(stock > 0){
                console.log('普通購物頁面');
            }else {
                console.log('已無貨');
            }
        }
    }else if(orederType == 2){
        if(pay){
            console.log('200優惠券');
        }
 
else {
            if(stock > 0){
                console.log('普通購物頁面');
            }else {
                console.log('已無貨');
            }
        }
    }else if(orederType == 3){
        if(stock > 0){
            console.log('普通購物頁面');
        }else {
            console.log('已無貨');
        }
 

    }
}

buyOrder(1, true, 600)

改進版本

var order500 = function(orderType, pay , stock){
    if(orderType == '1' && pay == true){
        console.log('500優惠券');
    }else {
        order200(orderType, pay , stock)
    }
}

var order200 = function(orderType, pay , stock){
    if(orderType == '2' && pay == true){
        console.log('200優惠券');
    }else {
        orderNormal(orderType, pay , stock)
    }
}

var orderNormal = function(orderType, pay , stock){
    if(stock > 0){
        console.log('普通購物頁面');
    }else {
        console.log('已無貨');
    }
}

order500(3, true, 0)

優化版本1：
同步的職責鏈

//3個訂單函式 ，它們都是節點函式
var order500 = function(orderType, pay , stock){
    if(orderType == '1' && pay == true){
        console.log('500優惠券');
    }else {
        return 'nextSuccessor';     //我不知道下個節點是誰，反正把請求往後傳遞
    }
}

var order200 = function(orderType, pay , stock){
    if(orderType == '2' && pay == true){
        console.log('200優惠券');
    }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){     //設定職責順序方法
    this.successor = successor
}

Chain.prototype.passRequest = function(){       //請求傳遞
    var ret = this.fn.apply(this, arguments)

    if(ret === 'nextSuccessor'){
        return this.successor && this.successor.passRequest.apply(this.successor, arguments)
    }

    return ret;
}

//把3個訂單函式分別包裝成職責鏈的節點
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優惠券
chainOrder500.passRequest(3, true, 20)      //普通購物頁面
chainOrder500.passRequest(3, true, 0)       //已無貨

//此時如果中間有需求改動，只需如此做： 
var order300 = function(){
    if(orderType == '3' && pay == true){
        console.log('300優惠券');
    }else {
        return 'nextSuccessor';     //我不知道下個節點是誰，反正把請求往後傳遞
    }
}
var chainOrder300 = new Chain(order300)     //新增新職責節點
chainOrder500.setNextSuccessor(chainOrder300)
chainOrder300.setNextSuccessor(chainOrder300)   //修改職責鏈順序
chainOrder200.setNextSuccessor(chainOrderNormal)

//這樣，就可以完全不必去理會原來的訂單函式程式碼，只需增加一個節點，然後重新設定職責鏈中的相關節點的順序就行。

優化版本2：非同步的職責鏈

在實際開發中，經常會遇到 一些非同步的問題，比如要在節點函式中發起一個ajax請求，非同步請求返回的結果才能決定是否繼續在職責鏈中passRequest

可以給Chain類再增加一個原型方法：

//職責建構函式
var Chain = function(fn){
    this.fn = fn;
    this.successor = null;
}

Chain.prototype.setNextSuccessor = function(successor){     //設定職責順序方法
    this.successor = successor
}

Chain.prototype.passRequest = function(){       //請求傳遞
    var ret = this.fn.apply(this, arguments)

    if(ret === 'nextSuccessor'){    //傳遞給職責鏈中的下一個節點
        return this.successor && this.successor.passRequest.apply(this.successor, arguments)
    }

    return ret;
}

//新增，表示手動傳遞請求給職責鏈中的下一個節點
Chain.prototype.next = function(){
    return this.successor && this.successor.passRequest.apply(this.successor, arguments)
}


//非同步職責鏈例子
var fn1 = new Chain(function(){
    console.log(1);
    return 'nextSuccessor'
})

var fn2 = new Chain(function(){
    console.log(2);
    var self = this;
    setTimeout(function(){
        self.next()
    }, 1000)
})

var fn3 = new Chain(function(){
    console.log(3);
})


//指定節點在職責鏈中的順序
fn1.setNextSuccessor(fn2)
fn2.setNextSuccessor(fn3)

//把請求傳遞給第一個節點，開始節點傳遞
fn1.passRequest()

//輸出 1 2 ...(1秒後)... 3

//這是一個非同步職責鏈，請求在職責鏈節點中傳遞，但節點有權利決定什麼時候 把請求交給下一個節點。這樣可以建立一個非同步ajax佇列庫。 

tips:

這裡補充個知識點：“短路求值” && 會返回第一個假值（0, null, "", undefined, NaN），而 || 則會返回第一個真值。

var x = a || b || c 等價於：

var x;
if(a){
    x = a;
} else if(b){
    x = b;
} else {
    x = c;
}

var x = a && b && c 等價於：

var x = a;
if(a){
    x = b;
    if(b){
        x = c;
    }
}

所以 && 有時候會用來代替 if (expression) doSomething()，轉成 &&方式就是 expression && doSomething()。

而 || 比較用來在函式中設定預設值，比如：

function doSomething(arg1, arg2, arg3) {
    arg1 = arg1 || 'arg1Value';
    arg2 = arg2 || 'arg2Value';
}

不過還需要看具體的使用場景，就比如如果要求 doSomething() 傳入的 arg1 為一個數值，則上面的寫法就會出現問題（在傳入 0 的時候被認為是一個假值而使用預設值）。

現在個人比較常用的方法只判斷是否與 undefined 相等，比如

function doSomething(arg) {
    arg = arg !== void 0 ? arg : 0;
}

職責鏈模式的優勢：解耦請求傳送者和N個接收者之間的複雜關係，由於不知道鏈條中的哪個節點可以處理你發出的請求，所以只需把請求傳遞給第一個節點就行。

如果在實際開發中，當維護一個含有多個條件分支語句的巨大函式時時，可以使用職責鏈模式。鏈中的節點物件可以靈活拆分重組，增加刪除節點，且無需改動其他節點函式內的程式碼。

喜歡本文請掃下方二維碼，關注微信公眾號： 前端小二，檢視更多我寫的文章哦，多謝支援。