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有问题欢迎与我讨论，共同进步。