[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","maquannene","page",1,"limit",20,"total","id","38022","avatar_url","https://avatars3.githubusercontent.com/u/8757564?v=4","githubUsername","create_at","2019-08-28 01:50:08.74","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":50,"_51":52},"41546","author_id","tab","share","content","之前开发 web 端，使用 Egg 框架，期间实现的一些功能例如：权限检测、操作日志上报等都是基于框架的 middleware 机制件完成的。虽然最后完成了功能，但其实对中间件真正的实现机制、运行时序还不能做到完全的理解。\r\n\r\nEgg 是基于 Koa 实现的，Koa 的代码量非常少，加起来也就 1000 多行，涉及到中间件核心的部分，也就不到 100 行，如果有耐心可以直接读 [Koa 源码](https://github.com/koajs/koa) 学习。\r\n\r\n我在读完 Koa 中间件代码的后，其实也就只能算是看懂，但是并不知道这个机制是怎么一点一点演变过来的，所以接下来我就试图通过我自己的理解，来讲述一下这个演变的过程。\r\n\r\n### 一、最初阶段\r\n\r\n一个最简单的 web 框架，只用实现 request response 之间的部分，即：\r\n* 接收 request\r\n* 处理 dispose (这一部分)\r\n* 返回 response\r\n\r\n例如这是一个简单的 dispose：\r\n\r\n```javascript\r\nconst dispose = () => {\r\n console.log('处理请求，然后返回')\r\n}\r\ndispose()\r\n```\r\n\r\n直到渐渐有了一个需求，我们需要在 dispose 前后加一些日志，这时代码演变成了这样：\r\n\r\n```javascript\r\nconst dispose = () => {\r\n console.log('日志 >>>')\r\n console.log('处理请求，然后返回')\r\n console.log('日志 <<<')\r\n}\r\ndispose()\r\n```\r\n\r\n这样代码有一个很大的问题，就是非 dispose 的逻辑侵入到了 dispose 的函数中，所以再改一下：\r\n```javascript\r\nconst dispose = () => {\r\n console.log('处理请求，然后返回')\r\n}\r\n\r\n// 这里将 log 放在 dispose 外部，不侵入 dispose 的实现\r\nconsole.log('日志 >>>')\r\ndispose()\r\nconsole.log('日志 <<<')\r\n```\r\n\r\n再将前后的 log 进行封装，最终代码演变成了这样：\r\n```javascript\r\nconst dispose = () => {\r\n console.log('处理请求，然后返回')\r\n}\r\n\r\nconst log = next => {\r\n console.log('日志 >>>')\r\n next()\r\n console.log('日志 <<<') \r\n}\r\nconst disposeWithLog = log(dispose)\r\ndisposeWithLog()\r\n```\r\n\r\n### 二、中级阶段\r\n\r\n除了日志需求，又收到还需要加入打点需求，那么同理实现；\r\n```javascript\r\nconst track = next => {\r\n console.log('打点 >>>')\r\n next()\r\n console.log('打点 <<<') \r\n}\r\ncosnt disposeWithTrackWithLog = track(disposeWithLog)\r\ndisposeWithTrackWithLog()\r\n```\r\n\r\n渐渐的，类似这种需求越来越多，必须要实现一套机制来支持这种需求，我们试图用一个函数来合并所有的类似 log、track 这样的子流程，此时我们管这些子流程叫做中间件。最终达到合并之后按顺序执行，执行顺序为先进后出，也就是经典的多层嵌套洋葱圈模型：\r\n\r\n```javascript\r\nconst combine = (middleware1, middleware2) => next => {\r\n return middleware1(() => {\r\n middleware2() => {\r\n next()\r\n }\r\n })\r\n}\r\nconst disposeWithTrackWithLog = combine(log, track)(next)\r\n```\r\n\r\n对于 combine 实现，发现 middlewareX(() => {...}) 部分其实上是一样的，所以可以使用递归，来优化 combine 代码，做到对 middlewares 数组的支持，实现如下:\r\n```javascript\r\nconst combine = middlewares => next => {\r\n const dispatch = mids => {\r\n const [middleware, ...rest] = mids\r\n middleware(() => {\r\n if(rest.length === 0) {\r\n next()\r\n }\r\n else {\r\n dispatch(rest)\r\n }\r\n })\r\n }\r\n return () => dispatch(middlewares)\r\n}\r\n```\r\n在 koa 中，combine 的过程叫做 compose，并且在此基础上，加入上下文 ctx 这个常用的变量，最终的实现如下：\r\n```javascript\r\n// 中间件\r\nconst log = (next, ctx) => {\r\n console.log('日志 >>>')\r\n next()\r\n console.log('日志 <<<') \r\n}\r\n\r\n// 中间件\r\nconst track = (next, ctx) => {\r\n console.log('打点 >>>')\r\n next()\r\n console.log('打点 <<<') \r\n}\r\n\r\n// 中间件组合\r\nconst compose = middlewares => (next, ctx) => {\r\n const dispatch = mids => {\r\n const [middleware, ...rest] = mids\r\n middleware(() => {\r\n if(rest.length === 0) {\r\n next(ctx)\r\n }\r\n else {\r\n dispatch(rest, ctx)\r\n }\r\n })\r\n }\r\n return () => dispatch(middlewares)\r\n}\r\n\r\nconst newDispose = compose([log, track])(dispose, 'ctx')\r\nnewDispose()\r\n```\r\n最终，中间件的机制基本就完成了，Koa 的实现大致就是这样，除此之外，Koa 还增加了 promise，但其实原理还是一样的；\r\n\r\n### 三、终极版本\r\n\r\n当我还在回味 koa 的实现的时候，又想到 Redux 也有类似的机制，在读了 Redux 的源码之后，感叹其实现的核心代码更加简洁;\r\n\r\n仔细看上面的中级阶段代码的实现逻辑，其实就是每次从中间件数组中移出第一个元素用来执行，并且把剩下的中间件当做参数传入继续递归执行。这种剥壳式的调用方式，联想到一个函数，Array.reduce，Redux 就是使用 reduce 实现的终级优雅版本的 compose 函数：\r\n\r\n```javascript\r\nconst compose = middlewares => {\r\n return middlewares.reduce(result, middlreware => (...args) => result(middleware(...args)))\r\n}\r\n```\r\n这里 Redux 没有把 next 封装到 compose 中，可以借助这个高灵活性，通过小改动，可以轻松加入 ctx 做到和 Koa 一样支持上下文，并且还可以扩展支持 action 参数，Redux 这个中间件实现方式可以说是非常优雅了：\r\n\r\n```javascript\r\nconst compose = middlewares => {\r\n // 这里我个人认为 next, ...rest 这种实现兼容性更强，而不是 Redux 中的 ...args 的实现，不知道作者怎么想的；\r\n // 我把这个改动提了一个 pr 给 Redux，但是被拒了，个人感觉这个应该是 Redux 的一个 bug，因为 Redux 的实现并不能保证每个中间件接收到的参数都是相同的；\r\n return middlewares.reduce(result, middlreware => (next, ...rest) => result(middleware(next, ...rest), ...rest))\r\n}\r\n\r\n// 中间件\r\nconst log = (next, ctx) => action => {\r\n console.log('日志 >>>')\r\n next(action)\r\n console.log('日志 <<<') \r\n}\r\n\r\n// 中间件\r\nconst track = (next, ctx) => action => {\r\n console.log('打点 >>>')\r\n next(action)\r\n console.log('打点 <<<') \r\n}\r\n\r\nconst newDispose = compose([log, track])(dispose, 'ctx')\r\nnewDispose('action')\r\n```\r\n\r\nRedux 也在其官网中，也描述了 middleware 的 [演变过程](https://redux.js.org/advanced/middleware)，写的非常流畅易懂，有兴趣可以读一下，了解事物的演进过程，有助于更好的理解事物的本质。","title","尝试理解 Koa、Redux middleware 的演进过程","last_reply_at","2019-08-28 09:00:02.561","good","top",3,"visit_count",4526,"2019-08-28 01:52:14.179","author",{"_13":14,"_22":23}]