RxJS 5.5 在上周已经发布了 beta.7 版本,在 5.5 中 RxJS 引入了 lettable operator
这一个新特性。依靠这个特性,RxJS 中的流与操作符可以用更加 FP 的风格组合起来。
lettable operator 试图解决的问题
在之前版本的 RxJS 5 中,操作符通过 dot chaining 的方式进行组合。在考虑 bundle size 的场合,RxJS 的操作符往往以
import "rxjs/add/operator/SOME_OPERATOR"
(instace operator)import "rxjs/add/observable/SOME_OPERATOR"
(static operator)
的方式加入应用程序中。通过这种方法,避免了把完整的 RxJS 全部打包。
这种 rxjs/add
风格的引入,相当于在 RxJS 库外动态地将操作符加入 Observable
和 Observable.prototype
当中。这也就使得 RxJS 几乎不能受益于 webpack 2 或者 rollup 的 tree-shaking。
此外,如果没有使用引入的操作符,TypeScript、Flow 或者各种 linter 是不会因此报错的。考虑到 RxJS 中琳琅满目的操作符,很多时候会在编码过程中不断更换操作符,有时候是会忘记删除引入的操作符,导致 bundle size 的增加。
lettable operator 的使用方法
lettable operator
这个名字是 RxJS 社区中的黑话,RxJS 社区中有 issue 在讨论是不是要改一个对初学者更友好的名字。
lettable operator
需要配合 Observable.prototype.pipe
一起使用,下面来看一个使用 lettable operator
的例子:
import { range } from 'rxjs/observable/range';
import { map, filter, scan } from 'rxjs/operators';
const source$ = range(0, 10);
source$.pipe(
filter(x => x % 2 === 0),
map(x => x + x),
scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x))复制代码
相对的,dot chaining 风格的写法如下:
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/range";
import "rxjs/add/operator/map";
import "rxjs/add/operator/filter";
import "rxjs/add/operator/scan";
const source$ = Observable.range(0, 10);
source$
.filter(x => x % 2 === 0)
.map(x => x + x),
.scan((acc, x) => acc + x, 0)
.subscribe(x => console.log(x));复制代码
以 lettable operator
构成的 pipeline 要比 dot chaining 更贴近于现在流行的 FP 风格。更重要的是,这种方法在引入操作符时比 dot chaining 的 rxjs/add/*
风格方便实用得多。
因此,也有相关的 issue 在讨论是否将 rxjs/add/*
风格的引入方式在 6.0 中发布到另外的 NPM package 中。
lettable operator 的原理
Observable.prototype.pipe
的代码如下:
import { pipeFromArray } from './util/pipe';
class Observable<T> implements Subscribable<T> {
pipe<R>(...operations: OperatorFunction<T, R>[]): Observable<R> {
if (operations.length === 0) {
return this as any;
}
return pipeFromArray(operations)(this);
}
}复制代码
在此调用了 ./util/pipe
中由 pipeFromArray
这个高阶函数所返回的函数:
export function pipeFromArray<T, R>(fns: Array<UnaryFunction<T, R>>): UnaryFunction<T, R> {
if (!fns) {
return noop as UnaryFunction<any, any>;
}
if (fns.length === 1) {
return fns[0];
}
return function piped(input: T): R {
return fns.reduce((prev: any, fn: UnaryFunction<T, R>) => fn(prev), input);
};
}复制代码
在这一过程中,piped
拿到了 Observable 的 this
,并以此作为之后 reduce 过程中的初始值。
在这个 reduce
方法结束后,就得到了需要的 Observable。