VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript >
  • JavaScript教程之RxJS

RxJS

 

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



相关教程