前言
接下来又是我最常说的一句话,“好久都没写文章了”。确实是这样,自从实习之后每天就是连轴转,学习时间都很少,虽然工作的时候都会从中学到很多东西,只是闲暇之余的学习时间变少了。一到周末就只想续命,其他什么都不想干,所以更不可能学习。
最近组里没什么事,下周才会有需求,就去学习了一下组里的两个项目,一个是富文本编辑器还有一个就是bff。富文本太难了,看了1%都不到就看不懂了,直接开始怀疑人生。就跟你考英语的时候一样,每个字母和单词都能看得懂,但阅读理解就是写不对,愣是不知道它在干什么。所以我就去看bff了,bff还是要容易点,它其实就是一种node的用法,不过我自己也还没弄明白,等我弄明白再给你们介绍一下,到时候大家记得提醒我哈,提醒我回来补基础概念。
洋葱模型
洋葱模型(Onion Architecture)在构建后端服务(BFF, Backend for Frontend)时是一种常用的架构模式。它是由 Jeffrey Palermo 提出的一种分层架构设计模式,它将应用程序分为多个不同的层,每一层都有自己的职责和依赖关系。这种设计有助于提高应用程序的灵活性、可测试性和可维护性。在bff的场景中有比较广泛的使用,具体表现在以下几个方面:
- 关注点分离: 洋葱模型将应用程序划分为不同的层,如领域层、应用服务层、基础设施层等,有利于关注点的分离和关注点的管理。
- 依赖倒置: 内层模块不依赖外层模块,而是通过接口或抽象类进行依赖。这种依赖倒置有利于提高模块的灵活性和可测试性。
- 可重用性: 由于分层的设计,BFF 中的领域模型、应用服务等可以被其他应用服务复用,提高了代码的可复用性。
- 易测试: 由于各层之间通过接口或抽象类耦合,可以很容易地对每一层进行单元测试和集成测试。
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');
})
输出的结果是:
在 koa
中,中间件被 next()
方法分成了两部分。next()
方法上面部分会先执行,下面部门会在后续中间件执行全部结束之后再执行。可以通过下图直观看出
在洋葱模型中,每一层相当于一个中间件,用来处理特定的功能。其处理顺序先是 next()
前请求(Request
,从外层到内层)然后执行 next()
函数,最后是 next()
后响应(Response
,从内层到外层),也就是说每一个中间件都有两次处理时机。
深入剖析洋葱模型
我们从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,fn
为 undefined
。这个时候就会执行if (!fn) return Promise.resolve(),第三个中间件的next()
就执行完了,然后就会执行next()后面的代码
,然后是第二个、第一个,从而形成了洋葱模型。
具体过程如下:花括号里面就是next()
的执行过程
阉割版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不需要人为设置,更不可能为空对象,只是我为了在最后调用的时候临时写的一个。来看看最终效果:
总结
Koa
的洋葱模型指的是以 next()
函数为分割点,先由外到内执行 Request
的逻辑,再由内到外执行 Response
的逻辑。通过洋葱模型,将多个中间件之间通信等变得更加可行和简单。其实现的原理并不是很复杂,主要是 compose
方法。后续我会继续跟进bff的学习内容,如果我断更了,记得踢我一下。