在实现 compose 前，我们先来了解一下什么洋葱模型。

洋葱模型

洋葱模型，它就是 Koa 中间件的一种串行机制，并且是支持异步的。Koa中间件机制就是函数式组合概念 Compose的概念，将一组需要顺序执行的函数复合为一个函数，外层函数的参数实际是内层函数的返回值。洋葱圈模型可以形象表示这种机制。

下面是官方的一张图，即著名的洋葱圈模型：
image.png

我们再来看一下中间件的执行顺序：
v2-b353e7e458d7542b366c1139b01b1a07_b.gif

下面是一个表达 “洋葱模型” 的经典案例：

  1. const Koa = require("koa");
  3. const app = new Koa();
  5. app.use(asycn (ctx, next) => {
  6.     console.log(1);
  7.     await next();
  8.     console.log(2);
  9. });
  11. app.use(asycn (ctx, next) => {
  12.     console.log(3);
  13.     await next();
  14.     console.log(4);
  15. });
  17. app.use(asycn (ctx, next) => {
  18.     console.log(5);
  19.     await next();
  20.     console.log(6);
  21. });
  23. app.listen(3000);

根据中间件的执行顺序，上面代码输出的结果为：1 => 3 => 5 => 6 => 4 => 2

compose 实现

洋葱圈的核心实现是 compose 函数，我们来盘点一下 compose 的各种实现。

Koa 中 compose 的实现方式

koa 递归实现

  1. module.exports.compose = (middlewares = []) => {
  2.       // 保证 middlewares 为数组
  3.     if (!Array.isArray(middlewares)) {
  4.         middlewares = Array.from(arguments);
  5.     }
  7.       // 保证 middlewares 的每一项为函数
  8.     if (middlewares.some(fn => typeof fn !== 'function')) {
  9.         throw new TypeError('Middleware must be composed of functions!');
  10.     }
  12.     return function () {
  13.         // 取出第一个中间件函数执行
  14.         return dispatch(0);
  15.            // 递归函数
  16.         function dispatch(i) {
  17.               // 取出第 i 个中间件并执行
  18.             let fn = middlewares[i];
  19.             // 中间件函数不存在或者所有的中间件函数都执行完，返回成功态的 Promise
  20.             if (!fn) {
  21.                 return Promise.resolve();
  22.             }
  23.             // 执行后返回成功态的 Promise
  24.             return Promise.resolve(
  25.                 fn(function next() { // 执行下一个中间件函数
  26.                     return dispatch(i + 1);
  27.                 })
  28.             );
  29.         }
  30.     };
  31. };

Koa Reduce 实现

  1. module.exports.compose = (middlewares = []) => () => {
  2.     // 保证 middlewares 为数组
  3.     if (!Array.isArray(middlewares)) {
  4.         middlewares = Array.from(arguments);
  5.     }
  6.     // 保证 middlewares 内的每一项为函数
  7.     if (middlewares.some(fn => typeof fn !== 'function')) {
  8.         throw new TypeError('Middleware must be composed of functions!');
  9.     }
  11.     if (middlewares.length === 0) {
  12.           // 没有中间件函数时返回 成功态的Promise
  13.         return Promise.resolve();
  14.     } else if (middlewares.length === 1) {
  15.           // 只有一个中间件函数时，执行当前的中间件函数
  16.         return Promise.resolve(middlewares[0].call(null, () => Promise.resolve()));
  17.     } else {
  18.         // compose reduce实现
  19.         return middlewares
  20.             .map(item => item)
  21.             .reverse()
  22.             .reduce((pre, cur) => () => cur(() => pre(() => {})))();
  23.     }
  24. };

Koa Class 实现

  1. class ComposeClass {
  2.     constructor() {
  3.         this.middlewares = [];
  4.         this.index = 0;
  5.     }
  7.     middleware(middlewares) {
  8.         this.middlewares = middlewares;
  9.         return this.dispatch(this.index);
  10.     }
  12.     dispatch(index) {
  13.         const fn = this.middlewares[index];
  14.         if (!fn) {
  15.             return Promise.resolve();
  16.         }
  17.         this.index += 1;
  18.         return Promise.resolve(fn(this.next.bind(this)));
  19.     }
  20.         // 指定下一个中间件的执行
  21.     next() {
  22.         return this.dispatch(this.index);
  23.     }
  24. }
  26. module.exports.compose = (middlewares = []) => {
  27.     if (!Array.isArray(middlewares)) {
  28.         middlewares = Array.from(arguments);
  29.     }
  31.     if (middlewares.some(fn => typeof fn !== 'function')) {
  32.         throw new TypeError('Middleware must be composed of functions!');
  33.     }
  35.     return () => {
  36.         return new ComposeClass().middleware(middlewares);
  37.     };
  38. };

express 中的 compose 实现

express 递归实现

  1. module.exports.compose = (middlewares = []) => {
  2.       // 
  3.     if (!Array.isArray(middlewares)) {
  4.         middlewares = Array.from(arguments);
  5.     }
  7.     if (middlewares.some(fn => typeof fn !== 'function')) {
  8.         throw new TypeError('Middleware must be composed of functions!');
  9.     }
  11.     return async () => {
  12.         let idx = 0;
  13.         async function next() {
  14.             if (idx === middlewares.length) {
  15.                 return Promise.resolve();
  16.             }
  17.             if (idx < middlewares.length) {
  18.                 return Promise.resolve(middlewares[idx++](next));
  19.             }
  20.         }
  21.         return await next();
  22.     };
  23. };

Redux 中的 compose 实现

Redux Reduce 实现

  1. module.exports.compose = (middlewares = []) => {
  2.     if (!Array.isArray(middlewares)) {
  3.         middlewares = Array.from(arguments);
  4.     }
  6.     if (middlewares.length === 0) {
  7.         return arg => arg;
  8.     }
  10.     if (middlewares.some(fn => typeof fn !== 'function')) {
  11.         throw new TypeError('Middleware must be composed of functions!');
  12.     }
  14.     return (next = async () => {}) => middlewares.reduce((a, b) => arg => a(() => b(arg)))(next);
  15. };

Redux ReduceRight 实现

  1. /**
  2.  * @description: 利用reduceRight实现洋葱圈
  3.  * @param {middlewares：中间件数组}
  4.  * @return {高阶函数}
  5.  */
  6. module.exports.compose = (middlewares = []) => {
  7.     if (!Array.isArray(middlewares)) {
  8.         middlewares = Array.from(arguments);
  9.     }
  11.     if (middlewares.some(fn => typeof fn !== 'function')) {
  12.         throw new TypeError('Middleware must be composed of functions!');
  13.     }
  15.     // reduceRight：从右向左做累加，第二个参数为初始值
  16.     // 比如：middlewares = [f1, f2, f3]，执行过程如下：
  17.     // 第一次 --> a = () => {}，                    b = f3，结果：() => f3(() => {})
  18.     // 第二次 --> a = () => f3(() => {})，          b = f2，结果：() => f2(() => f3(() => {}))
  19.     // 第三次 --> a = () => f2(() => f3(() => {}))，b = f1，结果：() => f1(() => f2(() => f3(() => {})))
  20.     return () =>
  21.         middlewares.reduceRight(
  22.             (a, b) => () => b(a),
  23.             () => {}
  24.         )();
  25. };

Redux ReduxRight Promise 实现

  1. module.exports.compose = (middlewares = []) => {
  2.     if (!Array.isArray(middlewares)) {
  3.         middlewares = Array.from(arguments);
  4.     }
  6.     if (middlewares.some(fn => typeof fn !== 'function')) {
  7.         throw new TypeError('Middleware must be composed of functions!');
  8.     }
  10.     return () =>
  11.         Promise.resolve(
  12.             middlewares.reduceRight(
  13.                 (a, b) => () => Promise.resolve(b(a)),
  14.                 () => Promise.resolve()
  15.             )()
  16.         );
  17. };

责任链模式实现

  1. class Handle {
  2.     constructor(middleware) {
  3.         this.middleware = middleware;
  4.         this.next = null;
  5.     }
  7.     setNext(nextHandle) {
  8.         this.next = nextHandle;
  9.     }
  10. }
  12. module.exports.compose = (middlewares = []) => {
  13.     if (!Array.isArray(middlewares)) {
  14.         middlewares = Array.from(arguments);
  15.     }
  17.     if (middlewares.some(fn => typeof fn !== 'function')) {
  18.         throw new TypeError('Middleware must be composed of functions!');
  19.     }
  21.     const handles = [];
  22.     for (let i = 0; i < middlewares.length; i++) {
  23.         const handle = new Handle(middlewares[i]);
  24.         handles.push(handle);
  25.     }
  27.     for (let i = 0; i < handles.length; i++) {
  28.         if (handles[i + 1]) {
  29.             handles[i].setNext(handles[i + 1]);
  30.         }
  31.     }
  33.     return function func() {
  34.         return innerFunc(handles[0]);
  36.         function innerFunc(currentHandle = handles[0]) {
  37.             if (!currentHandle) {
  38.                 return Promise.resolve();
  39.             }
  40.             return Promise.resolve(currentHandle.middleware(() => innerFunc(currentHandle.next)));
  41.         }
  42.     };
  43. };

List 列表递归实现

  1. const isArray = action => Array.isArray(action)?true:false;
  2. const isFunction = middlewares => middlewares.every(middleware => typeof middleware === 'function');
  4. module.exports.compose = (args) => async () => {
  5. let middlewares = [...args]
  6.     if(!isArray(middlewares)) throw new TypeError('middlewares must be Array');
  7.     if(!isFunction(middlewares)){
  8.       throw new TypeError('middleware must be Function')
  9.     }
  10.     if(middlewares.length === 0){
  11.       return null;
  12.     }
  13.     //生成链表
  14.     //{next:{fn:b,next:{fn:next}}} 
  15.     function getStatck(statck){
  16.         if(middlewares.length>0){
  17.           let fn = middlewares.shift()
  18.           statck.next = { fn }  
  19.           getStatck(statck.next)
  20.           return statck;
  21.         } 
  22.     }
  23.    let statck = getStatck({});
  24.    let filber = statck.next;
  25.   return dispatch(filber)
  26.     function dispatch(filber){
  27.         if(!filber){
  28.           return () =>{}
  29.         }
  30.        return filber.fn(next = async()=>{
  31.          await dispatch(filber.next)
  32.         })
  33.     }
  34.   }

参考资料：https://github.com/su37josephxia/compose-awesome