走進JavaScript響應式編程(Reactive Programming)

或許"響應式佈局"這個名單你們都聽過或者都本身實現過，那麼"響應式編程"是什麼呢？下面咱們來具體聊一聊。

個人理解

從字面意思上咱們能夠大體理解爲：全部的事件存在於一條事件總線上，全部的事件均可以看做將來某個時間將要發生的事件流（stream）,當事件總線上的事件執行完後會主動去通知"觀察他們的對象"，好比咱們常常用到的settimeout、異步等都屬於該範疇。

下面是官方解釋：

在某種程度上，這並非什麼新東西。事件總線(Event buses)或我們常見的單擊事件就是一個異步事件流，你能夠觀察這個流，也能夠基於這個流作一些自定義操做（原文：side effects，反作用，本文皆翻譯爲自定義操做）。響應式就是基於這種想法。你可以建立全部事物的數據流，而不單單只是單擊和懸停事件數據流。 流廉價且無處不在，任何事物均可以看成一個流：變量、用戶輸入、屬性、緩存、數據結構等等。好比，假設你的微博評論就是一個跟單擊事件同樣的數據流，你可以監聽這個流，並作出響應。

補充說明

"響應式編程"採用了「訂閱／觀察者」設計模式，使訂閱者能夠將通知主動發送給各訂閱者。

RxJs一個響應式編程的實現庫

RxJS 是一個庫，它經過使用 observable 序列來編寫異步和基於事件的程序。它提供了一個核心類型 Observable，附屬類型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 啓發的操做符 (map、filter、reduce、every, 等等)，這些數組操做符能夠把異步事件做爲集合來處理。

---

如下幾個概念是RxJs中比較重要的：

1. Observable (可觀察對象): 表示一個概念，這個概念是一個可調用的將來值或事件的集合。
2. Observer (觀察者): 一個回調函數的集合，它知道如何去監聽由 Observable 提供的值。
3. Subscription (訂閱): 表示 Observable 的執行，主要用於取消 Observable 的執行。
4. Operators (操做符): 採用函數式編程風格的純函數 (pure function)，使用像 map、filter、concat、flatMap 等這樣的操做符來處理集合。
5. Subject (主體): 至關於 EventEmitter，而且是將值或事件多路推送給多個 Observer 的惟一方式。
6. Schedulers (調度器): 用來控制併發而且是中央集權的調度員，容許咱們在發生計算時進行協調，例如 setTimeout 或 requestAnimationFrame 或其餘。

實例說明

註冊事件監聽器的常規寫法。

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

使用 RxJS 的話，建立一個 observable 來代替。

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

未完待續...