運算子是 RxJS 庫和 Observables 的基礎塊。 它使我們能夠透過使用一些關鍵字（函式）來執行復雜的操作。 運算子只不過是獲取源 Observable、對其執行操作並返回新 Observable 的函式。

rxJS 的 管道運算子 pipe 允許我們連結運算子。每個運算子都接受一個 Observable 並返回一個 Observable，這種一致的行為使得連結成為了可能。 Operator 返回的 Observable 作為下一個運算子的輸入。

下面是一個最簡單的自定義 Operator 的例子。

```typescript
import { interval, of } from 'rxjs';

function fancyOperator(source) {
  return source;
}

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

```

pipe 呼叫並不會真正執行 Operator 函式體的邏輯，直至 Observable 被 subscribe 為止？？是這樣嗎？

![](https://img-blog.csdnimg.cn/img_convert/7afa6604fb82f24913fc1d6184a38e95.png)

pipeFromArray 僅僅取出 Operation 陣列裡儲存的第一個函式。
![](https://img-blog.csdnimg.cn/img_convert/12fadc4da61dd1e6910d462d09b571f7.png)

然後呼叫之，輸入引數 this 就是源 Observable.

![](https://img-blog.csdnimg.cn/img_convert/ce81d8bb45995784785a4a1343f40309.png)

下面我們對 fancyOperator 新增少許功能。

```typescript
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 只發射一次資料，就進入終止狀態。

![](https://img-blog.csdnimg.cn/img_convert/64912301f3cb2cafd4ff1e9184fbe814.png)

看一個現實專案中自定義 Observable 的例子：

```typescript
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，返回一個新的函式。

![](https://img-blog.csdnimg.cn/img_convert/bc09c9d3cdabca74b15232a5adb96899.png)

看一下 filter 返回函式執行時列印的值：

![](https://img-blog.csdnimg.cn/img_convert/2b953a51a9e4fd6e2395822639bcb093.png)

把原始的 Observable，傳送給 filter 返回的函式並執行：

![](https://img-blog.csdnimg.cn/img_convert/70ca073712abbf4adc6dc0a588482a2b.png)

filter 返回的函式對原始 Observable 進行加工，返回一個新的 Observable：
![](https://img-blog.csdnimg.cn/img_convert/480d8534b5752e86b2954b9ada48410a.png)

觸發 filterOperator 的建構函式：

![](https://img-blog.csdnimg.cn/img_convert/5d58a89ea304c8b249452e8effbe2dd3.png)

把新建的 filterOperator 例項傳入原始 Observable 的 lift 方法。這個 lift 操作非常簡單，新建一個 Observable，把原始的 Observable掛接到新的 Observable 的 source 欄位，同時把 Operator 例項賦給新的 Observable 例項的 operator 方法。

![](https://img-blog.csdnimg.cn/img_convert/f33d643f82d3bb281606d9e6638877c6.png)

因此最後訂閱時，訂閱的是 lift 操作之後的新的 Observable 例項。
![](https://img-blog.csdnimg.cn/img_convert/b241220a90047a8fa08add4f3e3346aa.png)

subscribe 會觸發 filterOperator 的 call 方法：
![](https://img-blog.csdnimg.cn/img_convert/d07ee3dcfa293c9774a76602e3c86ffb.png)

![](https://img-blog.csdnimg.cn/img_convert/59a35671e1cea914e3b673fd070d2277.png)

![](https://img-blog.csdnimg.cn/img_convert/f51bf690ef3be83b682e2c2d7d93e64c.png)

rxjs Observable 自定義 Operator 的開發技巧

相關文章