如何用函数式编程思想优化业务代码，这就给你安排上！

导语 | 本文将介绍函数式编程中的几个核心概念，以及使用相关的函数式编程来优化业务代码的实践方案。

一、前言

日常开发中经常会遇到流程分支多、流程长的业务逻辑，如果排期较为紧张的话通常会选择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 开发工作。致力于开发体验提升，在代码优化有较为丰富的经验。

推荐阅读

---