5. 创建 Observable
时间:2022-06-16
本文章向大家介绍5. 创建 Observable,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
第一个示例
注册事件监听器的常规写法。
var button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));
使用 RxJS 的话,创建一个 observable 来代替(基于最新的Rxjs6版本写法)
<script src='./lib/rxjs.6.3.3.umd.min.js'></script>
<script>
const { fromEvent } = rxjs;
const button = document.querySelector('button');
fromEvent(button, 'click')
.subscribe(() => console.log('Clicked!'));
</script>
上面例子中的fromEvent
就是基于Event 建立 Observable,fromEvent 的第一个参数要传入 DOM 对象,第二个参数传入要监听的事件名。
创建 Observable 有很多操作符
image.png
使用Create操作符从头开始创建一个Observable, 这个接收一个回调函数,把observer作为参数
// Observer 是一个对象,这个对象具有三个方法,分别是 next, error, complete
// 建立 Observable 最简单方法是用 create 方法
// create 接收一个回调函数,把observer作为参数
const observer = {
next: value => {
console.log(`observer:` + value)
},
error: error => {
console.log('Error:', error);
},
complete: () => {
console.log('complete');
}
}
var observable = rxjs.Observable
.create(observer => {
observer.next('Jerry');
observer.next('Anna');
observer.complete();
observer.next('not work');
})
// 建立观察者来订阅 observable
// 订阅一个 Observable 就像是执行一个 function
observable.subscribe(
observer
)
使用from
操作符将对象、字符串,数组,promise 等其他类型转换为Observable,请自己敲一遍看结果。
const {from} = rxjs;
function f() {
return from(arguments);
}
const observer = {
next: value => {
console.log('Next: ' + value);
},
error: error => {
console.log('Error:', error);
},
complete: () => {
console.log('Complete');
}
}
// Array Like Object
f(1, 2, 3).subscribe(observer);
// string
from('foo').subscribe(observer);
// Set, any iterable object
const s = new Set(['foo', window]);
from(s).subscribe(observer);
// Promise
const source = from(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello RxJS!');
}, 3000)
}))
source.subscribe(observer);
- 如果未来的AI拥有意识,你舍得不理它吗?
- centos下安装python3
- jboss:在standalone.xml中设置系统属性(system-properties)
- iptables
- Django-form表单
- 比较git commit 两个版本之间次数
- eclipse: workspace出错导致无法启用的解决
- 【node错误】/usr/bin/env: node: No such file or directory
- Django比较相等或者不相等的模板语法ifequal / ifnotequal
- 使用testNGListenter来自定义日志
- 通过代码去执行testNG用例
- $.cookie is not a function;原因及解决办法
- 为何学习以及如何理解SSH框架?内含Hibernate学习指南
- 生成唯一标识 字符串跟时间戳的结合
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 线性表--顺序表--双向链表(六)
- C/C++什么时候使用二级指针,你知道吗?
- 萌新学习C++容易漏掉的知识点,看看你中招了没有(一)
- 萌新不看会后悔的C++string字符串常用知识点总结
- salesforce零基础学习(九十六)项目中的零碎知识点小总结(四)
- CodeForces - 260C
- 疯子的算法总结(九) 图论中的矩阵应用 Part 2 矩阵树 基尔霍夫矩阵定理 生成树计数 Matrix-Tree
- STL常用对象,不会搞得C++跟没学一样
- 桥接模式
- CF--思维练习--CodeForces - 220C Little Elephant and Shifts (STL模拟)
- CF--思维练习--CodeForces - 221C-H - Little Elephant and Problem (思维)
- CF--思维练习--CodeForces - 219C Color Stripe (思维)
- 疯子的算法总结(六) 简单排序总 选择排序+插入排序+比较排序+冒泡排序
- C语言基础知识总结
- CF思维联系--CodeForces - 218C E - Ice Skating (并查集)