如何用函数式编程思想优化业务代码，这就给你安排上！
导语 | 本文将介绍函数式编程中的几个核心概念，以及使用相关的函数式编程来优化业务代码的实践方案。
一、前言
日常开发中经常会遇到流程分支多、流程长的业务逻辑，如果排期较为紧张的话通常会选择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 替换为 reduceRightreturn 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 = -1return dispatch(0)function dispatch (i) {if (i <= index) return Promise.reject(new Error('next() called multiple times'))index = ilet fn = middleware[i]if (i === middleware.length) fn = nextif (!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 Somethingconsole.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 开发工作。致力于开发体验提升，在代码优化有较为丰富的经验。
推荐阅读
程序员如何把你关注的内容推送到你眼前？揭秘信息流推荐背后的系统设计