在前端開發(fā)的領(lǐng)域里，一直都有一個難題，那就是如何更高效、更優(yōu)雅地處理異步事件。

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

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

一、Observable API 是什么？

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

想象一下，你正在監(jiān)控一個按鈕的點擊事件，傳統(tǒng)的做法可能需要寫一堆嵌套的函數(shù)和復(fù)雜的邏輯來處理。

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

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

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

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

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

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

const button = document.getElementById("myButton");
button.when("click")
  .filter((e, index) => index % 2 === 0) // 只處理偶數(shù)次點擊
  .subscribe({
    next: (e) => console.log("Button clicked"),
  });

在這段代碼中，我們通過 when("click") 創(chuàng)建了一個可觀察的點擊事件流，然后用 filter 方法只保留偶數(shù)次點擊，最后用 subscribe 來處理這些事件。整個過程非常直觀，不需要復(fù)雜的回調(diào)嵌套。

除此之外，Observable API 還提供了很多強大的操作符，比如 takeUntil 可以在某個條件滿足時自動取消訂閱，map 可以對事件數(shù)據(jù)進行轉(zhuǎn)換，finally 可以在訂閱結(jié)束時執(zhí)行清理工作。這些功能讓開發(fā)者能夠以一種更優(yōu)雅的方式管理事件流。

三、更多 Observable API 的示例

1. 監(jiān)聽用戶輸入并實時響應(yīng)

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

在這個示例中，我們監(jiān)聽了一個輸入框的輸入事件，提取輸入的值，并且只在輸入長度大于等于 3 時才進行處理。這在實現(xiàn)搜索建議或?qū)崟r驗證功能時非常有用。

2. 處理 WebSocket 數(shù)據(jù)流

const socket = new WebSocket("wss://example.com");
socket.when("message")
  .map((e) => JSON.parse(e.data)) // 解析消息數(shù)據(jù)
  .filter((data) => data.type === "notification") // 只處理通知類型的消息
  .subscribe({
    next: (data) => console.log("New notification:", data),
  });

這里我們處理了一個 WebSocket 連接的消息事件，解析消息數(shù)據(jù)，并且只關(guān)注類型為通知的消息。這對于實時應(yīng)用，比如聊天或通知系統(tǒng)，非常有幫助。

3. 實現(xiàn)防抖功能

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

這個示例展示了如何實現(xiàn)防抖功能，即在一定時間內(nèi)沒有新的事件發(fā)生時才觸發(fā)處理函數(shù)。

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

4. 組合多個事件流

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

button.when("click")
  .flatMap(() => input.when("input")) // 點擊按鈕后監(jiān)聽輸入
  .takeUntil(button.when("click")) // 直到再次點擊按鈕停止監(jiān)聽
  .subscribe({
    next: (e) => console.log("Input value:", e.target.value),
  });

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

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

四、與 RxJS 的對比

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

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

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

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

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

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

五、Observable API 的未來

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

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

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

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

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