Skip to content

RxJS-Operators(操作符) #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
isNeilLin opened this issue Sep 20, 2017 · 0 comments
Open

RxJS-Operators(操作符) #3

isNeilLin opened this issue Sep 20, 2017 · 0 comments
Labels
框架&工具库 Vue和React等前端框架或工具库相关

Comments

@isNeilLin
Copy link
Owner

RxJS-Operators(操作符)

操作符是Observable类型上的方法,比如.map(),.filter(),.merge()。当操作符被调用时,它们不会改变已经存在Observable示例,而是返回一个新的Observable。它的subscription逻辑基于第一个Observable。

操作符是函数,它基于当前的Observable创建一个新的Observable。这是一个无副作用的操作:前面的Observable保持不变。

操作符本质上是一个纯函数 (pure function),它接收一个 Observable 作为输入,并生成一个新的 Observable 作为输出。订阅输出 Observalbe 同样会订阅输入 Observable。

示例

function multiByTen(input){
	var output = Rx.Observable.create(function subscribe(observer){
		input.subscribe({
			next: v => {
				observer.next(10*v)
			},
			error: err => {
				observer.error(err)
			},
			complete: () => {
				observer.complete()
			}
		})
	})
	return output;
}

var observable = Rx.Observable.from([1,2,3,4])
var output = multiByTen(observable);
output.subscribe(x=>{
	console.log(x) // 10,20,30,40
})

订阅output会导致input Observable 也被订阅。被称之为“操作符订阅链”。

实例操作符 VS 静态操作符

通常提到操作符时,我们指的是实例操作符,它是Observable实例上的方法。

将multiplyByTen改造为实例操作符:

Rx.Observable.prototype.multiByTen = function(){
	var input = this;
	var output = Rx.Observable.create(function subscribe(observer){
		input.subscribe({
			next: v => {
				observer.next(10*v)
			},
			error: err => {
				observer.error(err)
			},
			complete: () => {
				observer.complete()
			}
		})
	})
	return output;
}

实例操作符是使用this关键字来指代输入的 Observable 的函数。

使用实例操作符

var observable = Rx.Observable.from([1,2,3,4]).Rx.Observable.prototype.multiByTen();
observable.subscribe(x=>{
	console.log(x) // 10, 20, 30, 40
})

除了实例操作符,还有静态操作符,它们是直接附加到 Observable 类上的。静态操作符在内部不使用 this 关键字,而是完全依赖于它的参数

静态操作符是附加到Observable类上的纯函数,通常用来从头开始创建Observable。

最常用的静态操作符类型是所谓的创建操作符。它们只接收非Observable参数,比如数字,然后创建一个新的 Observable ,而不是将一个输入 Observable 转换为输出 Observable。
此外,还有一些组合操作符也可能是静态的,比如merge,combineLatest,concat等。这些作为静态运算符是有道理的,因为它们将多个 Observables 作为输入,而不仅仅是一个。

示例

var observable1 = Rx.Observable.interval(1000);
var observable2 = Rx.Observable.interval(400);

var merged = Rx.Observable.merge(observable1, observable2);

操作符分类

创建操作符

转换操作符

过滤操作符

组合操作符

错误处理操作符

工具操作符

条件操作符

数学操作符

@isNeilLin isNeilLin added the RxJS label Sep 20, 2017
@isNeilLin isNeilLin added 框架&工具库 Vue和React等前端框架或工具库相关 and removed RxJS labels Jun 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
框架&工具库 Vue和React等前端框架或工具库相关
Projects
None yet
Development

No branches or pull requests

1 participant