Rx,Reactive Extension,源於微軟，火於NetFlix。

線上編輯器jsbin.

CDN:https://unpkg.com/rxjs/bundles/rxjs.umd.min.js  

Rx理解：把任何變化想象成依據事件緯度變化的事件流

一、rxjs改造輸入框

rxjs庫

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-beta.12/Rx.min.js"></script>

把input事件轉換為Observable

es6代碼

console.log('RxJS included?', !!Rx);

const height=document.getElementById("height");
const height$ =Rx.Observable.fromEvent(height,'keyup');
height$.subscribe(val=>console.log(val.target.value))

效果

二、計算面積

Rx有很多強大的運算符，可以合併轉換流。

html：

  <input type="number" id="length">
  <input type="number" id="width">
  <div id="area"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-beta.12/Rx.min.js"></script>

js:

console.log('RxJS included?', !!Rx);

const length=document.getElementById("length");
const width=document.getElementById("width");
const area=document.getElementById("area");

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value');
const width$ =Rx.Observable.fromEvent(width,'keyup').pluck('target','value');

const area$=Rx.Observable.combineLatest(length$,width$,(l,w)=>{return l*w});

area$.subscribe(val=>{console.log(val);area.innerHTML=val})

只要一個流有最新值就會重新計算一遍。

combineLatest使用場景：width,height沒有值時不計算，都有值時根據任意一個值的最新值重新計算。

zip使用場景：width,height沒有值時不計算，新值成對出現再計算。

利用這些運算符很快拼裝成複合需求的邏輯，這些流主動把數據推給你，你只要去訂閱就好。

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：https://www.cnblogs.com/starof/p/8987263.html 有問題歡迎與我討論，共同進步。