如何通过 JavaScript 编写高质量的函数（四）：函数式编程之实战篇

document.querySelector('#msg').innerHTML = '<h1>Hello World'</h1>'

（滑 动可查看）

我们来欣赏一下上面的代码：

第一：硬编码味道很重，代码都是写死的。

第二：扩展性很差，复用性很低，难道我要在其他地方进行 crtl c ctrl v 然后再手工改？

第三：如果在 document.querySelector('#msg')获取对象后，不想 innerHTML ，我想做一些其他的事情，怎么办？

OK ，下面我就先向大家展示一下，如何完全重构这段代码。这里我只写 JS 部分：

代码如下：

// 使用到了组合函数，运用了函数的高阶性等

const compose = (...fns) => value => fns.reverse().reduce((acc, fn) => fn(acc), value)

const documentWrite = document.write.bind(document)

const createNode = function(text) {

return '<h1>' + text + '</h1>'

}

const setText = msg => msg

const printMessage = compose(

documentWrite,

createNode,

setText

)

printMessage('hi~ godkun')

（滑 动可查看）

compose 函数的执行顺序是从右向左，也就是数据流是从右向左流，可以把

const printMessage = compose(

documentWrite,

createNode,

setText

)

（滑 动可查看）

看成是下面这种形式：

documentWrite(createNode(setText(value)))

（滑 动可查看）

在 linux 世界里，是遵循 pipe (管道) 的思想，也就是数据从左向右流，那怎么把上面的代码变成 pipe 的形式呢？

很简单，只需要把 const compose = (...fns) => value => fns.reverse().reduce((acc, fn) => fn(acc), value) 中的 reverse 去掉就好了，写成：

const compose = (...fns) => value => fns.reduce((acc, fn) => fn(acc), value)

（滑 动可查看）

代码 demo 如下：

let arr = [1,3,2,4,5]

function fun(arr) {

let result = arr.sort()

console.log('result', result)

console.log('arr', arr)

}

fun(arr)

（滑 动可查看）

let arr = [1,3,2,4,5]

function fun(arr) {

let arrNew = arr.slice()

let result = arrNew.sort()

console.log('result', result)

console.log('arr', arr)

}

fun(arr)

（滑 动可查看）

git clone [email protected]:ramda/ramda.git

（滑 动可查看）

import _curry2 from './internal/_curry2';

var add = _curry2(function add(a, b) {

return Number(a) + Number(b);

});

export default add;

（滑 动可查看）

我们看一下普通的函数 f(a, b, c) 。如果只在调用的时候，传递 a 。会发现，JS 在运行调用时，会将 b 和 c 设置为 undefined 。

从上面可以知道，JS 语言不能原生支持柯里化。非柯里化函数会导致缺少参数的实参变成 undefined 。ramda.js 对函数全部柯里化的目的，就是为了优化上面的场景。

下面，我们看一下 _curry2 代码，这里为了可读性，我对代码进行了改造，我把 _isPlaceholder 去掉了，假设没有占位符，同时把 _curry1 放在函数内，并且对过程进行了相应注释。

二元参数的柯里化，代码如下：

function _curry2(fn) {

return function f2(a, b) {

switch (arguments.length) {

case 0:

return f2;

case 1:

return _curry1(function (_b) {

// 将参数从右到左依次赋值 1 2

// 第一次执行时，是 fn(a, 1)

return fn(a, _b);

});

default:

// 参数长度是 2 时 直接进行计算

return fn(a, b);

}

};

}

function _curry1(fn) {

return function f1(a) {

// 对参数长度进行判断

if (arguments.length === 0) {

return f1;

} else {

// 通过 apply 来返回函数 fn(a, 1)

return fn.apply(this, arguments);

}

};

}

const add = _curry2(function add(a, b) {

return Number(a) + Number(b);

});

// 第一次调用是 fn(a, 1)

let r1 = add(1)

// 第二次调用是 fn(2,1)

let r2 = r1(2)

console.log('sss', r2)

（滑 动可查看）

看了上面对 ramda.js 源码中柯里化的分析，是不是有点收获，就像上面说的，柯里化的目的是为了优化在 JS 原生下的一些函数场景。好处如下：

1. 从上面 add 函数可以知道，通过柯里化，可以让函数在真正需要计算的时候进行计算，起到了延迟的作用，也可以说体现了惰性思想。

2. 通过对参数的处理，做到复用性，从上面的 add 函数可以知道，柯里化把多元函数变成了一元函数，通过多次调用，来实现需要的功能，这样的话，我们就可以控制每一个参数，比如提前设置好不变的参数，从而让代码更加灵活和简洁。

柯里化命名的由来

关于 ramda 中的 compose 和 pipe -- 组合函数/管道函数

实际工作中，会遇到下面这种接收和处理数据的场景。

代码如下：

// 伪代码

res => {

// name 是字符串，age 是数字

if (res.data && res.data.name && res.data.age) {

// TODO:

}

}

（滑 动可查看）

上面这样写，看起来好像也没什么问题，但是经不起分析。比如 name 是数字，age 返回的不是数字。这样的话， if 中的判断是能通过的，但是实际结果并不是想要的。

那该怎么办呢？问题不大，跟着我一步步的优化就 OK 了。

res => {

if (res.data && typeof res.data.name === 'string' && typeof res.data.age === 'number') {

// TODO:

}

}

（滑 动可查看）

// is 是一个对象函数 伪代码

res => {

if (is.object(res.data) && is.string(res.data.name) && is.number(res.data.age)) {

// TODO:

}

}

（滑 动可查看）

// is 是一个对象函数 伪代码

res => {

if (is.string(res.data, data.name) && is.number(res.data, data.age)) {

// TODO:

}

}

（滑 动可查看）

• 有 if 语句存在，可能会有人说，if 语句存在有什么的啊。现在我来告诉你，这块有 if 为什么不好。是因为 if 语句的 () 里面，最终的值都会表现成布尔值。所以这块限制的很死，需要解决 if 语句的问题。

• is 函数功能单一，只能做到返回布尔值，无法完成调试打印错误处理等功能，如果你想打印和调试，你又得在条件分支里面各种 console.log ，然后这些代码依旧过于命令式，无法重用。其实，我们想一下，可以知道，这也是因为用了 if 语句造成的。

说完这些问题，那下面我们来解决吧。

现在，如何将小函数组合成一个完成特定功能的函数呢？

想一下，你会发现，这里需要用到函数的高阶性，要将函数作为参数传入多功能函数中。ok ，现在我们知道实现的大致方向了，下面我们来尝试一下吧。

这里我直接把我的实现过程贴出来了，有相应的注释，代码如下：

/** * 多功能函数 * @param {Mixed} value 传入的数据 * @param {Function} predicate 谓词，用来进行断言 * @param {Mixed} tip 默认值是 value */

function tap(value, predicate, tip = value) {

if(predicate(value)) {

log('log', `{type: ${typeof value}, value: ${value} }`, `额外信息:${tip}`)

}

}

const is = {

undef : v => v === null || v === undefined,

notUndef : v => v !== null && v !== undefined,

noString : f => typeof f !== 'string',

noFunc : f => typeof f !== 'function',

noNumber : n => typeof n !== 'number',

noArray : !Array.isArray,

};

function log(level, message, tip) {

console[level].call(console, message, tip)

}

const res1 = {data: {age: '', name: 'godkun'}}

const res2 = {data: {age: 66, name: 'godkun'}}

// 函数的组合，函数的高阶

tap(res1.data.age, is.noNumber)

tap(res2.data.age, is.noNumber)

（滑 动可查看）

会发现当，age 不是 Number 类型的时候，就会打印对应的提示信息，当是 Number 类型的时候，就不会打印信息。

这样的话，在业务中就可以直接写:

res => {

tap(res.data.age, is.noNumber)

// TODO: 处理 age

}

（滑 动可查看）

不用 if 语句，如果有异常，看一下打印信息，会一目了然的。

当然这样写肯定不能放到生产上的，因为 tap 不会阻止后续操作，我这样写的原因是：这个 tap 函数主要是用来开发调试的。

但是，如果需要保证不符合的数据需要直接在 tap 处终止，那可以在 tap 函数里面加下 return false return true 。然后写成下面代码的形式：

res => {

// if 语句中的返回值是布尔值

if (tap(res.data.age, is.noNumber)) {

// TODO: 处理 age

}

}

（滑 动可查看）

const R = require('ramda')

// 其实这里你可以站在一个高层去把它们想象成函数的重载

// 通过传参的不同来实现不同的功能

const tapThrow = R.curry(_tap)('throw', 'log')

const tapLog = R.curry(_tap)(null, 'log')

function _tap(stop, level, value, predicate, error=value) {

if(predicate(value)) {

if (stop === 'throw') {

log(`${level}`, 'uncaught at check', error)

throw new Error(error)

}

log(`${level}`, `{type: ${typeof value}, value: ${value} }`, `额外信息:${error}`)

}

}

const is = {

undef : v => v === null || v === undefined,

notUndef : v => v !== null && v !== undefined,

noString : f => typeof f !== 'string',

noFunc : f => typeof f !== 'function',

noNumber : n => typeof n !== 'number',

noArray : !Array.isArray,

};

function log(level, message, error) {

console[level].call(console, message, error)

}

const res = {data: {age: '66', name: 'godkun'}}

function main() {

// 不开启异常忽略，使用 console.log 的 tapLog 函数

// tapLog(res.data.age, is.noNumber)

// 开启异常忽略，使用 console.log 的 tapThrow 函数

tapThrow(res.data.age, is.noNumber)

console.log('能不能走到这')

}

main()

（滑 动可查看）

let arr = [1,2,3,4]

for (let i = 0; i < arr.length; i++) {

// TODO: ...

}

（滑 动可查看）

function mian(key) {

let cache = {}

cache.hasOwnProperty(key) ?

main(key) :

cache[key] = main(key)

}

（滑 动可查看）

上面代码是一种最简单的利用纯函数来做缓存的例子。下面实现一个非常完美的缓存函数。

给原生 JS 函数加上自动记忆化的缓存机制

代码如下：

Function.prototype.memorized = () => {

let key = JSON.stringify(arguments)

// 缓存实现

this._cache = this._cache || {}

this._cache[key] = this._cache[key] || this.apply(this, arguments)

return this._cache[key]

}

Function.prototype.memorize = () => {

let fn = this

// 只记忆一元函数

if (fn.length === 0 || fn.length > 1) return fn

return () => fn.memorized.apply(fn, arguments)

}

vivo移动互联网是基于vivo 智能手机所建立的完整移动互联网生态圈，围绕vivo大数据运营，打造包括应用、游戏、资讯、品牌、电商、内容、金融的全方位服务生态，满足海量用户的多样化需求。