阅读视图

发现新文章,点击刷新页面。

深入理解 AbortController:从底层原理到跨语言设计哲学

引言

在目前的现代异步编程中,取消操作是一个看似简单却极其复杂的问题。JavaScript 的 AbortController API 作为 Web 标准和 Node.js 环境中的统一解决方案,不只是解决了异步操作的可取消性难题,更体现了一种深刻的设计哲学:协作式取消(Cooperative Cancellation)。

今天我们从底层原理出发,深入剖析 AbortController 的工作机制,对比浏览器与 Node.js 的实现差异,并横向对比其他编程语言的中断机制设计,最终揭示这一 API 背后的语言特性与设计思想。那我们开始吧!


第一部分:AbortController 的底层原理

1.1 核心架构:信号-控制器分离模式

AbortController 的设计遵循信号-控制器分离模式(Signal-Controller Separation Pattern)。这种设计将"控制"与"监听"两个职责进行分离:

// 核心架构示意
class AbortController {
  constructor() {
    // 控制器持有信号对象的引用
    this.signal = new AbortSignal();
  }

  abort(reason) {
    // 控制器触发信号的中止状态
    this.signal._abort(reason);
  }
}

class AbortSignal extends EventTarget {
  constructor() {
    super();
    this.aborted = false;
    this.reason = undefined;
  }

  _abort(reason) {
    if (this.aborted) return; // 幂等性保证

    this.aborted = true;
    this.reason = reason ?? new DOMException("Aborted", "AbortError");

    // 触发中止事件,通知所有监听器
    this.dispatchEvent(new Event("abort"));
  }
}

为什么这样设计?

  1. 单一职责原则:控制器负责"触发",信号负责"传播"。这种分离使得一个控制器可以控制多个信号,或者多个消费者可以共享同一个信号。

  2. 不可变性保证:signal 对象一旦创建,其引用关系就固定下来。消费者只能监听信号,无法重新赋值或篡改控制器的状态。

  3. 传播语义清晰:信号作为 EventTarget 的子类,天然支持事件订阅机制,符合 JavaScript 的异步编程范式。

1.2 事件驱动机制:从信号到执行中断

AbortSignal 继承自 EventTarget,这意味着它使用事件驱动模型来传播取消信号。当调用 controller.abort() 时,内部执行以下步骤:

Image from Nlark

关键设计点:

  • 幂等性:多次调用 abort() 不会产生副作用,确保信号状态的一致性。
  • 同步触发:abort() 的调用是同步的,事件处理也是同步执行的,这保证了取消信号的即时性。
  • 不可撤销:一旦信号被中止,就无法"恢复",这符合"取消"的语义——取消是一个不可逆的操作。

1.3 底层资源释放:从信号到系统调用

AbortController 的真正威力在于它能够触发底层资源的释放。以 fetch 请求为例:

const controller = new AbortController();
fetch("/api/data", { signal: controller.signal });

// 触发取消
controller.abort();

abort() 被调用时,浏览器会执行以下操作:

  1. TCP 连接中断:浏览器向服务器发送 RST(Reset)包,强制关闭 TCP 连接。这不是"忽略响应",而是真正意义上的连接终止。

  2. 资源回收:释放与该请求相关的内存缓冲区、文件描述符、事件监听器等资源。

  3. Promise 拒绝:fetch 返回的 Promise 被 reject,抛出 AbortError

这种分层取消机制确保了从应用层到系统层的完整资源释放,避免了内存泄漏和资源耗尽问题。

1.4 AbortSignal.any():信号组合的设计智慧

AbortSignal.any() 是 AbortController API 的一个重要扩展,它允许将多个信号组合成一个 "或" 关系的新信号:

const timeoutSignal = AbortSignal.timeout(5000);
const userCancelSignal = new AbortController().signal;

// 任一信号触发,组合信号就触发
const combinedSignal = AbortSignal.any([timeoutSignal, userCancelSignal]);

fetch("/api/data", { signal: combinedSignal });

实现原理:

// 简化版实现示意
class AbortSignal {
  static any(signals) {
    const controller = new AbortController();

    for (const signal of signals) {
      if (signal.aborted) {
        // 如果任一信号已中止,立即触发
        controller.abort(signal.reason);
        return controller.signal;
      }

      // 监听每个信号的 abort 事件
      signal.addEventListener(
        "abort",
        () => {
          controller.abort(signal.reason);
        },
        { once: true },
      );
    }

    return controller.signal;
  }
}

设计要点:

  1. 竞态处理:如果传入的信号中已经有一个是 aborted 状态,立即触发新信号的中止。
  2. 原因传递:触发时传递原始信号的 reason,保持错误信息的完整性。
  3. 内存管理:使用 { once: true } 确保事件监听器在触发后自动清理,避免内存泄漏。
  4. WeakRef 优化:实际实现中使用 WeakRefFinalizationRegistry 来管理信号之间的依赖关系,防止循环引用。

第二部分:Node.js 与 Web 实现的异同

2.1 实现层面的差异

虽然 Node.js 的 AbortController 遵循与浏览器相同的 WHATWG DOM 标准,但在底层实现上存在显著差异:

特性 浏览器(Blink/V8) Node.js (libuv/V8)
事件循环 基于渲染事件循环 基于 libuv 事件循环
网络层 Chromium Network Stack libuv + 系统调用
信号传播 通过 Blink 的绑定层 通过 Node.js 的 C++ 绑定
文件系统 受限的 File System Access API 完整的 fs 模块支持
子进程 不支持 支持 child_process 模块
Worker 线程 Web Workers Worker Threads

2.2 Node.js 特有的扩展

Node.js 对 AbortController 进行了多项扩展,使其更适用于服务端场景:

2.2.1 定时器支持

import { setTimeout } from "node:timers/promises";

const controller = new AbortController();

setTimeout(1000, "value", { signal: controller.signal })
  .then((value) => console.log(value))
  .catch((err) => {
    if (err.name === "AbortError") {
      console.log("Timer aborted");
    }
  });

// 5秒后取消
setTimeout(() => controller.abort(), 500);

底层实现:Node.js 的定时器模块内部维护了一个 AbortSignal 到定时器句柄的映射。当信号触发时,调用 clearTimeout() 清除定时器。

2.2.2 文件系统操作

import { readFile } from "node:fs";

const controller = new AbortController();

readFile("/path/to/file", { signal: controller.signal }, (err, data) => {
  if (err?.name === "AbortError") {
    console.log("Read aborted");
  }
});

// 取消读取
controller.abort();

重要限制:根据 Node.js 文档,文件系统的取消不会中止底层的操作系统请求,而只是中止 Node.js 内部的缓冲操作。这意味着:

这与浏览器中 fetch 的取消(可以终止 TCP 连接)有本质区别,反映了服务端 I/O 与客户端网络请求的不同特性。

2.2.3 子进程控制

import { spawn } from "node:child_process";

const controller = new AbortController();

const child = spawn("node", ["script.js"], {
  signal: controller.signal,
});

child.on("error", (err) => {
  if (err.name === "AbortError") {
    console.log("Child process aborted");
  }
});

// 终止子进程
controller.abort();

实现机制:Node.js 在子进程模块中监听 AbortSignalabort 事件,触发时向子进程发送 SIGTERM 信号。如果子进程未在超时内退出,则发送 SIGKILL 强制终止。

2.3 行为一致性与边界情况

2.3.1 事件触发时序

浏览器和 Node.js 在事件触发时序上保持一致:

const controller = new AbortController();
const signal = controller.signal;

// 注册多个监听器
signal.addEventListener("abort", () => console.log("Listener 1"));
signal.addEventListener("abort", () => console.log("Listener 2"));

controller.abort();
console.log("After abort");

// 输出顺序:
// Listener 1
// Listener 2
// After abort

事件监听器是同步执行的,这保证了取消操作的即时性。

2.3.2 已完成的操作

如果操作已经完成,取消信号会被忽略:

const controller = new AbortController();

fetch("/api/data", { signal: controller.signal }).then((response) => {
  console.log("Request completed");
});

// 延迟触发取消(假设请求已经完成)
setTimeout(() => {
  controller.abort(); // 不会产生任何效果
}, 1000);

这种行为是协作式取消的核心体现:消费者决定如何响应取消信号,包括选择忽略它。


第三部分:跨语言对比——中断机制的设计哲学

3.1 协作式取消 vs 抢占式取消

不同编程语言对"取消操作"的设计哲学可以分为两大类:

3.2 Go:Context 模式

Go 语言的 context 包提供了与 JavaScript AbortController 类似的协作式取消机制:

// Go 的 Context 模式
ctx, cancel := context.WithCancel(context.Background())
defer cancel()

// 启动 goroutine
go func(ctx context.Context) {
    select {
    case <-ctx.Done():
        // 收到取消信号
        fmt.Println("Cancelled:", ctx.Err())
        return
    case <-time.After(5 * time.Second):
        fmt.Println("Work completed")
    }
}(ctx)

// 触发取消
cancel()

与 JavaScript 的对比

特性 Go Context JavaScript AbortController
信号类型 Channel(<-ctx.Done() Event(addEventListener
传播方式 显式传递 ctx 参数 通过 signal 属性传递
超时支持 context.WithTimeout() AbortSignal.timeout()
值传递 支持 ctx.Value() 不支持(专用设计)
组合能力 可以嵌套传递 AbortSignal.any() 组合

设计差异分析

Go 的 context 不仅是取消信号,还承担了请求作用域数据传递的职责(通过 ctx.Value())。这种设计在微服务架构中非常有用,可以传递请求 ID、用户信息等。JavaScript 的 AbortController 则专注于单一职责:取消信号传递。

3.3 C#:CancellationToken 模式

.NET 的 CancellationToken 是一个成熟的协作式取消机制:

// C# 的 CancellationToken 模式
using var cts = new CancellationTokenSource();
CancellationToken token = cts.Token;

try {
    await Task.Run(async () => {
        while (!token.IsCancellationRequested) {
            // 执行任务
            await Task.Delay(100);
        }
    }, token);
} catch (OperationCanceledException) {
    Console.WriteLine("Operation cancelled");
}

// 触发取消
cts.Cancel();

关键特性:

  1. 轮询与回调双模式:既可以通过 IsCancellationRequested 属性轮询,也可以通过 Register() 方法注册回调。

  2. 链接令牌:CreateLinkedTokenSource() 可以将多个令牌链接成一个,任一令牌取消都会触发整体取消。

  3. 异常类型:取消时抛出 OperationCanceledException,与 JavaScript 的 AbortError 对应。

与 JavaScript 的对比:


⚖️ 核心差异对照表

对比维度 C# CancellationToken JS AbortSignal
类型系统 struct(值类型) class(引用类型)
传递语义 按值复制(快照式) 按引用共享(同一实例)
取消检测 轮询 .IsCancellationRequested 监听 'abort' 事件
异常类型 OperationCanceledException DOMException("AbortError")
资源释放 需手动 .Dispose() CTS GC 自动回收
超时内置 cts.CancelAfter() AbortSignal.timeout() (ES2024)
多信号合并 CreateLinkedTokenSource() AbortSignal.any() (ES2024)
与 fetch 集成 ❌ 不适用 ✅ 原生支持
与 async/await ✅ 原生支持 ✅ 原生支持

3.4 Java:Future.cancel() 与线程中断

Java 提供了两种取消机制:

3.4.1 Future.cancel()(协作式)

ExecutorService executor = Executors.newSingleThreadExecutor();
Future<?> future = executor.submit(() -> {
    while (!Thread.currentThread().isInterrupted()) {
        // 执行任务
    }
});

// 尝试取消
future.cancel(true); // true = 允许中断运行中的线程

3.4.2 线程中断(抢占式)

Thread workerThread = new Thread(() -> {
    try {
        Thread.sleep(10000);
    } catch (InterruptedException e) {
        // 收到中断信号
        Thread.currentThread().interrupt(); // 重新设置中断标志
    }
});

workerThread.start();
workerThread.interrupt(); // 发送中断信号

关键区别

Java 的 Thread.interrupt() 并不会强制停止线程,而是设置一个中断标志。线程需要主动检查这个标志(通过 isInterrupted())或在可中断的阻塞操作(如 sleep(), wait())中捕获 InterruptedException

这与 JavaScript 的 AbortController 非常相似,都是协作式的。但 Java 还保留了 Thread.stop()(已废弃)这样的抢占式方法,反映了早期 Java 设计中对抢占式取消的探索。

3.5 Kotlin:协程的取消机制

Kotlin 协程的取消是结构化并发(Structured Concurrency)的核心特性:

import kotlinx.coroutines.*

fun main() = runBlocking {
    val job = launch {
        try {
            repeat(1000) { i ->
                println("Job: I'm working $i ...")
                delay(500L)
            }
        } finally {
            // 清理资源
            println("Job: I'm running finally")
        }
    }

    delay(1300L)
    println("main: I'm tired of waiting!")
    job.cancelAndJoin() // 取消并等待完成
    println("main: Now I can quit.")
}

关键特性:

  1. 挂起点的取消检查:Kotlin 协程只在挂起点(suspension points)检查取消状态。如果协程处于 CPU 密集型计算中,不会立即响应取消。

  2. 异常传播:取消时抛出 CancellationException,这是一种特殊的异常,不会被视为错误。

  3. 父子关系:子协程的取消会传播给所有子协程,形成树状的取消传播。

与 JavaScript 的对比:

3.6 Python:asyncio.Task 的取消

Python 的 asyncio 提供了任务取消机制:

import asyncio

async def worker():
    try:
        while True:
            print("Working...")
            await asyncio.sleep(1)
    except asyncio.CancelledError:
        print("Cancelled!")
        raise  # 必须重新抛出

async def main():
    task = asyncio.create_task(worker())
    await asyncio.sleep(2)
    task.cancel()

    try:
        await task
    except asyncio.CancelledError:
        print("Task cancelled")

asyncio.run(main())

设计特点

  1. 异常驱动:取消通过抛出 CancelledError 实现,任务需要捕获并重新抛出。

  2. 异步清理finally 块中可以执行异步清理操作(使用 async 语法)。

  3. 取消传播:父任务取消时,子任务会自动收到取消信号。

与 JavaScript 的对比

Python 的 asyncio.CancelledError 与 JavaScript 的 AbortError 类似,都是异常驱动的取消机制。但 Python 的取消更依赖异常传播,而 JavaScript 更依赖事件监听。

3.7 Rust:异步取消与 Drop 语义

Rust 的异步取消机制与众不同,它利用了所有权和 Drop trait:

use tokio::time::{sleep, Duration};

#[tokio::main]
async fn main() {
    let handle = tokio::spawn(async {
        sleep(Duration::from_secs(5)).await;
        println("Task completed");
    });

    // 取消任务
    handle.abort();

    match handle.await {
        Ok(_) => println!("Task finished normally"),
        Err(e) if e.is_cancelled() => println!("Task was cancelled"),
        Err(e) => println!("Task panicked: {:?}", e),
    }
}

核心概念

  1. Future 的 Drop:在 Rust 中,当一个 Future(异步任务)被 drop(丢弃)时,任务就被取消了。这是通过所有权系统实现的。

  2. 取消安全性(Cancel Safety):Rust 强调"取消安全性",即任务在被取消时不会留下不一致的状态。这通常要求使用特定的模式(如 select! 宏)。

  3. Async Drop:Rust 正在讨论引入 AsyncDrop trait,允许在 drop 时执行异步清理操作。

与 JavaScript 的对比


第四部分:设计哲学与最佳实践

4.1 为什么协作式取消是主流?

从上述跨语言对比可以看出,协作式取消已成为现代异步编程的主流设计。原因如下:

  1. 资源安全:协作式取消允许任务在退出前执行清理操作(关闭文件、释放锁、回滚事务等),避免资源泄漏。

  2. 状态一致性:任务可以在安全点(挂起点或检查点)响应取消,确保数据结构处于一致状态。

  3. 可预测性:取消的时机和行为是确定的,不会出现抢占式取消的"任意点中断"问题。

  4. 组合性:多个取消信号可以组合(如 AbortSignal.any()),形成复杂的取消策略。

4.2 AbortController 的设计原则总结

根据 WHATWG DOM 规范和各实现的设计文档,AbortController 遵循以下核心原则:

  1. 分离原则(Separation)

    • 控制器(Controller)负责触发
    • 信号(Signal)负责传播
    • 消费者(Consumer)决定如何响应
  2. 幂等性原则(Idempotency)

    • 多次调用 abort() 无副作用
    • 信号一旦中止,状态不可变
  3. 即时性原则(Immediacy)

    • abort() 调用是同步的
    • 事件处理是同步的
    • 保证取消信号的即时传播
  4. 不可撤销原则(Irreversibility)

    • 取消是不可逆的操作
    • 信号不能"恢复"或"重置"
  5. 组合性原则(Composability)

    • 支持多个信号的组合(any, race)
    • 支持信号链的传播(dependent signals)
  6. 资源安全原则(Resource Safety)

    • 提供清理算法的注册机制
    • 支持自动解订阅(unsubscription)

4.3 实际应用中的最佳实践

4.3.1 始终传递 Signal

// ✅ 好的实践:函数接受 signal 参数
async function fetchData(url, options = {}) {
  const { signal } = options;

  // 立即检查
  signal?.throwIfAborted();

  const response = await fetch(url, { signal });

  // 中间检查
  signal?.throwIfAborted();

  return response.json();
}

// ❌ 不好的实践:忽略 signal
async function fetchDataBad(url) {
  return fetch(url).then((r) => r.json()); // 无法取消
}

4.3.2 正确清理事件监听器

async function someOperation(signal) {
  const cleanup = new AbortController();

  // 使用嵌套 signal 确保清理
  signal?.addEventListener(
    "abort",
    () => {
      cleanup.abort();
    },
    { once: true },
  );

  try {
    await doWork({ signal: cleanup.signal });
  } finally {
    // 确保清理
    cleanup.abort();
  }
}

4.3.3 区分取消错误与其他错误

async function robustFetch(url, signal) {
  try {
    return await fetch(url, { signal });
  } catch (error) {
    if (error.name === "AbortError") {
      // 取消是预期的行为,不需要上报
      console.log("Request cancelled");
      return null;
    }
    // 其他错误需要处理
    throw error;
  }
}

4.3.4 使用 AbortSignal.timeout() 设置超时

// ✅ 推荐:使用内置的超时信号
const signal = AbortSignal.timeout(5000);

// ❌ 不推荐:手动实现
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

4.3.5 组合多个取消条件

// 组合用户取消和超时
const userController = new AbortController();
const timeoutSignal = AbortSignal.timeout(10000);

const combinedSignal = AbortSignal.any([userController.signal, timeoutSignal]);

fetch("/api/data", { signal: combinedSignal }).catch((err) => {
  if (err.name === "AbortError") {
    // 判断是哪种取消
    if (timeoutSignal.aborted) {
      console.log("Timeout");
    } else {
      console.log("User cancelled");
    }
  }
});

第五部分:深入思考——语言特性对设计的影响

5.1 JavaScript 的事件驱动本质

AbortController 的设计深深植根于 JavaScript 的事件驱动(Event-Driven)本质。JavaScript 作为单线程语言,无法使用抢占式中断(如线程信号),必须通过事件循环机制来传播信号。

这种设计使得 AbortController 与 JavaScript 的异步模型(Promise、async/await、EventTarget)无缝集成。

5.2 单线程模型的限制与优势

JavaScript 的单线程模型限制了取消机制的设计空间:

  • 无法强制中断:无法像操作系统信号那样强制中断执行中的代码。
  • 必须协作:任务必须主动检查信号并响应。

但这种限制也带来了优势:

  • 避免竞态条件:没有抢占式中断的"任意点中断"问题,状态一致性更容易保证。
  • 简化并发模型:单线程 + 事件循环使得取消信号的传播路径清晰可预测。

5.3 对比其他语言的设计选择

不同语言的中断机制设计反映了它们的运行时特性:

语言 运行时模型 取消机制 设计选择
JavaScript 单线程 + 事件循环 AbortController 事件驱动,协作式
Go M:N 协程调度 context.Context Channel 驱动,协作式
C# 线程池 + Task CancellationToken 轮询 + 回调,协作式
Java OS 线程 Future.cancel() + 中断 混合式(协作为主)
Kotlin 协程(挂起/恢复) Job.cancel() 挂起点检查,协作式
Rust 异步 Future + 轮询 Drop 语义 所有权驱动,协作式
Python 事件循环 + 协程 Task.cancel() 异常驱动,协作式

核心点

所有现代语言都选择了协作式取消,这不是偶然,而是对资源安全和状态一致性的共同追求。不同语言的实现方式反映了它们的核心抽象模型

  • JavaScript 的 EventTarget → 事件驱动
  • Go 的 Channel → 通信顺序进程(CSP)
  • Rust 的 Ownership → 编译时安全
  • Kotlin 的 Structured Concurrency → 父子作用域

结论

AbortController 不仅是一个 API,更是 JavaScript 异步编程哲学的集中体现。它的设计遵循了以下核心思想:

  1. 协作优于强制:通过信号机制让任务自主决定如何响应取消,保证资源安全和状态一致性。

  2. 分离优于耦合:控制器与信号的分离使得取消逻辑可以灵活组合和传播。

  3. 事件驱动优于轮询:利用 JavaScript 的事件循环机制,实现即时、可靠的信号传播。

  4. 组合优于继承AbortSignal.any() 等组合操作使得复杂的取消策略可以用简单的原语构建。

跨语言对比揭示了一个行业共识:协作式取消是现代异步编程的最佳实践。无论是 Go 的 Context、C# 的 CancellationToken、Kotlin 的协程取消,还是 Rust 的 Drop 语义,都在用各自语言的核心抽象表达同一个理念——让取消成为一等公民,但绝不以牺牲安全为代价

理解 AbortController 的底层原理,不仅能帮助我们写出更健壮的异步代码,更能让我们洞察语言设计背后的深层思考:好的设计不是增加复杂性,而是在约束条件下找到最优雅的解决方案

当 Vue 3 遇上桥接模式:手把手教你优雅剥离虚拟滚动的业务大泥球

当 Vue 3 遇上桥接模式:手把手教你优雅剥离虚拟滚动的业务大泥球

摘要:本文结合 Vue3 $attrs 特性与桥接模式,详细解析如何优雅解耦虚拟滚动容器与复杂业务组件。通过拆分抽象与实现,实现属性事件无缝透传,告别臃肿代码。

在企业级前端开发中,长列表渲染是一个永远绕不开的性能瓶颈。在 Vue 技术栈中,我们经常会使用 vue3-virtual-scroll-list 这样的第三方库来实现虚拟滚动,从而保证页面在面对万条甚至十万条数据时依然如丝般顺滑。

但是,随着业务复杂度的提升,一个棘手的设计问题往往会浮出水面:如何在使用第三方虚拟滚动库时,优雅地实现基础组件与业务组件的解耦与隔离?

今天,我们就来详细拆解这个场景,并探讨在 Vue 3 下利用 $attrs 透传机制实现完美隔离的设计思路。

一、 场景痛点与需求分析

想象一下这样一个典型的开发场景:

你正在负责一个大型后台管理系统。项目中有多处需要用到虚拟滚动列表:有的是简单的文本日志列表,有的是复杂的商品卡片列表,还有的是带有各种交互按钮(点赞、删除、编辑)的用户评论列表。

为了复用代码,你决定封装一个基础虚拟滚动组件(VirtualScrollerBasic),它负责引入第三方库,设定预估高度。同时,你还需要一个基础列表项组件(ItemBasic),它负责最基本的数据渲染和样式布局。

但是,业务部门的需求是千变万化的:

  • 场景 A 的商品列表需要传入一个特殊的业务参数 customText 来显示促销信息。
  • 场景 B 的评论列表需要在点击时触发一个专属的业务事件 @customEvent
  • 场景 C 的日志列表需要在每一项的底部插入一段自定义的 DOM 结构(使用插槽)。

如果直接在基础组件里把这些业务参数和事件全部写死,基础组件就会变得无比臃肿,甚至最终沦为一个不可维护的“大泥球”。

我们的核心诉求是:基础列表和基础 Item 只关心自己该关心的事情(比如基础的布局、基础的数据 source),而业务列表和业务 Item 可以自由地增加属性、监听事件、甚至传递插槽,且这一切对基础组件来说必须是“无感”的。

二、 方案设计思路:桥接模式与职责分离

为了解决上述痛点,我们需要引入**桥接模式(Bridge Pattern)**的思想。

桥接模式的核心是“将抽象部分与实现部分分离,使它们都可以独立地变化”。在虚拟滚动的场景中:

  • 抽象部分(Abstraction):是列表的容器(如 VirtualScrollerBasic),负责虚拟滚动的核心机制、数据调度和预估高度计算。
  • 实现部分(Implementor):是具体的列表项渲染器接口,负责单条数据的 UI 展示和交互。

这两部分通过一个“桥梁”(即动态传入的 listComponent 属性)连接起来。在此基础上,业务组件只需要处理自己的业务逻辑,剩下的不属于自己范围的基础属性和事件,通过 Vue 3 的 $attrs(在组合式 API 中通过 useAttrs() 获取)完美透传给基础组件。

Vue 3 的 $attrs 有一个非常棒的特性:它不仅包含了外部传入的非 Props 属性,还包含了绑定的事件(自动转化为 onXxx 形式)。这为我们实现属性和事件的跨层透传提供了天然的便利。

设计架构图

classDiagram
    class VirtualScrollerBasic {
        +items: Array
        +listComponent: Component
        +basicText: String
        +render()
    }

    class VirtualScrollerList {
        +customText: String
        +handleCustomEvent()
        +render()
    }

    class ItemBasic {
        +index: Number
        +basicText: String
        +render()
    }

    class Item {
        +customText: String
        +handleEvent()
        +render()
    }

    VirtualScrollerBasic o-- ItemBasic : Bridge (通过 listComponent 桥接)
    VirtualScrollerBasic <|-- VirtualScrollerList : 扩展 (组合包裹)
    ItemBasic <|-- Item : 扩展 (组合包裹)

三、 Vue 3 下的代码实现

让我们来看看这套设计模式在 Vue 3 中是如何落地的。

1. 基础列表组件 (VirtualScrollerBasic.vue)

基础列表组件的职责是封装第三方库 vue3-virtual-scroll-list,并且负责将外部传入的 $attrs 整合后向下透传。

<template>
  <div class="virtual-scroller-container">
    <virtual-list
      class="virtual-list"
      :data-key="'id'"
      :data-sources="items"
      :data-component="listComponent"
      :estimate-size="50"
      :extra-props="{
        // 关键点1:合并透传所有外部传入的业务属性和业务事件(onXxx)
        ...attrs,
        // 关键点2:基础层私有的参数和事件,互不干扰
        basicText: '这是基础层参数',
        onBasicEvent: handleBasicEvent,
      }"
    >
      <template #header>
        <slot name="header"></slot>
      </template>
    </virtual-list>
  </div>
</template>

<script setup>
import { ref, useAttrs } from "vue";
import VirtualList from "vue3-virtual-scroll-list";
import ItemBasic from "./ItemBasic.vue";

const attrs = useAttrs();

const props = defineProps({
  listComponent: {
    type: Object,
    default: () => ItemBasic,
  },
});

// 关键点3:阻止属性直接绑定到根节点 div 上,防止 DOM 污染和事件重复触发
defineOptions({
  inheritAttrs: false,
});

const items = ref([
  /* 模拟数据 */
]);
const handleBasicEvent = (source) => {
  console.log("基础事件触发");
};
</script>

2. 基础 Item 组件 (ItemBasic.vue)

基础 Item 组件负责渲染列表项的最基本信息。它只关心基础的 UI 和数据结构,不知道任何关于业务层的特殊参数。

<template>
  <div class="basic-item">
    <div class="basic-content">
      <span>#{{ index }} - ID: {{ source.id }}</span>
      <span v-if="basicText" class="basic-text">({{ basicText }})</span>
      <button @click="handleClick">触发基础事件</button>
    </div>
    <!-- 留出插槽供业务层扩展 -->
    <slot name="footer"></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  source: {
    type: Object,
    required: true,
  },
  index: {
    type: Number,
    default: 0,
  },
  basicText: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["basicEvent"]);

const handleClick = () => {
  emit("basicEvent", props.source);
};
</script>

<style scoped>
.basic-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.basic-text {
  color: #888;
  margin-left: 10px;
}
</style>

3. 业务 Item 组件 (Item.vue)

业务 Item 组件的职责是拦截并消费属于业务层的属性(customText)和事件(customEvent),并将剩下的属性通过 v-bind 透传给基础 Item 组件。

<template>
  <div class="custom-item">
    <!-- 关键点1:v-bind="attrs" 将没被当前组件消费的属性和事件透传给基础组件 -->
    <item-basic v-bind="attrs" :source="source">
      <template #footer>
        <div class="custom-footer">
          自定义footer <span v-if="customText"> - {{ customText }}</span>
          <el-button type="primary" @click="handleEvent(source)">
            触发业务事件 customEvent
          </el-button>
        </div>
      </template>
    </item-basic>
  </div>
</template>

<script setup>
import { useAttrs } from "vue";
import ItemBasic from "./ItemBasic.vue";

const attrs = useAttrs();

// 关键点2:只声明业务层自己需要消费的属性。
// 如果业务层确实需要用到基础层的参数,就需要手动传给基础组件
const props = defineProps({
  source: { type: Object, required: true }, // 点击事件需使用,所以保留
  customText: { type: String, default: "" }, // 业务专属属性
});

const emit = defineEmits(["customEvent"]);

// 关键点3:同样需要阻止属性绑定到根节点
defineOptions({
  inheritAttrs: false,
});

const handleEvent = (source) => {
  // 触发业务层专属事件
  emit("customEvent", source);
};
</script>

4. 业务列表组件 (VirtualScrollerList.vue)

在最外层的业务列表中,我们就可以像使用普通组件一样,随心所欲地传递业务参数和监听业务事件了,底层的一切复杂透传对它来说都是透明的。

<template>
  <div class="virtual-scroller-list-wrapper">
    <virtual-scroller-basic
      :list-component="Item"
      :customText="'这是通过透传传入的业务参数 customText'"
      @customEvent="handleCustomEvent"
    >
      <template #header>
        <div class="custom-header">自定义业务 Header 内容</div>
      </template>
    </virtual-scroller-basic>
  </div>
</template>

<script setup>
import VirtualScrollerBasic from "./VirtualScrollerBasic.vue";
import Item from "./Item.vue";

const handleCustomEvent = (source) => {
  alert(`业务层成功拦截 customEvent,Item ID: ${source.id}`);
};
</script>

四、 Vue 3 与 Vue 2 的实现区别解析

如果你还在使用 Vue 2,或者刚从 Vue 2 迁移过来,可能会对上面的实现感到一些疑惑。这里有必要重点强调一下 Vue 3 和 Vue 2 在透传机制上的巨大差异。

Vue 2:属性与事件是分离的

在 Vue 2 中,组件的“属性”和“事件”是严格区分开的:

  • 传递的数据和非 Props 属性会被收集到 $attrs 中。
  • 通过 @v-on 绑定的事件会被收集到 $listeners 中。

所以在 Vue 2 中,如果你想把业务组件绑定的 @customEvent 透传给底层的 vue-virtual-scroll-listextra-props,你必须手动去遍历 $listeners,把它们转换成 onXxx 格式的函数,然后再和 $attrs 合并:

// Vue 2 下的 Hack 写法
computed: {
  mergedExtraProps() {
    const listenersAsProps = {};
    for (const eventName in this.$listeners) {
      const propName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
      listenersAsProps[propName] = this.$listeners[eventName];
    }
    return { ...this.$attrs, ...listenersAsProps };
  }
}

不仅如此,在 Vue 2 中,由于底层组件接收到的 extra-props 只能以 Props 的形式被子组件接收,为了让子组件能像普通组件一样响应 @事件,我们往往还需要引入一个中间包装组件(Wrapper),利用函数式组件将 onXxx 的 Props 重新还原为真正的 $listeners 并绑定到实际渲染的组件上。

例如,我们需要定义一个 VirtualScrollerItemWrapper.vue

<script>
// Vue 2 函数式组件 Wrapper
export default {
  name: "VirtualScrollerItemWrapper",
  functional: true,
  render(h, context) {
    const { props, data } = context;
    const originalComponent = props.originalComponent; // 真实的业务组件
    const attrs = {};
    const on = {};

    // 遍历 props,将 onXxx 还原为事件监听器
    for (const key in props) {
      if (key === "originalComponent") continue;

      if (key.startsWith("on") && typeof props[key] === "function") {
        const eventName = key.charAt(2).toLowerCase() + key.slice(3);
        on[eventName] = props[key];
      } else {
        attrs[key] = props[key];
      }
    }

    return h(originalComponent, {
      attrs,
      on, // 重新绑定事件
      scopedSlots: data.scopedSlots,
    });
  },
};
</script>

然后在基础滚动组件中,我们不能直接渲染业务组件,而是必须把这个 Wrapper 传给 vue-virtual-scroll-listdata-component 属性,并将实际的业务组件通过 extra-props 传进去:

<template>
  <virtual-list
    :data-key="'id'"
    :data-sources="items"
    :data-component="VirtualScrollerItemWrapper" <!-- 使用包装组件 -->
    :estimate-size="50"
    :extra-props="{
      ...mergedExtraProps,
      originalComponent: listComponent // 将真实的渲染组件传给包装器
    }"
  />
</template>

可以看到,在 Vue 2 中为了实现这一套隔离与透传机制,代码非常冗长且绕脑。

Vue 3:大一统的 $attrs

Vue 3 进行了一次非常优雅的底层重构。它移除了 $listeners 对象,将所有通过 @event 绑定的事件,在编译时自动转换成了以 onXxx 开头的属性名(例如 @custom-event 变成了 onCustomEvent),并且统一收集到了 $attrs

正因为 Vue 3 的这个特性,我们在 VirtualScrollerBasic 中只需要写一句 ...attrs,就同时完成了属性和事件的透传!这与 vue3-virtual-scroll-list 要求的 extra-props 接收对象的 API 设计简直是天作之合。

五、 运行效果与总结

当代码运行起来后,你会看到:

  1. 列表顶部正确渲染了“自定义业务 Header 内容”。
  2. 每一项都正确渲染了基础数据(如 #0)和基础参数(如 基础参数)。
  3. 每一项的 Footer 都正确渲染了业务参数 这是通过透传传入的业务参数 customText

image.png

  1. 点击“触发业务事件 customEvent”按钮,外层的业务列表组件成功弹出了 Alert 提示框,拦截到了事件。

image-1.png

image-2.png

总结:用到的设计模式

通过这次重构,我们实际上是在前端工程中落地了以下几种经典的设计模式:

  1. 桥接模式 (Bridge Pattern):这是本文的核心架构。将“虚拟滚动容器(抽象层)”与“列表项渲染(实现层)”彻底解耦。通过 listComponent 这一桥梁连接,使得业务列表可以随意更换基础滚动机制,业务项也可以在不同的列表中复用,两者独立变化。
  2. 装饰器模式 (Decorator Pattern) / 高阶组件模式 (HOC):业务 Item 没有去修改基础 ItemBasic 的内部代码,而是通过包裹对其进行了增强(增加了业务插槽和事件),并通过 $attrs 将基础属性完美透传。
  3. 模板方法模式 (Template Method Pattern)VirtualScrollerBasic 定义了虚拟滚动的算法骨架(如何引入库、设定高度等),具体的 UI 表现通过插槽和动态组件延迟到了业务层去实现。

优雅的架构设计,往往不需要多么高深的语法,而是对框架特性(如 $attrs)的深刻理解,以及对“单一职责”原则的坚守。希望这篇文章能为你在处理复杂 Vue 组件封装时带来一些启发!

JavaScript设计模式(十):模板方法模式实现与应用

提到模板,我们很容易联想到平时开发使用过的模板:

  1. HTML 模板,比如 <h1><%= title %></h1>
  2. JSX 模板(React 的模板方案),比如 <h1>{title}</h1>
  3. Vue 模板(.vue 文件),比如 <h1>{{title}}</h1>

其核心思路就是把页面中静态的部分(静态 HTML)和动态的部分(数据 data)进行分离,在运行时动态注入动态的部分。

这种前端模板是一种声明式地描述“界面应该长什么样”的语法或文件,属于视图层解决方案,而模板方法模式则是针对业务流程,是一种抽象的代码架构。

比如在平时开发项目中,我们经常会遇到这样一种场景:

  • 都是列表页,但请求接口不一样。
  • 都是弹窗提交流程,但校验规则不一样。
  • 都是页面初始化,但每个页面拿数据、处理数据、渲染数据的细节不一样。

这些场景有一个很明显的共同点:整体流程很像,但其中某几个步骤不一样。

比如一个后台列表页,通常都会经历这样几个步骤,如下图:

订单列表、用户列表、商品列表,整体套路几乎一样,只是请求地址、字段格式、渲染细节不一样。

这种场景,就很适合用 模板方法模式

1、模板方法模式定义

模板方法模式的核心思想就是:先把一个流程的整体骨架定义好,再把其中可以变化的步骤延迟到子类里去实现。

用通俗的解释来说就是:

  • 整体流程先定好。
  • 哪些步骤必须做,也先定好。
  • 哪些步骤允许不一样,再交给子类自己实现。

它的重点不在“某一个步骤怎么写”,而在“先把流程骨架稳定下来”。

2、核心思想

  1. 流程骨架固定:先把整体执行顺序统一下来。
  2. 变化步骤下沉:把会变化的步骤交给子类去实现。
  3. 避免重复代码:相同流程不要每个地方都复制一遍。

3、例子:封装不同列表页的数据加载流程

在前端项目里,后台管理系统经常会有各种列表页,比如:

  • 用户列表页。
  • 订单列表页。
  • 商品列表页。

这些页面虽然业务内容不同,但它们的处理流程其实很像,分为这四步:

  1. 先初始化查询参数。
  2. 再请求接口拿数据。
  3. 然后把后端数据转成页面需要的格式。
  4. 最后渲染到页面上。

3.1 不用模板方法模式(每个页面都自己写一遍)

如果不用模板方法模式的话,一般会这么写:

class UserListPage {
  async init() {
    const params = {
      pageNum: 1,
      pageSize: 10
    };

    const res = await fetchUserList(params);
    const list = res.data.list.map(item => ({
      id: item.id,
      name: item.nickname,
      statusText: item.status === 1 ? '启用' : '停用'
    }));

    this.render(list);
  }

  render(list) {
    console.log('渲染用户列表:', list);
  }
}

class OrderListPage {
  async init() {
    const params = {
      pageNum: 1,
      pageSize: 20
    };

    const res = await fetchOrderList(params);
    const list = res.data.records.map(item => ({
      id: item.orderId,
      amount: `¥${item.amount}`,
      statusText: item.status === 1 ? '已支付' : '待支付'
    }));

    this.render(list);
  }

  render(list) {
    console.log('渲染订单列表:', list);
  }
}

这种写法虽然能实现功能,但存在以下问题:

  1. 流程重复:初始化参数、请求数据、格式化数据、渲染,这一整套流程每个页面都在重复写。
  2. 不好维护:如果后面所有列表页都要在初始化前加 loading、在请求后统一做错误处理,那很多地方都得改。
  3. 流程不统一:有的人先格式化再渲染,有的人直接渲染原始数据,时间久了项目代码风格会越来越乱。

3.2 使用模板方法模式

更合理一点的做法是,把这套“列表页加载流程”先抽成一个父类骨架,然后把变化的步骤交给子类去实现。

class BaseListPage {
  async init() {
    // 1. 初始化查询参数
    const params = this.getParams();

    // 2. 请求数据
    const res = await this.fetchData(params);

    // 3. 格式化数据
    const list = this.formatData(res);

    // 4. 渲染页面
    this.render(list);
  }

  getParams() {
    return {
      pageNum: 1,
      pageSize: 10
    };
  }

  fetchData() {
    throw new Error('fetchData 方法必须由子类实现');
  }

  formatData() {
    throw new Error('formatData 方法必须由子类实现');
  }

  render(list) {
    console.log('渲染列表:', list);
  }
}

然后不同页面只需要补自己那一部分差异逻辑:

class UserListPage extends BaseListPage {
  fetchData(params) {
    return fetchUserList(params);
  }

  formatData(res) {
    return res.data.list.map(item => ({
      id: item.id,
      name: item.nickname,
      statusText: item.status === 1 ? '启用' : '停用'
    }));
  }

  render(list) {
    console.log('渲染用户列表:', list);
  }
}

class OrderListPage extends BaseListPage {
  getParams() {
    return {
      pageNum: 1,
      pageSize: 20
    };
  }

  fetchData(params) {
    return fetchOrderList(params);
  }

  formatData(res) {
    return res.data.records.map(item => ({
      id: item.orderId,
      amount: `¥${item.amount}`,
      statusText: item.status === 1 ? '已支付' : '待支付'
    }));
  }

  render(list) {
    console.log('渲染订单列表:', list);
  }
}

使用的时候就很统一了:

const userPage = new UserListPage();
userPage.init();

const orderPage = new OrderListPage();
orderPage.init();

这样改造之后,代码的职责就清楚很多了:

  • BaseListPage 负责定义流程骨架,它 init 方法封装了子类的算法框架,指导子类以何种顺序去执行哪些方法。
  • UserListPageOrderListPage 只负责实现自己的差异步骤。
  • 外部只需要调用统一的 init() 即可。

这就是模板方法模式最核心的价值:父类定流程,子类补细节。

3.3 模板方法模式里最关键的是“先定顺序”

模板方法模式最关键的点,不是“抽一个父类”这么简单,而是:先把执行顺序固定下来。

比如在刚才这个例子里,流程顺序就是:

  1. 先拿参数。
  2. 再请求数据。
  3. 再格式化数据。
  4. 最后渲染。

这个顺序是父类统一规定好的。

子类可以改“怎么请求”“怎么格式化”“怎么渲染”,但一般不应该随便改整个执行顺序。

因为一旦执行顺序也到处不一样,那这个“流程骨架”就不存在了。

所以模板方法模式真正厉害的地方在于:它不是只做代码复用,而是在做流程约束。

4、钩子方法是什么?

很多时候,一个流程里并不是每个步骤都必须让子类强制实现。

有些步骤,我们只是希望子类“有需要就重写,没需要就用默认实现”,这种步骤通常就叫做钩子方法

比如我们可以在列表页初始化前后,预留两个 hook:

class BaseListPage {
  async init() {
    this.beforeInit();

    const params = this.getParams();
    const res = await this.fetchData(params);
    const list = this.formatData(res);

    this.render(list);
    this.afterInit();
  }

  beforeInit() {}

  afterInit() {}

  getParams() {
    return {
      pageNum: 1,
      pageSize: 10
    };
  }

  fetchData() {
    throw new Error('fetchData 方法必须由子类实现');
  }

  formatData() {
    throw new Error('formatData 方法必须由子类实现');
  }

  render(list) {
    console.log('渲染列表:', list);
  }
}

这样子类如果有特殊需求,就可以选择性重写:

class UserListPage extends BaseListPage {
  beforeInit() {
    console.log('显示 loading');
  }

  afterInit() {
    console.log('隐藏 loading');
  }
}

这里的 beforeInitafterInit 就很典型,它们不是必须实现的步骤,但父类提前把“扩展点”给你留好了。

所以钩子方法你可以简单理解为:

流程还是父类控着,但父类会留一些可插拔的口子给子类扩展。

5、模板方法模式的优缺点

5.1 优点:

  • 流程统一:可以把一类业务的执行顺序先规范下来。
  • 减少重复代码:公共流程只写一遍即可。
  • 扩展点清晰:哪些步骤可变、哪些步骤固定,会更明确。
  • 适合做规范约束:很适合沉淀成一套统一的页面基类、业务基类。

5.2 缺点:

  • 依赖继承:一旦父类设计得不好,子类会比较被动。
  • 灵活性不如组合:流程顺序通常由父类固定,子类不能随便改。
  • 父类容易变重:如果父类塞了太多通用逻辑,后面也会越来越臃肿。

6、模板方法模式的应用

模板方法模式在前端和日常业务开发里其实非常常见,比如:

  1. 给管理后台项目,封装一套不同列表页的统一初始化流程。
  2. 弹窗表单的统一提交流程,比如校验、请求、成功提示、关闭弹窗。
  3. 不同页面的统一加载流程,比如权限校验、数据请求、渲染页面。
  4. 组件库里的基类组件,先约定一套渲染或初始化骨架。
  5. 前端框架、测试框架、构建工具里的一些生命周期骨架,本质上也有模板方法的影子。比如 vue2 组件的 createdmounted 等生命周期,react 17 版本之前组件的 componentWillMountcomponentDidMount 等生命周期。

小结

上面介绍了Javascript中非常经典的模板方法模式,它的核心思想就是:先把流程骨架定义好,再把其中可变化的步骤交给子类去实现。

对于前端开发来说,模板方法模式非常实用,像列表页初始化、表单提交流程、页面加载流程这些场景里,都能看到它的影子。它本质上就是帮我们把“固定流程”和“变化步骤”拆开,这样代码会更统一,也更容易维护。

❌