函數(shù)式 js 接口實(shí)現(xiàn)原理，以及 lodash/fp 模塊

asce1885 發(fā)布于2019-08-19 18:34 / 930人閱讀

摘要：函數(shù)式接口之前在上看到一個(gè)技術(shù)視頻，講的接口為什么不好用，以及什么樣的接口更好用。演講者是的作者，他提出了一種全面函數(shù)式的接口設(shè)計(jì)模式。言歸正傳，今天聊聊這樣的接口如何實(shí)現(xiàn)，以及中的模塊。

函數(shù)式 js 接口

之前在 youtube 上看到一個(gè)技術(shù)視頻，講“underscore.js的接口為什么不好用”，以及什么樣的接口更好用。演講者是 lodash.js 的作者，他提出了一種“全面函數(shù)式”的 js 接口設(shè)計(jì)模式。大概類似這樣：

// 傳統(tǒng)接口
_.map([1, 2, 3], function (el) {return el * 2}); // return [2, 4, 6]

// 函數(shù)式接口
var fn = _.map([1, 2, 3]); // return a function
fn(function (el) {return el * 2}); // return [2, 4, 6];

// 或者
_.map([1, 2, 3])(function (el) {return el * 2}); // return [2, 4, 6];

找到一點(diǎn)感覺(jué)沒(méi)有？其實(shí)就是函數(shù)式編程語(yǔ)言中廣泛存在的“科里化”函數(shù)。當(dāng)實(shí)參填滿形參表的時(shí)候，執(zhí)行結(jié)算返回結(jié)果，否則返回一個(gè)臨時(shí)函數(shù)，繼續(xù)接受實(shí)參。

看到這個(gè)寫法眼前一亮，感覺(jué)有大規(guī)模簡(jiǎn)化代碼的潛力。當(dāng)時(shí)實(shí)際試了一下發(fā)下很多地方用不了，因?yàn)橹皩懙拇a受 jQuery 影響，有很多這樣的接口：

foobar.attribute(name); // 讀屬性
foobar.attribute(name, newValue); // 寫屬性

這樣的接口是按照上述方法 curry 化會(huì)使得讀屬性變得不可能，根本原因是參數(shù)數(shù)量不同時(shí) attribute 函數(shù)的語(yǔ)義根本不一樣。使用 jQuery 的時(shí)候感覺(jué)這種寫法非常爽，后來(lái)就跟著這么寫，但是目前看來(lái)這樣的接口設(shè)計(jì)是有問(wèn)題的。

言歸正傳，今天聊聊這樣的接口如何實(shí)現(xiàn)，以及 lodash 中的 fp 模塊。

實(shí)現(xiàn)原理

說(shuō)到底就是個(gè) currying 的問(wèn)題，currying 在很多語(yǔ)言中是內(nèi)置功能，但是 js 沒(méi)有，所以我們要實(shí)現(xiàn)一個(gè) currying 工具函數(shù)。首先貼一個(gè)最簡(jiǎn)易的 currying 實(shí)現(xiàn)，它的功能非常簡(jiǎn)單，輸入一個(gè)函數(shù) fn1 和部分實(shí)參，返回一個(gè)保存部分實(shí)參，繼續(xù)接收實(shí)參的函數(shù) fn2，調(diào)用fn2，它會(huì)合并實(shí)參數(shù)組，并調(diào)用 fn1。

/**
 * 函數(shù)柯里化
 * @param fn 輸入函數(shù)
 * @return 柯里化后的函數(shù)
 */
var curry = function (fn) {
    if (!isFunction(fn)) {
        return;
    }

    var args = slice(arguments, 1);
 
    return function () {
        return fn.apply(this, args.concat(slice(arguments, 0)));
    }
}

isFunction 和 slice 大家都知道我就不貼了。看一下如何調(diào)用：

function add(a, b) {
    return a + b;
}

addOne = curry(add, 1);

addOne(2); // return 3

有時(shí)候我們需要輸入的部分實(shí)參是數(shù)組列表形式，所以我們包裝一下剛才的 curry 函數(shù)：

/**
 * 函數(shù)柯里化
 * @param fn 輸入函數(shù)
 * @param arr 參數(shù)列表
 * @return 柯里化后的函數(shù)
 */
var curryApply = function (fn, arr) {
    if (!isFunction(fn)) {
        return;
    }

    var args = arr.slice(0);
    args.unshift(fn);
    return curry.apply(this, args);
}

上面的 curry 函數(shù)有個(gè)問(wèn)題，就是連續(xù)多次補(bǔ)充實(shí)參，我們還需要封裝一個(gè)支持連續(xù)調(diào)用的版本：

/**
 * 自動(dòng)柯里化
 * @param fn 輸入函數(shù)
 * @param n 輸入函數(shù)參數(shù)個(gè)數(shù)
 * @return 柯里化后的函數(shù)
 */
var autoCurry = function (fn, n) {
    if (!isFunction(fn)) {
        return;
    }

    function retFn() {
        var len = arguments.length;
        var args = slice(arguments, 0);
        var nextn = n - len;
 
        if (nextn > 0) {
            return autoCurry(curryApply(retFn, args), nextn);
        }
    
        return fn.apply(this, args);
    }
    
    return retFn;
}

autoCurry 使用的遞歸的方法，輸出函數(shù)可以可以通過(guò)簡(jiǎn)單調(diào)用的方式連續(xù)補(bǔ)充實(shí)參，當(dāng)實(shí)參和預(yù)設(shè)的參數(shù)數(shù)量相等時(shí)，執(zhí)行輸入函數(shù)。使用方法如下：

function compute(a, b, c) {
    return (a + b) * c;
}

var curryedCompute = autoCurry(compute, 3);

compute(1, 2, 3); // return 9
curryedCompute(1)(2)(3); // return 9

大家如果使用 node.js 的話，可能知道 npm 中有個(gè) curry 模塊，實(shí)現(xiàn)的功能是一樣的，不同的是當(dāng)你不輸入?yún)?shù)個(gè)數(shù) n 時(shí)，curry 模塊會(huì)使用 Function 對(duì)象的 length 屬性作為預(yù)設(shè)的 n 值。

lodash/fp

到這里實(shí)現(xiàn)原理就講清楚了。本著不造輪子的原則，如果大家想嘗試一下函數(shù)式風(fēng)格的基礎(chǔ) js 庫(kù)的話，建議使用 lodash/fp 這個(gè)模塊。大家都知道 lodash 是 underscore 的 better implemention，而 lodash/fp 就是科里化的 lodash。與簡(jiǎn)單的 currying 不同的是，為了方便使用，lodash/fp 的設(shè)計(jì)者調(diào)換了一些接口的參數(shù)順序，比如開頭提到的 _.map 接口，如果簡(jiǎn)單 currying 的話第一個(gè)參數(shù)應(yīng)該是數(shù)組[1, 2, 3]，但是大多數(shù)時(shí)候，我們想要持有的是一個(gè)算法，用這個(gè)算法處理不同的數(shù)據(jù)。所以我們希望暫存的實(shí)際上是第二個(gè)參數(shù) fn，所以 lodash/fp 的接口是這樣的：

// The `lodash/map` iteratee receives three arguments:
// (value, index|key, collection)
_.map(["6", "8", "10"], parseInt);
// → [6, NaN, 2]

// The `lodash/fp/map` iteratee is capped at one argument:
// (value)
fp.map(parseInt)(["6", "8", "10"]);
// → [6, 8, 10]

關(guān)于 lodash/fp 更詳細(xì)的說(shuō)明，請(qǐng)看：https://github.com/lodash/lodash/wiki/FP-Guide