原文地址：https://rxjs.dev/guide/overview

簡介

RxJS 是組合非同步以及基於事件的使用可觀察者序列的程式類庫。它提供一個核心類型，Observable，附屬類型（Observer,Schedulers,Subjects）並且受到了數組額外操作（map,filter,reduce,every 等等）啟發來將非同步事件作為集合來處理。

可以理解為 RxJS 就是事件的 Loadsh

ReactiveX 結合了觀察者模式，迭代模式以及集合式的函數事編程來滿足對管理事件的需求。

RxJS 解決非同步事件的管理的基本概念是：

• Observable（可觀察的）：表示可調用的值或事件的集合
• Observer（觀察者）：回調的集合，它知道怎麼去監聽 Observable 派送（傳遞）的值
• Subscription（訂閱）：表示 Observable 的執行，主要的用途取消執行
• Operators（操作者）：是一個純粹的功能，它以一種函數式編程風格來處理集合的操作，就像數組的 map,concat,filter,reduce 等等
• Subject（主題）：這個等價於一個事件觸發器（EventEmitter），只能以多播的方式傳遞值或事件給多個多個觀察者（Observers）
• Schedulers（調度者）：是控制併發的集中式調度程式，允許我們調節當電腦發生瞭如 setTimeout 或是 requestAnimationFrame 以及其他的時候

第一個例子

你一般註冊的一個事件偵聽是這樣的：

document.addEventListener('click', () => console.log('Clicked!'));

使用 RxJS 你可以創建一個可觀察的對象來替代：

import { fromEvent } from 'rxjs';
fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));

純粹（Purity）

RxJS 之所以強大，是因為它能使用純函數來生成值。也就是說你的代碼很少發生錯誤。

通常你會新建一個非純函數，在你的代碼片段裡面會混亂你自己的狀態

let count = 0;
document.addEventlistener('click', () => console.log(`Clicked ${++count} times`));

而 RxJS 會隔離你的狀態

import { fromEvent } from 'rxjs';
import { scan } from 'rxjs/operators';

fromEvent(document, 'click')
    .pipe(scan(count => count + 1, 0))
    .subscribe(count => console.log(`Click ${count} times`));

scan 操作的工作就像數組的 reduce 一樣。它會傳遞一個值給回調函數。回調函數會返回一個值，並且返回的值將成為下一次回調運行傳遞的下一個值。

流（Flow）

RxJS 有一個完整的操作符，它們都能幫助你通過你的 ovservables 控制事件流。

下麵這段代碼就是展示你將允許每秒最多一次點擊之後，用原生 javascript

let count = 0;
let rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', () => {
    if(Date.now() - lastClick >= rate){
        console.log(`Click ${++count} times`);
        lastChild = Date.now();
    }
});

RxJS：

import { fromEvent } from 'rxjs';
import { throttleTime, scan } from 'rxjs/operators';

fromEvent(document, 'Click')
    .pipe(
        throttleTime(1000),
        scan(count => count + 1, 0)
    )
    .subscribe(count => console.log(`Click ${count} times`));   

還有其他的流控制像 filter,delay,debounceTime,take,takeUtil,distinct,distinctUntilChanged 等等。

值

你可以在你自己的可觀察對象之間傳遞值
這裡告訴你怎麼在每次點擊的時候加當前滑鼠的 x 坐標，用 javascript 代碼：

let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', event => {
  if (Date.now() - lastClick >= rate) {
    count += event.clientX;
    console.log(count);
    lastClick = Date.now();
  }
});

用 RxJS：

import { fromEvent } from 'rxjs';
import { throttleTime, map, scan } from 'rxjs/operators';

fromEvent(documeht, 'click')
    .pipe(
        throttleTime(1000),
        map(event => event.clientX),
        scan((count, clientX) => count + clientX, 0)
    )
    .subscribe(count => console.log(count));

其他產生值的操作還有 pluck,pairwise,sample 等