导语 | 本文将介绍函数式编程中的几个核心概念，以及使用相关的函数式编程来优化业务代码的实践方案。
一、前言
日常开发中经常会遇到流程分支多、流程长的业务逻辑，如果排期较为紧张的话通常会选择if else、switch case一把梭。然而随着迭代的推进，会有越来越多的新增流程分支或者需求变更，长此以往下去大多就成了 “祖传代码”。
随着EPC的落地，对代码中函数圈复杂度提出了要求，许多同学为了规避代码检查选择拆分函数，一行代码分成三个函数写，或者把原来的逻辑分支改成用映射匹配，这样看来虽然圈复杂度确实降低了，但是对代码的可维护性实际上是产生了损耗的。由于我最近做的需求大多也是这样的场景，于是开始尝试找寻一种模式来解决这个问题。
下图为流程图示例，实际业务中的情况远比下图要复杂：
二、核心概念
（一）compose
compose是函数式编程中使用较多的一种写法，它把逻辑解耦在各个函数中，通过compose的方式组合函数，将外部数据依次通过各个函数的加工，生成结果。在此处我们不对函数式编程进行展开，感兴趣的同学可以学习函数式编程指北。
（参考网址：https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/）
下方代码示例是当我们不使用compose希望组合使用多个函数时最简单的调用方式。这里我们只有3个函数，看起来还比较直观，那么如果当我们有20个函数时呢？
const funcA = (message) => message + " A";
const funcB = (message) => message + " B";
const funcC = (message) => message + " C";
const ret = funcC(funcB(funcA("Compose Example")));
console.log(ret); // Compose Example A B C如下便是compose最基础的实现，尽管大部分对于compose的定义，以及其他一些fp工具库（比如ramda、lodash-fp）对compose的定义和实现都是从右向左，但是我们这里选择右倾实现，如果你希望保持左倾的话，可以将下方函数中的reduce替换为reduceRight。
const compose = (...funcs) => {
if (funcs.length === 0) {
return (args) => args;
}
if (funcs.length === 1) {
return funcs[0];
}
// 如果要使用左倾实现，可以将 reduce 替换为 reduceRight
return funcs.reduce((a, b) => (...args) => b(a(...args)));
};使用compose组合函数后看看如何使用：
const fn = compose(funcA, funcB, funcC);
const ret = fn("Compose Example");
console.log(ret); // Compose Example A B C相比于环环相扣的嵌套调用，使用compose将多个函数组合生成为单个函数调用，使我们的代码无论从可读性还是可扩展性上都得到了提升。
（二）异步 compose
实际的应用场景我们不可能一个流程内全部为同步代码，可能会需要调用接口获得数据后再进入下一个流程，也可能会需要调用jsApi和客户端进行通信展示相应的交互。
如果要将compose改造为支持异步调用也非常简单，只需修改一行代码即可。可以选择用Promise进行扩展，这里我们为了保持同步的代码风格，选择使用async/await进行扩展，使用这种方式的话记得使用try catch兜底错误。
const asyncCompose = (...funcs) => {
if (funcs.length === 0) {
return (args) => args;
}
if (funcs.length === 1) {
return funcs[0];
}
// 只需要修改这一行即可
return funcs.reduce((a, b) => async (...args) => b(await a(...args)));
};改造一下我们的测试代码，看看效果：
// 支持异步函数的调用
const funcA = (message) => new Promise((resolve, reject) => {
setTimeout(() => resolve(message + " A"), 1000);
});
const funcB = (message) => Promise.resolve(message + " B");
// 依然支持同步函数的调用
const funcC = (message) => message + " C";
const fn = compose(funcA, funcB, funcC);
(async() => {
const ret = await fn("Compose Example");
console.log(ret); // Compose Example A B C
})();三、实践方案
（一）koa-compose
在上面我们解决了异步函数的组合调用，在实际应用的场景中会发现，业务流程（funcs）有时候并不需要全部执行完毕，当接口的返回值非0，或者用户没有权限进入下一个流程时，我们需要提前结束流程的执行，只有当用户满足条件时才可以进入下一个流程。
这里首先想到的设计方式即是koa的中间件模型，koa最核心的功能就是它的中间件机制，中间件通过app.use注册，运行的时候从最外层开始执行，遇到next后加入下一个中间件，执行完毕后回到上一个中间件，这就是大家耳熟能详的洋葱模型。
koa大家基本都用过，基于middleware的设计模式也都非常熟悉了，同koa middleware保持相近的模式可以减少理解成本和心智负担。但是我们并不需要app.use的注册机制，因为在代码中不同的场景我们可能会需要组合不同的中间件，相比注册机制，我更倾向于用哪些中间件则传入哪些。
koa中间件引擎源码：
function compose (middleware) {
if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
for (const fn of middleware) {
if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
}
return function (context, next) {
// last called middleware #
let index = -1
return dispatch(0)
function dispatch (i) {
if (i <= index) return Promise.reject(new Error('next() called multiple times'))
index = i
let fn = middleware[i]
if (i === middleware.length) fn = next
if (!fn) return Promise.resolve()
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err)
}
}
}
}koa已经将上方的中间件引擎提取为单独的koa-compose，我们可以直接从npm安装。
$ npm install koa-compose
# 或者
$ yarn add koa-compose使用方式：
import compose from 'koa-compose';
import middlewares from './middleware';
import { Context, ContextStatus } from '@/types/libs/auth.d';
const run = async (...middlewares) => {
const context: Context = {
status: ContextStatus.pending,
data: {},
};
try {
const composition = compose(middlewares);
await composition(context);
} catch (e) {
console.error(e);
context.status = ContextStatus.rejected;
}
return context;
};
export * from './middleware';
export default run;（二）middleware（中间件设计）
最简单的例子：
中间件的设计我们也可以参考koa middleware来设计，下方为一个最简单的示范，检查用户是否登录，如果登录则继续执行下一个中间件，如果未登录的话则拉起jsApi的登录框。
export const checkIsLogin = async (ctx, next) => {
console.log('checkIsLogin start');
ctx.data.userInfo = await getUserInfo();
if (!ctx.data.userInfo.uid) {
ctx.data.userInfo = await jsApi.login();
}
if (!ctx.data.userInfo.uid) {
return;
}
await next();
console.log('checkIsLogin end');
};支持传参的中间件：
export const checkIsLogin = (options) => async (ctx, next) => {
// TODO Something
console.log(options);
await next();
// TODO Something
};如何判断中间件是否全部执行成功或者提前结束？
我们需要在ctx.status上记录全部流程执行完毕的状态，以便做最后的处理，这里参考Promise的实现，选择用pending、fulfilled、rejected 来表示。
export enum ContextStatus {
pending = 'pending',
fulfilled = 'fulfilled',
rejected = 'rejected',
}如果在每个中间件内都需要手动设置ctx.status成功或者失败，则会产生很多重复代码，为了我们的代码简洁，需要增加一个机制，可以自动检查所有的中间件是否全部都正确的执行完毕，然后将结束状态设置为成功，可以自动检查是否有中间件提前结束，将结束状态设置为失败。我们需要新增2个通用中间件如下，分别置于全部中间件的开头和结尾处。
1.检查是否所有的中间件都从前到后执行完毕：
import { ContextStatus } from '@/types/libs/auth.d';
const checkIsEveryDone = async (ctx) => {
console.log('checkIsEveryDone start');
if (ctx.status === ContextStatus.pending) {
ctx.status = ContextStatus.fulfilled;
}
console.log('checkIsEveryDone start');
};
export default checkIsEveryDone;2.检查是否有中间件没有执行下去，提前结束：
import { ContextStatus } from '@/types/libs/auth.d';
const checkIsEarlyTurn = async (ctx, next) => {
console.log('checkIsEarlyTurn start');
await next();
if (ctx.status !== ContextStatus.fulfilled) {
ctx.status = ContextStatus.rejected;
}
console.log('checkIsEarlyTurn end');
};
export default checkIsEarlyTurn;作者简介
王宏宇
腾讯新闻前端工程师
腾讯新闻前端工程师，目前于腾讯新闻从事相关 Web 开发工作。致力于开发体验提升，在代码优化有较为丰富的经验。
