Rx,Reactive Extension,源於微軟，火於NetFlix。
進去官網，點Language選擇rxjs，到官方github, 再到rxjs官方網站https://rxjs.dev/。
在線編輯器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 有問題歡迎與我討論，共同進步。