bff必修课——洋葱模型

2,940 阅读6分钟

前言

接下来又是我最常说的一句话,“好久都没写文章了”。确实是这样,自从实习之后每天就是连轴转,学习时间都很少,虽然工作的时候都会从中学到很多东西,只是闲暇之余的学习时间变少了。一到周末就只想续命,其他什么都不想干,所以更不可能学习。
最近组里没什么事,下周才会有需求,就去学习了一下组里的两个项目,一个是富文本编辑器还有一个就是bff。富文本太难了,看了1%都不到就看不懂了,直接开始怀疑人生。就跟你考英语的时候一样,每个字母和单词都能看得懂,但阅读理解就是写不对,愣是不知道它在干什么。所以我就去看bff了,bff还是要容易点,它其实就是一种node的用法,不过我自己也还没弄明白,等我弄明白再给你们介绍一下,到时候大家记得提醒我哈,提醒我回来补基础概念。

洋葱模型

洋葱模型(Onion Architecture)在构建后端服务(BFF, Backend for Frontend)时是一种常用的架构模式。它是由 Jeffrey Palermo 提出的一种分层架构设计模式,它将应用程序分为多个不同的层,每一层都有自己的职责和依赖关系。这种设计有助于提高应用程序的灵活性、可测试性和可维护性。在bff的场景中有比较广泛的使用,具体表现在以下几个方面:

  1. 关注点分离: 洋葱模型将应用程序划分为不同的层,如领域层、应用服务层、基础设施层等,有利于关注点的分离和关注点的管理。
  2. 依赖倒置: 内层模块不依赖外层模块,而是通过接口或抽象类进行依赖。这种依赖倒置有利于提高模块的灵活性和可测试性。
  3. 可重用性: 由于分层的设计,BFF 中的领域模型、应用服务等可以被其他应用服务复用,提高了代码的可复用性。
  4. 易测试: 由于各层之间通过接口或抽象类耦合,可以很容易地对每一层进行单元测试和集成测试。

demo展示

先来看一个洋葱模型的demo,这里我是用koa写的,koa本身就是支持洋葱模型的,后面会带大家手搓一个

const Koa = require('koa')
const app = new Koa()

// 中间件1
app.use((ctx, next) => {
    console.log('我是你爹');
    next()
    console.log('我是你爹的爹');
})

// 中间件2
app.use((ctx, next) => {
    console.log('你是我儿子')
    next()
    console.log('你是我儿子的儿子');
})

// 中间件3
app.use((ctx, next) => {
    console.log('我是你爷爷');
    next()
    console.log('我是你爷爷的爷爷');
})

app.listen(2003, () => {
    console.log('serve is listen');
})

输出的结果是:

image.png

在 koa 中,中间件被 next() 方法分成了两部分。next() 方法上面部分会先执行,下面部门会在后续中间件执行全部结束之后再执行。可以通过下图直观看出

下载.jpeg

在洋葱模型中,每一层相当于一个中间件,用来处理特定的功能。其处理顺序先是 next() 前请求(Request,从外层到内层)然后执行 next() 函数,最后是 next() 后响应(Response,从内层到外层),也就是说每一个中间件都有两次处理时机

images.jpeg

深入剖析洋葱模型

我们从demo开始逐步分析,这里只能看到我们调用了app的use方法,在koa中,use其实就只做了一件事,就是维护middleware(中间件)数组,用来添加中间件

  use(fn) {
    this.middleware.push(fn);
    return this;
  }

除了use,我们肉眼可见的就只有listen方法,在启动一个node服务的时候,使用listen会监听指定的端口,然后koa会调用内部的callback在callback内部会调用compose函数,这个compose就是洋葱模型的核心。

compose 函数引用的是 koa-compose 这个库。其实现如下所示:

function compose (middleware) {
  // ...省略部分代码
  return function (context, next) {
    let index = -1
    // 一开始的时候传入为 0,后续会递增
    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
      // 当 fn 为空的时候,就会开始执行 next() 后面部分的代码
      if (!fn) return Promise.resolve()
      try {
        // 执行中间件,留意这两个参数,都是中间件的传参,第一个是上下文,第二个是 next 函数
        // 也就是说执行 next 的时候也就是调用 dispatch 函数的时候
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

代码其实不难,只要把思路搞明白就行,这个写的还是过于复杂了,等会咱写个阉割版的。

当我们执行第一次的时候,调用的是 dispatch(0),这个时候 i 为 0,fn 为第一个中间件函数。并执行中间件,留意这两个参数,都是中间件的传参,第一个是上下文,第二个是 next 函数。也就是说中间件执行 next 的时候也就是调用 dispatch 函数的时候,这就是为什么执行 next 逻辑的时候就会执行下一个中间件的原因

当第二、第三次执行 dispatch 的时候,跟第一次一样,分别开始执行第二、第三个中间件,执行 next() 的时候开始执行下一个中间件。

当执行到第三个中间件的时候,执行到 next() 的时候,dispatch 函数传入的参数是 3,fnundefined。这个时候就会执行if (!fn) return Promise.resolve(),第三个中间件的next()就执行完了,然后就会执行next()后面的代码,然后是第二个、第一个,从而形成了洋葱模型。 具体过程如下:花括号里面就是next()的执行过程

image.png

阉割版compose

知道了compose的思路和执行过程之后,我们很容易模仿出一个阉割版的,我写的简单点,方便大家理解:

const middleware = []
// 中间件1
const mw1 = function(ctx, next) {
    console.log('叫爸爸');
    next()
    console.log('叫爹');
}

const mw2 = function(ctx, next) {
    console.log('儿子好');
    next()
    console.log('孙子好');
}

function use(mw) {
    middleware.push(mw)
}

function compose(middleware) {
    return (ctx, next) => {
        return dispatch(0)
        function dispatch(i) {
            const fn = middleware[i]
            if (!fn) return
            return fn(ctx, dispatch.bind(null, i+1))
        }
    }
}

use(mw1)
use(mw2)
ctx = {}
next = {}

const fn = compose(middleware)
fn(ctx, next)

这里实现了和koa一样的效果,但是肯定有很多地方不对,首先一般使用中间件都会用async/await,我这里都是同步代码就省略了,其次ctx和next不需要人为设置,更不可能为空对象,只是我为了在最后调用的时候临时写的一个。来看看最终效果:

image.png

总结

Koa 的洋葱模型指的是以 next() 函数为分割点,先由外到内执行 Request 的逻辑,再由内到外执行 Response 的逻辑。通过洋葱模型,将多个中间件之间通信等变得更加可行和简单。其实现的原理并不是很复杂,主要是 compose 方法。后续我会继续跟进bff的学习内容,如果我断更了,记得踢我一下。