通俗理解RxJS（一）

自學 Rx 快有一個周了， 它很是適合處理複雜的異步場景。結合本身所學，決定寫系列教程。

我認爲， Rx 中強大的地方在於兩處

• 管道思想，經過管道，咱們訂閱了數據的來源，並在數據源更新時響應 。
• 強大的操做符，經過操做符對流和流中的數據轉換，拼接，以造成咱們想要的數據模型 。

數據管道

在 Rx 中，咱們先預裝好管道，經過管道流通數據 。這些管道的來源多種， create ，from， fromEvent， of .., 經過操做符將管道 拼接，合併，映射...造成最終的數據模型 。
對於管道來講，有兩點很是重要

• . 管道是懶執行的，只有訂閱器 observer subscribe了 數據管道，這個管道纔會有數據流通 。
• . 整個節點組成一個完整的管道，訂閱了後面的管道節點，也會同時訂閱以前的管道節點 ，每一個節點接受以前的值，併發出新值。

在不少教程中， Rx 每每以這個例子開始 ：

const example = Rx.Observable.create ((observer) => {
    const timer = setTimeout(() => {
      observer.next(8);
    })
    observer.next(10);
    return () => {
      clearTimeout(timer);
    }
  })

  const unsubscribe = example.subscribe((a) => {
    console.log(a);
  })

  //結果固然是 10， 8.

這個例子發現了兩種類似的設計模式

• 迭代器模式
• 觀察者模式

迭代器模式：相似於 JS 6 增長的迭代器 。

const iterator = [1, 2, 3][Symbol.iterator]();
  while(true) {
    const result = iterator.next();
    if(result.done) return;

    cnosole.log(result.value);
  }

觀察者模式： 事件模型是最多見的觀察者模式， 定義生產者與消費者，生產者發出值，消費者收到消息，並執行相應行文 。 Observable 與其不一樣的是， Observable 是拉模型，懶執行，只有指定訂閱者，生產者纔會派發。 Rx 中的推模型實現Subject 就是採用觀察者模式，無論有沒有訂閱者，都會推送數據 。

操做符

Rx 如此高效和強大，得益於其強大的操做符 。
主要包含下面幾類

• 建立操做符： create， range， of， from， fromEvent， fromPromise, empty ..
• 組合 contact ,merge, startWith, zip ..
• 時間 delay , throttle, dobounceTime, interval ..
• 過濾： filter, first, last, skip, distinct, take ..
• 轉換： buffer,map, mapTo, mergeMap, switch, switchMap, reduce, scan ..
• 工具： do, toPromise ..

vs Promise

不少大牛介紹，在相對簡單的狀況下，大可沒必要使用 Observable ，Promise 足以應對。
相似於下面的模型

new Promise ((resolve, reject) = {})
  .then()
  .then()
  .then() ...

這種模型很是大程度改善了 回調地獄， 也能處理大部分的異步場景，name 對於 Rx ， 它有哪些地方不足呢 ？

• Rx 抽象了數據的來源，主要是對事件和網絡請求的抽象 。
• Rx 能夠屢次發出數據， 而Promise 只能發出一次數據， 複用以前的管道。
• Rx 能夠是懶執行的，只有在訂閱以後，纔會發出值，也就是訂閱 。 而Promise 在定義後理解執行 。
• 注意到咱們上面的例子，是能夠cancle 取消訂閱的。

return () => {
        clearTimeout(timer);
      }
    })

    const unsubscribe = example.subscribe((a) => {
      console.log(a);
    })

create 會返回一直函數，這個函數用於清理管道執行產生的垃圾，好比這裏的定時器 。調用 unsubscribe 會取消訂閱，並執行清理函數。

• Promise 中數據變換隻有經過then 鏈來進行，這點在fetch API 中體現最明顯。可是Rx包含大量的操做符，簡化了不少運算 。

尾聲

在這一篇， 我介紹了Rx 的概念，以及與Promise 的對比，理解Rx ，主要是理解管道思想和響應式編程 。說Rx 門檻高，也就是新手們管道思想和響應式編程在前端的實踐很少。 在下一篇，會分類使用全部的操做符，若是算是API 文檔，那就死文檔吧 。