告别 `addEventListener`！Chrome 推出原生 Observable API，事件处理效率提升 300%！

images
在现代前端开发中，事件处理一直是最基础、也是最容易陷入复杂回调地狱的部分。点击、滚动、输入、消息推送……每一个异步事件都可能带来维护上的噩梦。

最近，Chromium 团队宣布了一项重磅新提案：Observable API，它有望彻底改变我们处理事件的方式。更高效、更优雅、更声明式。更重要的是，性能最高可提升 300%！

🚀 Observable API 是什么？

Observable API 是一套用于原生事件流式处理的全新 API，目标是用更“声明式”的方式管理 DOM 事件、WebSocket、用户交互等。

想象一下，你不再需要绑定回调、解绑事件、不停管理中间状态，而是像“搭积木”一样组合操作事件流。

const button = document.getElementById("myButton");
button.when("click")
  .filter((e, index) => index % 2 === 0) // 只处理偶数次点击
  .subscribe({
    next: (e) => console.log("Button clicked"),
  });

这段代码中，我们使用 when("click") 创建了一个事件流，再用 filter() 过滤偶数点击，subscribe() 进行处理——逻辑清晰、结构优雅，无嵌套、无副作用！

🧩 Observable API 能做什么？

1. 实时响应用户输入

const input = document.getElementById("searchInput");

input.when("input")
  .map((e) => e.target.value)
  .filter((value) => value.length >= 3)
  .subscribe({
    next: (value) => console.log("Search for:", value),
  });

仅当输入长度大于等于 3 时触发逻辑，非常适合实现搜索建议或实时表单校验。

2. WebSocket 消息监听更丝滑

const socket = new WebSocket("wss://example.com");

socket.when("message")
  .map((e) => JSON.parse(e.data))
  .filter((data) => data.type === "notification")
  .subscribe({
    next: (data) => console.log("New notification:", data),
  });

这比传统的 socket.onmessage = function... 更清晰可组合，尤其适合消息中心、实时聊天等场景。

3. 实现防抖（Debounce）效果

const button = document.getElementById("myButton");

button.when("click")
  .takeUntil((e) => new Promise((resolve) => setTimeout(resolve, 300)))
  .subscribe({
    next: (e) => console.log("Debounced click"),
  });

简洁实现 防抖点击事件，用户连续点击时，只处理 300ms 静止之后的那次，提升交互体验。

4. 多事件流组合也不在话下

const button = document.getElementById("myButton");
const input = document.getElementById("myInput");

button.when("click")
  .flatMap(() => input.when("input"))
  .takeUntil(button.when("click")) // 再次点击按钮时停止监听输入
  .subscribe({
    next: (e) => console.log("Input value:", e.target.value),
  });

轻松构建“点击按钮后开启监听输入，再次点击停止”的临时交互流，无需手动解绑事件，逻辑清晰。

🆚 对比 RxJS：轻量替代还是未来标准？

特性	RxJS	Observable API
依赖	第三方库	原生浏览器 API（WICG 提案中）
学习曲线	偏高（概念多）	低（面向事件，链式操作）
性能	较高但依赖 bundler	原生支持，性能最高提升 300%
生态	完善，适合大型复杂项目	轻量，适合日常 Web 事件处理
API 操作符数量	非常丰富	核心操作符已有 map/filter/take...