Rxjs入门

Rxjs英文官网域名已经变为 https://rxjs-dev.firebaseapp.com/

本文中的例子均采用5.3版本

感受Rxjs

第一个小练习

学习用observable的方式来注册事件监听&＃xff0c;注释的代码为注册事件监听器的常规写法。



click me


第二个练习 学习用observable的方式控制事件的流动性 &＃xff0c;注释代码为传统方式何控制一秒钟内最多点击一次



click me


我们继续对第二个例子做一些小变化 &＃xff0c;引入map 可以过滤事件返回的数据&＃xff0c;在这个例子中我们过滤了event数据&＃xff0c;只保留了它的clientY属性&＃xff0c;这样在订阅&＃xff08;subscribe&＃xff09;方法中就只监听到clientY的数据

Rx.Observable.fromEvent(button, &＃39;click&＃39;).throttleTime(1000).map((data) &＃61;> {return data.clientY}).subscribe(coordinate &＃61;> console.log(coordinate));

可观察对象 观察者 订阅的关系

数据流

订阅方法的两种写法

下面用代码来说明subscribe方法的写法 &＃xff0c;需要注意的是点击事件不存在complete方法 所有你不会看到complete方法被调用。 用户每点一次就执行一次next方法



click me


形象了解创建 订阅 执行 Observable&＃xff08;可观察对象&＃xff09;的过程

接着我们学习如何用create方法来创建数据流&＃xff0c; 来更清晰的理解可观察对象&＃xff0c;观察者和订阅之间的关系。注意本例子中的数据是同步数据&＃xff0c;虽然rxjs是专门处理异步数据的&＃xff0c;但是不仅限于处理异步数据&＃xff0c;同步数据也可以。 我们需要知道的是 当create方法里 调用error方法 &＃xff0c;则后面的任何方法都不再执行。 当调用complete方法后 后面的方法也都不再执行。

其实我们也可以用setTimeout函数来模拟异步数据流&＃xff0c;来观察返回的数据流。 写法如下

var observer &＃61; {next: function (value) {console.log(value);},error: function (error) {console.log(error);},complete: function () {console.log(&＃39;Completed&＃39;);}}Rx.Observable.create(function (obs) {obs.next(&＃39;A value&＃39;);obs.next(&＃39;A second value&＃39;);setTimeout(function () {obs.complete();}, 2000)//obs.error(&＃39;Error&＃39;);obs.next(&＃39;A thrid value&＃39;);}).subscribe(observer);

接着我们用create方法再把我们第一个按钮点击的例子重写一遍&＃xff0c;以便更深刻理解rxjs观察订阅的机制。 代码如下



Click me


使用unsubscribe方法清理 Observable &＃xff08;可观察对象&＃xff09;

对于那些已经不再使用的可观察对象会停留在内存中&＃xff0c;有可能造成内存泄露&＃xff0c;因此我们可以手工清理这些可观察对象。

下面的代码模拟在5秒之后清除了订阅机制&＃xff0c;5秒之后你继续点击按钮将接收不到期待订阅的数据。



Click me


Operators 操作符

常见的操作符如map&＃xff08;对订阅的数据过滤&＃xff09;&＃xff0c;throttleTime&＃xff08;延迟订阅的频率&＃xff09;