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

比如，用戶點(diǎn)擊按鈕、鼠標(biāo)移動(dòng)這些看似簡單的操作，背后其實(shí)都需要一套復(fù)雜的機(jī)制來管理。

最近，Chromium 團(tuán)隊(duì)宣布推出 Observable API，這可能會(huì)徹底改變我們處理這些事件的方式。

一、Observable API 是什么？

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

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

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

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

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

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

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

比如，下面是一個(gè)簡單的示例：

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

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

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

三、更多 Observable API 的示例

1. 監(jiān)聽用戶輸入并實(shí)時(shí)響應(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),
  });

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

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

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

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

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

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

這對(duì)于處理頻繁的用戶交互，比如快速點(diǎn)擊按鈕，非常有用。

4. 組合多個(gè)事件流

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

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

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

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

四、與 RxJS 的對(duì)比

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

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

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

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

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

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

五、Observable API 的未來

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

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

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

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

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