前言

鏈式編程實際是將多個方法（函數）通過某種方式鏈接在一起，使多個邏輯塊能按流程逐步執行（或跳過執行），從而實現解耦，在js上最典型的鏈式代碼：

/* 鏈式 */
console.log(
    [1,2,3,4]
        .concat(5)
        .filter((item)=>(item<3))
        .concat(6)
        .join("")
);  // 輸出 126

/* 非鏈式 */
const arr = [1,2,3,4];
const arr1 = arr.concat(5);
const arr2 = arr1.filter((item)=>(item<3));
const arr3 = arr2.concat(6);
console.log(arr3.join(""));

實現鏈式反應的本質為：每次該對象（Object-A）調用其方法（Method-1）時，返回值仍為本對象（Object-A），從而后面使用鏈式的方式再調用另外一個方法（Method-2）時，得到的this仍為原對象（Object-A），然后返回值同樣（Object-A），從而仍可通過鏈式的方式再調用該對象上的別的方法（Method-3），以此類推。

在js上常見的鏈式編程有以下幾種具體應用：

• 對象方法return this的鏈式操作
• Promise
• 責任鏈（Chain of responsibility）

它們有不同的目標與思路，下面就逐一介紹～

一、對象方法

對同一個對象不斷執行相同或不同的方法

jQuery不用多說了吧，jQuery里面有很多的方法的使用方式就是此類形式，如：

$("#myDiv")
    .css('color','red')
    .html('<p>123</>')
    .appendTo('<div>dddd</div>')

我們來寫一個對象里掛載多個方法：

var myObj = {
    name: '',
    setName: function(newName) {
        this.name = newName;
        // 要實現在調用setName方法后仍能鏈式調用myObj的其他方法就必須返回this，即返回myObj
        return this;
    },
    addStr: function(str) {
        this.name += str;
        return this;
    },
    consoleName: function() {
        console.log(this.name);
        return this;
    }
};

myObj
    .setName('帥哥')
    .addStr('就是我')
    .consoleName();     // 輸出'帥哥就是我'

上面的三個方法的返回值都為this，所以每次調用之后返回值均為myObj，下面我們驗證下：

var obj1 = myObj.setName('帥哥');
var obj2 = obj1.addStr('就是我');
var obj3 = obj2.consoleName();
console.log(obj1 === myObj);    // true
console.log(obj2 === myObj);    // true
console.log(obj3 === myObj);    // true

既然obj1、obj2、obj3、myObj都是同一個，那我們不就可以合并代碼了嘛，不需要每次都多聲明一個變量：

/* 第一次簡化 */
myObj.setName('帥哥');
myObj.addStr('就是我');
myObj.consoleName();

/* 第二次簡化 */
myObj.setName('帥哥').addStr('就是我').consoleName();

二、Promise

將多個異步邏輯塊解耦，并使其能按序執行，若其中一個出現錯誤則退出鏈式，直接進入catch

Promise為ES6新特性，用于避免寫出沖擊波式代碼（callback hell），那么就會有人問，什么是沖擊波代碼了，給你們瞧一瞧：

getData(x => {
    getMoreData(x, y => {
        getPerson(person => {
            getPlanet(person, (planet) => {
                getGalaxy(planet, (galaxy) => {
                    getLoca(planet, (galaxy) => {
                        console.log(galaxy);
                    });
                });
            });
        });
    });
});

如果你想的話，還可以弄得更大更長～:smirk::smirk:

下面先來個最簡單的Promise使用：

var myPromise = new Promise(function(resolve, reject) {
    // 一秒鐘后執行resolve方法
    window.setTimeout(resolve, 1000);
});
myPromise.then(function() {
    // 一秒鐘之后將會進入此callback
    console.log('!');
});

可以看到構造Promise對象需要傳入一個Function，該Function接受兩個參數，分別是resolve和reject，前者作為成功回調，后者作為失敗回調。

下面展示如何使用Promise來封裝異步請求的發送與處理：

/* 封裝異步請求 */
function getUserInfo(userId){
    return new Promise(function(resolve,reject){
        if(!userId){
            reject('userId不能為空');
            return;
        }
        // 異步請求
        ajax({
            url:'./getUserInfo',
            method:'GET',
            params:{userId},
            success:function(res){
                resolve(res);
            },
            error:function(){
                reject('請求錯誤');
            }
        })
    });
}

/* 調用 */
getUserInfo()
    .then(function(data){
        console.log(data)
    })
    .catch(function(msg){
        console.log(msg)
    });
// 最后輸出 'userId不能為空'

那么來修改剛開始的沖擊波代碼：

function getUserInfo(obj){
    return new Promise(function(resolve,reject){
        if(!obj.id){
            reject('對象id不能為空');
            return;
        }
        // 使用定時器來模擬異步請求（或其他異步操作）
        window.setTimeout(
            ()=>resolve(obj),
            3000
        );
    })
}
function getUserLocal(obj){
    return new Promise(function(resolve,reject){
        if(!obj.lastIP){
            reject('對象的IP不能為空');
            return;
        }
        window.setTimeout(resolve,2000);
    })
}
getBaseInfo({id:null,lastIP:123})
    .then(function(obj){
        return getUserDetail(obj);
    })
    .catch(function(errMsg){
        //在最后加catch的話，如果then中某處出現了錯誤，這不再繼續執行下面的語句，直接執行catch，并且將錯誤信息傳給catch
        console.log(errMsg);
    })
// 最后會輸出（console） '對象id不能為空'

Promise中的catch會捕捉當前鏈式中的最終的錯誤（the eventual error）

三、責任鏈（Chain of responsibility）

劃分多個任務（責任）塊，按序執行，每個任務塊都有權決定是否繼續交給下一個任務塊

簡單的來講，就像是面試一樣：

• 人事篩選簡歷，如果簡歷信息各項符合就交給技術負責人，否則就沒有然后了
• 技術負責人面試，如果技術過關了交給主管
• 主管面試，如果各方面都合適了交給老板
• 老板....以此類推

其中這一個個的就是任務塊（handler）

下面來個栗子：

// 任務塊：篩選性別
const genderHandler = function(next, data) {
    if(data.gender === 'male') {
        console.log('我們不要男的');
        return;
    }
    next(data);
};
// 任務塊：篩選年齡
const ageHandler = function(next, data) {
    if(data.age > 30) {
        console.log('年齡太大了');
        return;
    }
    next(data);
};
// 任務塊：最終處理函數
const finalSuccHandler = function(next, data) {
    console.log('emmmm...不錯不錯');
};


import Chain from './chain.js';
// 使用Chain來構建鏈式，類似于“建立生產線”
const peopleChain = new Chain()
    .setNextHandler(genderHandler)
    .setNextHandler(ageHandler)
    .setNextHandler(finalSuccHandler);


/* 往責任鏈上載入不同的信息 */
peopleChain.start({
    gender: 'male',
    age: 21
});     // 輸出 '我們不要男的'

peopleChain.start({
    gender: 'female',
    age: 48
});     // 輸出 '年齡太大了'

peopleChain.start({
    gender: 'female',
    age: 18
});     // 輸出 'emmmm...不錯不錯'

構造簡單的Chain類，用以構建鏈式：

// chain.js
class Chain {
    handlers = [];      // 處理函數集合，用于存儲當前鏈式上所有的func
    cache = [];         // 緩存，用于存儲當前鏈式上還未觸發的func

    /* 設置下一個 handler */
    setNextHandler(fn) {
        if (typeof fn !== "function") {
            throw new Error("[chain] successor must be a function.");
        }
        this.handlers.push(fn);
        return this;
    }

    next() {
        if (this.cache && this.cache.length > 0) {
            let ware = this.cache.shift();    // 釋放隊頭 handler
            ware.call(
                this,
                this.next.bind(this),       // 遞歸
                arguments && arguments[0]
            );
        }
    }

    /* 開始觸發鏈式 */
    start() {

        // 將 [this.handlers] 復制一份，賦給 [this.cache]
        this.cache = this.handlers.map(function(fn) {
            return fn;
        });

        // 主動觸發第一個 handler
        this.next(arguments[0]);
    }
}
export default Chain;

在vue、react、小程序等框架中使用的話，鏈式內部可能需要使用到上下文（this），需要看下面的栗子：

// chain.js
class Chain {
    handlers = [];      // 處理函數集合，用于存儲當前鏈式上所有的func
    cache = [];         // 緩存，用于存儲當前鏈式上還未觸發的func
    context = null;     // 上下文，用于存儲外部this

    /* 設置下一個 handler */
    setNextHandler(fn) {
        if (typeof fn !== "function") {
            throw new Error("[chain] successor must be a function.");
        }
        this.handlers.push(fn);
        return this;
    }

    next() {
        if (this.cache && this.cache.length > 0) {
            let ware = this.cache.shift();    // 釋放隊頭 handler
            ware.call(
                this,
                this.context,
                this.next.bind(this),       // 遞歸
                arguments && arguments[0]
            );
        }
    }

    /* 開始觸發鏈式 */
    start() {

        // start 方法接受 [context] 及其他參數
        const { context, ...rest } = arguments[0];

        // 將 [this.handlers] 復制一份，賦給 [this.cache]
        this.cache = this.handlers.map(function(fn) {
            return fn;
        });

        // 暫存上下文
        this.context = context;

        // 主動觸發第一個 handler
        this.next(rest);

    }
}

export default Chain;

    // 任務塊：篩選性別
    const genderHandler = function(context, next, data) {
        if(data.gender === 'male') {
            context.showTips('我們不要男的');
            return;
        }
        next(data);
    };
    // 任務塊：篩選年齡
    const ageHandler = function(context, next, data) {
        if(data.age > 30) {
            context.showTips('年齡太大了');
            return;
        }
        next(data);
    };

    // 使用Chain來構建鏈式
    const peopleChain = new Chain()
        .setNextHandler(genderHandler)
        .setNextHandler(ageHandler);

    // 這里使用objA來作為上下文，如：在vue中的話context參數傳該組件的vm即可
    const objA = {
        showTips: function(str) {
            window.alert(str);
        }
    };

    peopleChain.start({
        context: objA,
        gender: 'male',
        age: 21
    });

    peopleChain.start({
        context: objA,
        gender: 'female',
        age: 48
    });