博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Rxjs入门
阅读量:6955 次
发布时间:2019-06-27

本文共 1808 字,大约阅读时间需要 6 分钟。

hot3.png

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

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

感受Rxjs

第一个小练习

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

  
第一个Rxjs练习

 

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

  
Flow

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

Rx.Observable.fromEvent(button, 'click')      .throttleTime(1000)      .map((data) => {        return data.clientY      })      .subscribe(coordinate => console.log(coordinate));

 

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

 

数据流

 

订阅方法的两种写法

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

  

 

形象了解创建 订阅 执行 Observable(可观察对象)的过程

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

  

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

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

 

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

  

使用unsubscribe方法清理 Observable (可观察对象)

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

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

  

Operators 操作符

常见的操作符如map(对订阅的数据过滤),throttleTime(延迟订阅的频率)

转载于:https://my.oschina.net/lilugirl2005/blog/3018443

你可能感兴趣的文章
centos7防火墙
查看>>
React-Native 入门环境搭建(Window环境)
查看>>
How to Create a WordPress Child Theme
查看>>
HTML <input> 标签
查看>>
JQueryEasyUI学习笔记(九)datagrid查找
查看>>
使用JFreeChart-创建组合图(之CombinedCategoryPlot)
查看>>
通过SQL生成项目
查看>>
软件设计工具会这个就够了-Visual paradigm – community
查看>>
GitHub是如何让程序员简历更加出彩的
查看>>
Mac Emacs 23.2 和 24.2 的 info.plist 文件的比较
查看>>
Apache与Tomcat的整合
查看>>
【CF 应用开发大赛】英雄
查看>>
activity的生命周期
查看>>
asp.net中调用javascript自定义函数的方法(包括引入JavaScript文件)总结
查看>>
bootstrap-table关闭无限分页后点击上一页下一页bug修复
查看>>
快应用quickapp快速入门教程 by五个半柠檬
查看>>
Demo:PhotoPickerSwift
查看>>
MVC,JS跨域访问
查看>>
桃花源记雪精灵攻略
查看>>
19.Bootstrap入门练习--2013-05-31
查看>>