Introduction

(RxJS 官方網頁,不負責任翻譯 by Wayne)

介紹

RxJS 是一個函式庫,使用可觀察資料序列的方式,構成異步行為和基於事件的程式。函式庫提供一個核心型別(可觀察型別(Observable)),衛星型別(觀察者型別(Observer)、管理者型別(Schedulers)、傳播者型別(Subjects))跟操作者,操作者由陣列原型 (map, filter, reduce, every, 等等…)所啟發,讓異步行為的處理如同資料集合(collections)。

想像 RxJS 是一種提供事件處理的 Lodash

ReactiveX 透過迭代模式(Iterator pattern)據資料集合的功能化程式設計(functional programming with collections)觀察者模式(Observer pattern)的結合,滿足以理想方式管理事件序列的需求。

幾個重要的 RxJS 概念以解決異步事件管理的有:

  • 可觀察函式(Observable):表示一種構想中可被調用的資料集合,該資料集合來自未來的值或事件。
  • 觀察函式(Observer):是一種資料集合的回呼函式,該函式知道如何聆聽被觀察者傳送的資料。
  • 已訂閱函式(Subscription):表示一種已經被執行的被觀察者,主要常用於取消己被執行的被觀察者。
  • 操作函式(Operator):一種單純的函式,該函式能使資料集合的運作,以功能化程式設計來處理,如map,filter,concat,reduce, 等等.
  • 傳播函式(Subject):同等於 EventEmitter,而且是唯一的方法把廣播值或事件傳給複數的觀察者。
  • 管理函式(Schedulers):是一種中央調度器可控制多重事件(concurrency),允許使用者協調,如 setTimeout 或 requestAnimationFrame 或其它由計算所發生的事件。

第一個範例

一般來說你註冊一個監聽事件。
<guide-overview>:num1:#1
使用 RxJS 建立一個可觀察者來取代。
<guide-overview>:num1:#2

純淨

什麼原因使得 RxJS 如此強大,是因為它有能力使用純淨的函式去產生值。意謂著你的程式碼不容易出錯。
一般來說你會建立一個不純淨的函式,裡面的其它程式碼片段會搞亂你的區塊狀態。
<guide-overview>:num2:#1
使用 RxJS 你隔離了區塊狀態
<guide-overview>:num2:#2

程序流

RxJS 有各式各樣的操作函式去幫助你控制事件流如何通過你的可觀察函式
這是一個你將允許每秒最多一次的點擊事件,使用簡陋的 JavaScript:
<guide-overview>:num3:#1
使用 RxJS
<guide-overview>:num3:#2
其它控制程序流的操作函式有 filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged 等等。

你可以轉換已經通過你的可觀察函式的值
這是一個你可以在每次點擊加上現在滑鼠 x 位置,使用簡陋的 JavaScript:
<guide-overview>:num4:#1
使用 RxJS
<guide-overview>:num4:#2
其它產生值的操作函式有 pluck, pairwise, sample