JavaScript 洋葱模型：基于 Koa-compose 的原理剖析与优先级调度实践

从痛点看洋葱模型

在复杂的 Web 应用中，经常需要处理包含多个前置条件的操作流程。例如在“退出登录”场景中：

• 基础需求：若用户在编辑页面有未保存内容，需先提示保存，再执行退出。
• 新增需求：在 VIP 充值页退出时，需先展示广告弹窗，关闭后再执行退出。
• 复杂场景：不同页面存在多个不同类型的弹窗，且执行优先级各不相同。

如果直接在注销函数中进行大量的 if-else 判断或硬编码调用，随着需求的增加，核心函数的耦合度会急剧上升。当另一位开发者负责基础的注销逻辑时，这种写法将导致大量的协作冲突。我们需要一种机制，让各个业务的处理逻辑像“切片”一样插入到主流程中，互不干扰。

这恰好对应了“洋葱模型”的思想：外层包裹内层，执行时层层深入，返回时层层回溯。类似于剥洋葱，或者像俄罗斯套娃，一层包着一层。

洋葱模型的核心原理

在前端领域，最著名的洋葱模型实现莫过于 Koa.js 中的 koa-compose。它利用高阶函数、闭包以及 Promise 链式调用，仅用十几行代码就实现了优雅的中间件调度。

第1步：理解 Koa-compose 源码结构

compose 方法接收一个中间件数组（middleware array），经过入参校验后，返回一个新的函数。这个新函数被调用时，开始触发洋葱模型的执行。

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }
  return function (context, next) {
    let index = -1
    return dispatch(0)
    // ... dispatch 逻辑
  }
}

第2步：dispatch 的递归调用与状态追踪

核心的执行逻辑在于内部的 dispatch(i) 函数：

1. 防重复调用：通过记录 index，如果当前传入的索引小于等于之前的索引，抛出错误（禁止同一个中间件多次调用 next）。
2. 执行当前层：取出对应的中间件函数 fn，并将其作为返回值的一部分。
3. 递归下一层：将 dispatch.bind(null, i + 1) 作为 next 参数传给当前的中间件。

当所有中间件依次执行完毕（即 i === middleware.length）时，函数将 resolve 并沿着堆栈逐层向上返回。这种“进出一趟”的模式就是典型的洋葱模型。

第3步：执行顺序验证

可以通过一个简单的测试用例观察数据流：

// M1: 1 -> wait -> next -> wait -> 6
// M2: 2 -> wait -> next -> wait -> 5
// M3: 3 -> wait -> next -> wait -> 4
// 预期输出序列: [1, 2, 3, 4, 5, 6]

可以看到，代码的执行流是先进入最外层的 M1，一直向下直到最内层，然后从内向外回溯，最终形成完整的洋葱形状遍历。

实战：构建带优先级的调度器

为了适应实际业务中可能出现的多种弹窗及其优先级需求，我们可以对原始的洋葱模型进行改造。目标如下：

• 业务方只需要向调度器添加各自的中间件。
• 支持设置优先级（level），确保高优先级的逻辑先执行。
• 提供统一的入口触发调度。

第1步：定义类型与数据结构

中间件不再只是一个函数，而是一个包含 `level` 和 `middleware` 的对象，方便后续排序：

type Middleware<T = unknown> = {
  level: number;
  middleware: (context: T | undefined, next: () => Promise<any>) => void;
};

第2步：实现 Scheduler 类封装

创建一个类来管理中间件队列，提供 add 和 remove 方法。在添加时使用二分查找或直接遍历找到合适的位置插入，保持队列有序：

class Scheduler<T> {
  stack: Middleware<T>[] = [];

  add(middleware: Middleware<T>) {
    const index = this.stack.findIndex((it) => it.level <= middleware.level);
    this.stack.splice(index === -1 ? this.stack.length : index, 0, middleware);
    // 返回移除函数，方便业务方自行清理
    return () => this.remove(middleware);
  }

  remove(middleware: Middleware<T>) {
    const index = this.stack.findIndex((it) => it === middleware);
    index > -1 && this.stack.splice(index, 1);
  }

  dispatch(context?: T) {
    const that = this;
    let index = -1;
    return mutate(0);
    function mutate(i: number): Promise<void> {
      if (i <= index) return Promise.reject(new Error('next() called multiple times'));
      index = i;
      const fn = that.stack[i];
      if (index === that.stack.length) return Promise.resolve();
      try {
        return Promise.resolve(fn.middleware(context, mutate.bind(null, i + 1)));
      } catch (error) {
        return Promise.reject(error);
      }
    }
  }
}

第3步：业务侧调用示例

全局暴露一个实例，各个模块只需调用 add 即可接入：

// 初始化全局调度器
export const logoutScheduler = new Scheduler();

// 核心出口函数
const handleLogout = () => {
    logoutScheduler.dispatch().then(() => {
        logoutConfirm(); // 所有前置检查通过后执行真正的注销
    });
};

// 编辑页拦截逻辑（优先级 2）
logoutScheduler.add({
    level: 2,
    middleware: async (_, next) => {
        if (getEditState() === 'unsaved') {
          await editConfirm();
        }
        await next(); // 继续执行下一个中间件
    }
});

// VIP页拦截逻辑（优先级 2）
logoutScheduler.add({
    level: 2,
    middleware: async (_, next) => {
        if (getUserVipState()) {
            await vipConfirm();
        }
        await next();
    }
});

通过这种方式，各个页面的逻辑完全独立。如果未来产品想加一个“积分清零提醒”，只需再 push 一个带有对应优先级的中间件即可，彻底解放了主逻辑的耦合。

总结

洋葱模型不仅仅是一个技术实现的细节，更是一种优秀的解耦思想。它将横切面的关注点（如权限校验、埋点统计、异常拦截等）提取为独立的中间件，使核心逻辑变得纯粹。掌握了 koa-compose 这一经典实现，并在项目中结合优先级等进行改良，能极大提升前端复杂交互场景下的可维护性。

以上就是JavaScript 设计模式之洋葱模型原理及实践应用的详细内容，更多关于JavaScript 设计模式洋葱模型的资料请关注本站其它相关文章！