rxjs Observable 自定义 Operator 的开发技巧

本文介绍 Angular 项目开发中，需要自定义 Operator 的场合以及自定义操作符的详细记述实现细节。

操作符是 RxJS 库和 Observables 的基础块。 它使我们能够通过使用一些关键字（函数）来执行复杂的操作。 运算符只不过是获取源 Observable、对其执行操作并返回新 Observable 的函数。

rxJS 的 管道运算符 pipe 允许我们链接运算符。每个运算符都接受一个 Observable 并返回一个 Observable，这种一致的行为使得链接成为了可能。 Operator 返回的 Observable 作为下一个运算符的输入。

下面是一个最简单的自定义 Operator 的例子。

import { interval, of } from 'rxjs';

function fancyOperator(source) {
  return source;
}

interval(1000)
  .pipe(fancyOperator)
  .subscribe((value) => console.log(value));

pipe 调用并不会真正执行 Operator 函数体的逻辑，直至 Observable 被 subscribe 为止？？是这样吗？

pipeFromArray 仅仅取出 Operation 数组里存储的第一个函数。

然后调用之，输入参数 this 就是源 Observable.

下面我们对 fancyOperator 添加少许功能。

import { interval, Observable } from 'rxjs';

function fancyOperator(source) {
  return Observable.create((observer) => {
    observer.next('Jerry');
    observer.complete();
  });
}

interval(1000)
  .pipe(fancyOperator)
  .subscribe((value) => console.log(value));

这里我们采取了移花接木的方法，在自定义 Operator 里返回了一个新的 Observable，这个 Observable 只发射一次数据，就进入终止状态。

看一个现实项目中自定义 Observable 的例子：

import { fromEvent, interval, Observable } from 'rxjs';

import { filter } from 'rxjs/operators';

function filterKey(key) {
  return filter((event: KeyboardEvent) => event.key === key);
}

fromEvent(document, 'keyup')
  .pipe(filterKey('Enter'))
  .subscribe(
    (data) => console.log(data) // KeyboardEvent
  );

这个自定义 Operator 的输入是 Enter，输出是 filter 调用的返回值，一个新的函数。filter 调用接收一个 predicate，返回一个新的函数。

看一下 filter 返回函数运行时打印的值：

把原始的 Observable，传送给 filter 返回的函数并执行：

filter 返回的函数对原始 Observable 进行加工，返回一个新的 Observable：

触发 filterOperator 的构造函数：

把新建的 filterOperator 实例传入原始 Observable 的 lift 方法。这个 lift 操作非常简单，新建一个 Observable，把原始的 Observable挂接到新的 Observable 的 source 字段，同时把 Operator 实例赋给新的 Observable 实例的 operator 方法。

因此最后订阅时，订阅的是 lift 操作之后的新的 Observable 实例。

subscribe 会触发 filterOperator 的 call 方法：