RxJS

2018-06-24 02:11:42来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:angular2配置使用ng2-bootstrap

下一篇:js常用的功能 table&gt;tr&gt;td