[Javascript + rxjs] Introducing the Observable
In this lesson we will get introduced to the Observable type. An Observable is a collection that arrives over time. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.
Here is an example how to handle events normally:
var button = document.getElementById('button'); var handler = function(e){
console.log('clicked');
}; button.addEventListener('click', handler);
So when fire the click event, in the console will log 'clicked'.
If we want to remove the event listener:
var button = document.getElementById('button'); var handler = function(e){
console.log('clicked');
button.removeEventListener('click', handler);
}; button.addEventListener('click', handler);
Now let see how can we achieve the same effect by using observable.
var Observable = Rx.Observable; //Create click events by Observable
var clicks = Observable.fromEvent(button, 'click'); //Then we are able to use forEach, concatAll, map, fliter function
clicks.forEach(function() {
console.log('clicked');
});
How to remove the event listener:
var Observable = Rx.Observable; //Create click events by Observable
var clicks = Observable.fromEvent(button, 'click'); //Then we are able to use forEach, concatAll, map, fliter function
//The function return an subscription object, which we can use to call dispose() method to remove listener
var subscription = clicks.forEach(function() {
console.log('clicked');
subscription.dispose();
});
forEach method actually has three callback function which are onNext, onError, onCompleted:
var Observable = Rx.Observable; //Create click events by Observable
var clicks = Observable.fromEvent(button, 'click'); //Then we are able to use forEach, concatAll, map, fliter function
//The function return an subscription object, which we can use to call dispose() method to remove listener
var subscription = clicks.forEach(function onNext() {
console.log('clicked');
subscription.dispose();
}, function onError() {
console.log('error');
}, function onCompleted() {
console.log('complete');
});
[doc](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md)
[Javascript + rxjs] Introducing the Observable的更多相关文章
- [Javascript + rxjs] Using the map method with Observable
Like an array, Observable has a map method that allows us to transform a sequence into a new Observa ...
- [Javascript + rxjs] Simple drag and drop with Observables
Armed with the map and concatAll functions, we can create fairly complex interactions in a simple wa ...
- 九、Rxjs请求对Observable进行封装
1.引入 Http.Jsonp.Rxjs 三个模块 2.请求中添加一个 .map(res => res.json) 问题 1.Property 'map' does not exist on t ...
- rxjs简单的Observable用例
import React from 'react'; import { Observable } from 'rxjs'; const FlowPage = () => { const onSu ...
- [rxjs] Creating An Observable with RxJS
Create an observable var Observable = Rx.Observable; var source = Observable.create(function(observe ...
- [RxJS] Subject: an Observable and Observer hybrid
This lesson teaches you how a Subject is simply a hybrid of Observable and Observer which can act as ...
- rxjs——subject和Observable的区别
原创文章,转载请注明出处 理解 observable的每个订阅者之间,是独立的,完整的享受observable流动下来的数据的. subject的订阅者之间,是共享一个留下来的数据的 举例 这里的cl ...
- Angular快速学习笔记(4) -- Observable与RxJS
介绍RxJS前,先介绍Observable 可观察对象(Observable) 可观察对象支持在应用中的发布者和订阅者之间传递消息. 可观察对象可以发送多个任意类型的值 -- 字面量.消息.事件. 基 ...
- Angular学习笔记—RxJS与Observable(转载)
1. Observable与观察者模式的关系 其实这里讲的Observable就是一种观察者模式,只不过RxJS把Observable结合了迭代模式以及附件了很多的operator,让他变得很强大,也 ...
随机推荐
- JAVA NIO之Character Set
明白以下几个概念: 字母集(Character Set),汉字,特殊符号,字母这些都是字符集: 字符编码集(Coded character set),将字符集的字符使用数字进行编码:比如ASCII,就 ...
- iBatis系列之三
iBatis和Hibernate最大差别就是在于iBatis没有严格的和具体的表做关联:而是将结果集和DAO做关联. iBatis的SqlConfig.xml配置一个properties文件,其实可以 ...
- jquery经验1
1.Javascript刷新页面的几种方法: location.reload()// 真刷新 location=location location.assign(location) document. ...
- ABAP写的一个递归
需求:计算下面树形结构中每个子节点与最上层父节点的对应关系. DATA:BEGIN OF lt_ztab OCCURS 0, a TYPE string, b TYPE str ...
- Discuz!X3.1 全新安装图文教程
http://www.discuz.net/thread-3456887-1-1.html
- 系统的了解DJANGO中数据MODULES的相关性引用
数据库结构如下: from django.db import models class Blog(models.Model): name = models.CharField(max_length=1 ...
- 【HDU 1542】Atlantis 矩形面积并(线段树,扫描法)
[题目] Atlantis Problem Description There are several ancient Greek texts that contain descriptions of ...
- UML 中关系详解以及在visio中的表示
http://www.cnblogs.com/kittywei/archive/2013/05/15/3079536.html
- [转贴]从零开始学C++之STL(二):实现一个简单容器模板类Vec(模仿VC6.0 中 vector 的实现、vector 的容量capacity 增长问题)
首先,vector 在VC 2008 中的实现比较复杂,虽然vector 的声明跟VC6.0 是一致的,如下: C++ Code 1 2 template < class _Ty, cl ...
- 应用程序域 z
应用程序域(AppDomain)已经不是一个新名词了,只要熟悉.net的都知道它的存在,不过我们还是先一起来重新认识下应用程序域吧,究竟它是何方神圣. 应用程序域 众所周知,进程是代码执行和资源分配的 ...