【Web技术】988- 深入理解洋葱模型

Bertha 。 2022-10-07 00:40 178阅读 0赞

![f26d1c702b8bd488321ac6fee7608e26.png][]

作者：掘金@苏里

https://juejin.im/post/6844904025767280648

## 前言 ##

本文来由，希望可以剖析中间件的组合原理，从而帮助大家更加理解洋葱模型。

![8d46f51923facb4df2de380bf578ee50.png][]

话不多说，正文如下。

这一段代码来源于 redux 里导出的 compose 函数。我做了一些修改。主要是给匿名函数添加了名称，比如 reducer 和 nextWrapper，主要原因是匿名函数（anonymous）不便于调试。所以 《You-Dont-Know-JS》 的作者 Kyle Simpson 大叔就对箭头函数持保留意见，认为不该乱用，不过跑题了，扯回。

先贴代码如下。

function compose(...funcs) {
      if (funcs.length === 0) {
        return arg => arg;
      }
    
      if (funcs.length === 1) {
        return funcs[0];
      }
    
      return funcs.reduce(function reducer(a, b) {
        return function nextWrapper(...args) {
          return a(b(...args));
        };
      });
    }

接下来全文将基于此函数剖析。

接下来将提供几个简单 redux 中间件，同样，我避免了箭头函数的使用，理由同上。代码如下：

function next(action) {
      console.log("[next]", action);
    }
    
    function fooMiddleware(next) {
      console.log("[fooMiddleware] trigger");
      return function next_from_foo(action) {
        console.log("[fooMiddleware] before next");
        next(action);
        console.log("[fooMiddleware] after next");
      };
    }
    
    function barMiddleware(next) {
      console.log("[barMiddleware] trigger");
      return function next_from_bar(action) {
        console.log("[barMiddleware] before next");
        next(action);
        console.log("[barMiddleware] after next");
      };
    }
    
    function bazMiddleware(next) {
      console.log("[bazMiddleware] trigger");
      return function next_from_baz(action) {
        console.log("[bazMiddleware] before next");
        next(action);
        console.log("[bazMiddleware] after next");
      };
    }

此时如果将以上 foo bar baz 三个中间件组合运行如下：

const chain = compose(fooMiddleware, barMiddleware, bazMiddleware);
    const nextChain = chain(next);
    nextChain("{data}");

以上将会在控制台输出什么？

大家可以思考一下。

...

熟悉中间件运行顺序的同学可能很快得出答案：

[bazMiddleware] trigger
    [barMiddleware] trigger
    [fooMiddleware] trigger
    [fooMiddleware] before next
    [barMiddleware] before next
    [bazMiddleware] before next
    [next] {data}
    [bazMiddleware] after next
    [barMiddleware] after next
    [fooMiddleware] after next

写不出正确答案的同学也无须灰心。这篇文章的目的，正是帮助大家更好理解这一套机制原理。

这种洋葱模型，也即是中间件的能力之强大众所周知，现在在 Web 社区发挥极大作用的 Redux、Express、Koa，开发者利用其中的洋葱模型，构建无数强大又有趣的 Web 应用和 Node 应用。更不用提基于这三个衍生出来的 Dva、Egg 等。所以其实需要理解的是这套实现机制原理，如果光是记住中间件执行顺序，未免太过无趣了，现在让我们逐层逐层解构以上代码来探索洋葱模型吧。

到这里，正文正式开始！

以上代码的灵魂之处在于 Array.prototype.reduce()，不了解此函数的同学强烈建议去 MDN 遛跶一圈 MDN | Array.prototype.reduce()。

reduce 函数是函数式编程的一个重要概念，可用于实现函数组合（compose）

## 组合中间件机制 ##

const chain = compose(fooMiddleware, barMiddleware, bazMiddleware);

以上 compose 传入了 fooMiddleware、barMiddleware、bazMiddleware 三个中间件进行组合，内部执行步骤可以分解为以下两步。

1.  第一步输入参数：a -> fooMiddleware，b -> barMiddleware

执行 reduce 第一次组合，得到返回输出：`function nextWrapper#1(...args) { return fooMiddleware(barMiddleware(...args)) }`

1.  第二步输入参数：a -> function nextWrapper\#1(...args) \{ return fooMiddleware(barMiddleware(...args)) \}，b -> bazMiddleware

执行 reduce 第二次组合，得到返回输出：`function nextWrapper#2(...args) { return nextWrapper#1(bazMiddleware(...args)) }`。

所以 chain 就等于最终返回出来的 nextWrapper。

（这里用了 \#1，\#2 用来指代不同组合的 nextWrapper，实际上并没有这样的语法，须知）

![b89c231d75a6a6a54fdf4f449d0b8ec2.png][] img

## 应用中间件机制 ##

然而此时请留意，所有中间件并没有执行，到目前为止最终通过高阶函数 nextWrapper 返回了出来而已。

因为直到以下这一句，传入 next 函数作为参数，才开始真正的触发了 nextWrapper，开始迭代执行所有组合过的中间件。

const nextChain = chain(next);

我们在上面得知了 chain 最终是形如(...args) => fooMiddleware(barMiddleware(bazMiddleware(...args)))的函数。因此当传入 next 函数时，内部执行步骤可以分为下述几步：

1.  第一步，执行 chain 函数（也即是 nextWrapper\#2），从 compose 的函数组合从内至外，next 参数首先交由 bazMiddleware 函数执行，打印日志后，返回了函数 next\_from\_baz。
2.  第二步，next\_from\_baz 立即传入 nextWrapper\#1，返回了 fooMiddleware(barMiddleware(...args))。因此，barMiddleware 函数接收的期望 next 参数，其实并不是我们一开始的 next 函数了，而是 bazMiddleware 函数执行后返回的 next\_from\_baz。barMiddleware 收到 next 参数开始执行，打印日志后，返回了 next\_from\_bar 函数。
3.  第三步，同理，fooMiddleware 函数接收的期望 next 参数是 barMiddleware 函数执行后返回的 next\_from\_bar。fooMiddleware 收到 next 参数开始执行，打印日志并返回了 next\_from\_foo 函数。

所以此时我们此时可知，运行完 chain 函数后，实际上 nextChain 函数就是 next\_from\_foo 函数。

再用示意图详细描述即为：

![4b5913d54c6cde0bc99ee534ebfbcdd9.png][] img

此时经过以上步骤，控制台输出了下述日志：

[bazMiddleware] trigger
    [barMiddleware] trigger
    [fooMiddleware] trigger

这里的 next\_from\_baz，next\_from\_bar，next\_from\_foo 其实就是一层层的对传入的参数函数 next 包裹。官方说法称之为 Monkeypatching。

我们很清晰的知道，next\_from\_foo 包裹了 next\_from\_bar，next\_from\_bar 又包裹了 next\_from\_baz，next\_from\_baz 则包裹了 next。

如果直接写 Monkeypatching 如下

const prevNext = next;
    next = (...args) => {
      // @todo
      prevNext(...args);
      // @todo
    };

但这样如果需要 patch 很多功能，我们需要将上述代码重复许多遍。的确不是很 DRY。

> Monkeypatching 本质上是一种 hack。“将任意的方法替换成你想要的”。

关于 Monkeypatching 和 redux 中间件的介绍，十分推荐阅读官网文档 Redux Docs | Middleware。

到这里我想出个考题，如下：

function add5(x) {
      return x + 5;
    }
    
    function div2(x) {
      return x / 2;
    }
    
    function sub3(x) {
      return x - 3;
    }
    
    const chain = [add5, div2, sub3].reduce((a, b) => (...args) => a(b(...args)));

请问，chain(1) 输出值？

执行顺序为 sub3 -> div2 -> add5。(1 - 3) / 2 + 5 = 4。答案是 4。

那么再问：

const chain = [add5, div2, sub3].reduceRight((a, b) => (...args) => b(a(...args)));

此时 chain(1) 输出值？还是 4。

再看如下代码：

const chain = [add5, div2, sub3].reverse().reduce((a, b) => (...args) => b(a(...args)));

此时 chain(1) 输出值？仍然是 4。

如果你对上述示例都能很清晰的运算出答案，那么你应该对上文中 chain(next)的理解 ok，那么请继续往下看。

## 洋葱模型机制 ##

nextChain("{data}");

终于重头戏来了，nextChain 函数来之不易，但毫无疑问，它的能力是十分强大的。（你看，其实在 redux 中，这个 nextChain 函数其实就是 redux 中的 dispatch 函数。）

文章截止目前为止，我们得知了 nextChain 函数即为 next\_from\_foo 函数。

因此下述的执行顺序我将用函数堆栈图给大家示意。

![fd927eeb63ec62cc6d5936e07704d606.png][] img

依次执行，每当执行到 next 函数时，新的 next 函数入栈，循环往复，直到 next\_from\_baz 为止。函数入栈的过程，就相当于进行完了洋葱模型从外到里的进入过程。

控制台输出日志：

[fooMiddleware] before next
    [barMiddleware] before next
    [bazMiddleware] before next

函数入栈直到最终的 next 函数，我们知道，next 函数并没有任何函数了，也就是说到达了终点。

接下来就是逐层出栈。示意图如下

![923f3d71baaa58ac71d312f25cacb52b.png][] img

控制台输出日志：

[next] {data}
    [bazMiddleware] after next
    [barMiddleware] after next
    [fooMiddleware] after next

函数出栈的过程，就相当于洋葱模型从里到外的出去过程。

上述是函数堆栈的执行顺序。而下述示意图是我整理后帮助大家理解的线性执行顺序。每当执行到 next(action)的时候函数入栈，原 next 函数暂时停止执行，执行新的 next 函数，正如下图弯曲箭头所指。

![4621913a30bfd739016472860d5e18b8.png][] img

上图，代码从上至下运行，实际上就是调用栈的一个程序控制流程。所以理论上无论有多少个函数嵌套，都可以等同理解。

我们修改一开始的洋葱模型，示例如下：

![84088af08c1edee680af3f20b25affe0.png][] img

## 小结 ##

redux 的中间件也就是比上述示例的中间件多了一层高阶函数用以获取框架内部的 store。

const reduxMiddleware = store => next => action => {
      // ...
      next(action);
      // ...
    };

而 koa 的中间件多了 ctx 上下文参数，和支持异步。

app.use(async (ctx, next) => {
      // ...
      await next();
      // ...
    });

你能想到大致如何实现了么？是不是有点拨开云雾见太阳的感觉了？

如果有，本文发挥了它的作用和价值，笔者将会不甚荣幸。如果没有，那笔者的表达能力还是有待加强。

![cd685e9b2dcf3e312cb6ca409f683986.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![80f47572b30f87dd47fdbab1f1a9f82f.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[f26d1c702b8bd488321ac6fee7608e26.png]: /images/20221005/9422f95903bd42bdaff19fa1662a6f19.png
[8d46f51923facb4df2de380bf578ee50.png]: /images/20221005/328b6538052546579570ea965eb899b7.png
[b89c231d75a6a6a54fdf4f449d0b8ec2.png]: /images/20221005/90b9bdd8fd68463eaeca2ef70450c03d.png
[4b5913d54c6cde0bc99ee534ebfbcdd9.png]: /images/20221005/b60c7b7f2b4d4c8cb6bd72e3baa4c47b.png
[fd927eeb63ec62cc6d5936e07704d606.png]: /images/20221005/ff14974cf9e445edb3f0764e3bec1239.png
[923f3d71baaa58ac71d312f25cacb52b.png]: /images/20221005/54615c7ffe6d48d7b589e917145515f6.png
[4621913a30bfd739016472860d5e18b8.png]: /images/20221005/80a947be241144c4b9112435e12f8d33.png
[84088af08c1edee680af3f20b25affe0.png]: /images/20221005/36ca96b92b28490781edf0025d1c3db1.png
[cd685e9b2dcf3e312cb6ca409f683986.gif]: /images/20221005/c4604d92807d4d80ba4476eff85e3ea2.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[80f47572b30f87dd47fdbab1f1a9f82f.gif]: /images/20221005/888f1724b8f9414193ba0418d7a32864.png