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

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

最近，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：轻量替代还是未来标准？

可以预见，Observable API 的目标并非完全取代 RxJS，而是提供一个**“原生 + 简洁 + 性能导向”**的新选择。

🧪 当前支持情况与标准进展

目前 Observable API 处于 WICG 提案阶段，尚未成为正式 Web 标准，但已经可以在 Chromium Canary 中进行试验。

官方草案地址：
🌐 WICG/Observable

你可以通过 启用实验功能 或 polyfill 的方式体验部分功能。

✅ 总结：事件处理进入声明式新时代

Observable API 的意义，不仅仅是优化性能，更是理念的革新。

• ✅ 不再手动管理事件绑定与解绑
• ✅ 支持事件流的组合、过滤、映射
• ✅ 代码更简洁，逻辑更清晰
• ✅ 性能更强，无需第三方依赖