RxJS

1、简介

RxJS 全名是Reactive Extension for JavaScript,即JavaScript 的响应式扩展。

响应式的思路是把随时间不断变化的数据、状态、事件等转成可被观察的序列(Observe Sequence),然后订阅序列中那些 Observable 对象的变化,一旦变化,

就会执行事先安排好的各种转换和操作。RxJS作为一个库,可以和任何框架混用。

 

 

2、data stream

以一个click event 来说,在用户点击的动作发生后,会有一段时间出发了几个事件:value, error or completed signal, 如下图:

RxJS 将任何事情包括variables, user inputs, properties, caches, data structures等都转化为data streams,并通过observe 这些 data streams的变化,做出响应的处理。

 

3、RxJS  安装 http://reactivex.io/rxjs/manual/installation.html

 

4、创建 Observable 

Observable(可观察对象)是基于推送(Push)运行时执行(lazy)的多值集合。

(1) 通过 构造方法创建

  /--js---
import $ from  'jquery' ;
import Rx from  'rxjs/Rx' ;
const source$ =  new  Rx.Observable(
     observe => {
         console.log( 'creating observable' );
         //更新 数据流
         observe.next( 'hello rxjs' );
         observe.next( 'another value' );
 
         observe.error( new  Error( 'Error: Something went wrong!' ))
 
         setTimeout(() => {
             observe.next( 'yet another value' );
             observe.complete();
         }, 2000)
     }
);
 
source$
     . catch (err => Rx.Observable.of(err))
     .subscribe(
     x => {
         console.log(x);
     },
     err => {
         console.log(err);
     },
     complete => {
         console.log( 'complete' );
     }
);

 

 


(2) 从事件创建, 实现一个简单的input输入 =>  数据更新

//---html---
<input id= "input" >
<p id= "inputVal" ></p>
  
/--js---
import $ from  'jquery' ;
import Rx from  'rxjs/Rx' ;
const input = $( '#input' );
const inputVal = $( '#inputVal' );
const inputSource$ = Rx.Observable.fromEvent(input,  'keyup' );
 
inputSource$.subscribe(
     //捕获的值
     (e) => {
         inputVal.html(e.currentTarget.value);
     },
     //捕获的错误
     (err) => {
         console.log( 'err: ' , err);
     },
     //完成
     () => {
         console.log( 'Complete' );
     }
);

 

(3) 从 promise 创建

  
/--js---
//普通的 promise 封装
import $ from  'jquery' ;
import Rx from  'rxjs/Rx' ;
const myPromise =  new  Promise((resolve, reject) => {
    console.log( 'create promise!' );
     setTimeout(() => {
         resolve( 'hello from promise!' );
     }, 3000)
});
 
const promiseSource$ = Rx.Observable.fromPromise(myPromise);
 
promiseSource$.subscribe(x => console.log(x));
  
// ajax 数据请求
function  getUser(username) {
     return  $.ajax({
         url:  'https://api.github.com/users/'  + username,
         dataType:  'jsonp'
     }).promise();
}
 
Rx.Observable.fromPromise(getUser( 'wikidson' ))
     .subscribe( x => {
         console.log(x);
     });

 

(4)从 array 创建

  
/--js---
//普通的 promise 封装
import $ from  'jquery' ;
import Rx from  'rxjs/Rx' ;
从 promise 创建
  
/--js---
//普通的 promise 封装
import $ from  'jquery' ;
import Rx from  'rxjs/Rx' ;
const myPromise =  new  Promise((resolve, reject) => {
    console.log( 'create promise!' );
     setTimeout(() => {
         resolve( 'hello from promise!' );
     }, 3000)
});
 
const promiseSource$ = Rx.Observable.fromPromise(myPromise);
 
promiseSource$.subscribe(x => console.log(x));
 
 
// ajax 数据请求
function  getUser(username) {
     return  $.ajax({
         url:  'https://api.github.com/users/'  + username,
         dataType:  'jsonp'
     }).promise();
}
 
Rx.Observable.fromPromise(getUser( 'wikidson' ))
     .subscribe( x => {
         console.log(x);
     });

 

5. 使用场景

(1)click event 

如果我们想要能够抓取single click 与 double click 的事件,用最早的javascript 可能会需要变量来记录状态、时间等,但通过RxJS 提供的api,实现如下:

 

  
/--js---
//普通的 promise 封装
import $ from  'jquery' ;
import Rx from  'rxjs/Rx' ;
从 promise 创建
  
/--js---
//普通的 promise 封装
import $ from  'jquery' ;
import Rx from  'rxjs/Rx' ;
const multiClickStream = clickStream$.bufferWhen(() => clickStream$.debounceTime(250))
     .map((list) => list.length)
     .filter((len) => len === 2);
 
multiClickStream.subscribe(
     (numClicks) => {
         console.log(numClicks);
     }
);

 

从上图可以看出,RxJS 帮我们把 stream 上的event 依照我们想要的时间做整理,buffer 住 触发时间在 250ms 间的 click events ,并且利用map函数抓出每个 event list 的长度, 并进一步 筛选出 长度等于 2 ,也就是 double click 的event 出来。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值