在前端開發的領域里，一直都有一個難題，那就是如何更高效、更優雅地處理異步事件。

比如，用戶點擊按鈕、鼠標移動這些看似簡單的操作，背后其實都需要一套復雜的機制來管理。

最近，Chromium 團隊宣布推出 Observable API，這可能會徹底改變我們處理這些事件的方式。

一、Observable API 是什么？

Observable API 可以看作是一種處理異步事件的高級工具。

想象一下，你正在監控一個按鈕的點擊事件，傳統的做法可能需要寫一堆嵌套的函數和復雜的邏輯來處理。

而 Observable API 把這些事件流變成了一個可以被觀察的對象，你可以很方便地對它進行過濾、映射、組合等操作，就像搭積木一樣簡單。

簡單來說，Observable API 讓我們能夠以一種聲明式的方式處理事件。

比如，你可以說“我要監聽點擊事件，但只關心奇數次點擊”，然后 Observable API 會幫你自動處理這些邏輯，而不需要你手動去寫復雜的判斷和循環。

二、Observable API 能幫我們干什么？

Observable API 最大的優勢在于它讓代碼變得更簡潔、更易讀。

比如，下面是一個簡單的示例：

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 還提供了很多強大的操作符，比如 takeUntil 可以在某個條件滿足時自動取消訂閱，map 可以對事件數據進行轉換，finally 可以在訂閱結束時執行清理工作。這些功能讓開發者能夠以一種更優雅的方式管理事件流。

三、更多 Observable API 的示例

1. 監聽用戶輸入并實時響應

const input = document.getElementById("searchInput");
input.when("input")
  .map((e) => e.target.value) // 提取輸入的值
  .filter((value) => value.length >= 3) // 只處理輸入長度大于等于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),
  });

這里我們處理了一個 WebSocket 連接的消息事件，解析消息數據，并且只關注類型為通知的消息。這對于實時應用，比如聊天或通知系統，非常有幫助。

3. 實現防抖功能

const button = document.getElementById("myButton");
button.when("click")
  .takeUntil((e) => new Promise((resolve) => setTimeout(resolve, 300))) // 300毫秒內沒有新的點擊才觸發
  .subscribe({
    next: (e) => console.log("Debounced click"),
  });

這個示例展示了如何實現防抖功能，即在一定時間內沒有新的事件發生時才觸發處理函數。

這對于處理頻繁的用戶交互，比如快速點擊按鈕，非常有用。

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),
  });

在這個示例中，我們組合了按鈕點擊和輸入框輸入兩個事件流，實現了點擊按鈕后開始監聽輸入，再次點擊按鈕停止監聽的功能。

這展示了 Observable API 在處理復雜事件流組合時的靈活性。

四、與 RxJS 的對比

在 Observable API 出現之前，RxJS 是處理這類異步事件流的流行庫。

RxJS 提供了豐富的操作符和強大的功能，但它需要額外引入庫，增加了項目的依賴和學習成本。

Observable API 的出現可能會讓 RxJS 逐漸淡出歷史舞臺。原因有以下幾點：

• 原生支持：Observable API 是 Chromium 團隊推出的標準 API，未來可能會被瀏覽器原生支持，無需額外引入庫。
• 簡潔易用：Observable API 的語法更加簡潔，降低了開發門檻，開發者可以更快上手。
• 性能優化：作為原生 API，Observable API 在性能上可能更具優勢，減少了額外庫帶來的性能開銷。

不過，RxJS 在一些復雜場景下仍然有它的價值，比如它提供了更多高級的操作符和功能，能夠滿足更復雜的業務需求。

所以，Observable API 并不是完全取代 RxJS，而是給開發者提供了一種更輕量、更高效的選擇。

五、Observable API 的未來

目前，Observable API 還處于提案階段，但它已經展示出了巨大的潛力。

隨著 Chromium 團隊的推動，它有望正式進入 Web 標準，成為瀏覽器原生支持的功能。這意味著開發者以后可以直接使用它，而不需要依賴第三方庫。

Observable API 不僅簡化了代碼，還提升了性能，讓事件處理變得更加直觀和高效。

可以預見，未來它將在前端開發中占據重要地位，幫助我們構建更復雜、更流暢的用戶交互體驗。

WICG/Observable：https://wicg.github.io/observable/