RxJS

2021年11月25日 阅读数:4
这篇文章主要向大家介绍RxJS,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

Rx,Reactive Extension,源于微软,火于NetFlix。html

在线编辑器jsbin.react

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

Rx理解:把任何变化想象成依据事件纬度变化的事件流ajax

1、rxjs改造输入框

rxjs库编辑器

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

把input事件转换为Observable学习

es6代码url

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))

效果spa

2、计算面积

Rx有不少强大的运算符,能够合并转换流。.net

html:code

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