告别 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：轻量替代还是未来标准？
| 特性 | RxJS | Observable API |
|---|---|---|
| 依赖 | 第三方库 | 原生浏览器 API（WICG 提案中） |
| 学习曲线 | 偏高（概念多） | 低（面向事件，链式操作） |
| 性能 | 较高但依赖 bundler | 原生支持，性能最高提升 300% |
| 生态 | 完善，适合大型复杂项目 | 轻量，适合日常 Web 事件处理 |
| API 操作符数量 | 非常丰富 | 核心操作符已有 map/filter/take... |
可以预见，Observable API 的目标并非完全取代 RxJS，而是提供一个**“原生 + 简洁 + 性能导向”**的新选择。
🧪 当前支持情况与标准进展
目前 Observable API 处于 WICG 提案阶段，尚未成为正式 Web 标准，但已经可以在 Chromium Canary 中进行试验。
官方草案地址：
🌐 WICG/Observable
你可以通过 启用实验功能 或 polyfill 的方式体验部分功能。
✅ 总结：事件处理进入声明式新时代
Observable API 的意义，不仅仅是优化性能，更是理念的革新。
- ✅ 不再手动管理事件绑定与解绑
- ✅ 支持事件流的组合、过滤、映射
- ✅ 代码更简洁，逻辑更清晰
- ✅ 性能更强，无需第三方依赖