Introduction to the implementation principle of rxjs observable filter operator

Look at the following paragraph  filter Operator  Code for ：

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

import { filter } from 'rxjs/operators';

function filterKey(key) {
 console.log('input: ', key);
 const result: MonoTypeOperatorFunction<KeyboardEvent> = filter(
 (event: KeyboardEvent) => {
 console.log('input event: ', event);
 return event.key === key;
 }
 );
 console.log('result: ', result);
 return result;
}

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


original  Observable  call  pipe, Perform customization  Operator  The logic of , Generate a in logic  filter Operator  example . Single step debugging is as follows ：

Return to one  filterOperatorFunction：

filter  The call returns a  filterOperatorFunction：

So far, we're done  pipe  The first paragraph of the two-stage call ： obtain  filter  Back to  filterOperatorFunction.

And then execute  pipe  The second paragraph of the operation , As shown in the figure above , The original  Observable  Pass in  filterOperatorFunction：

This second operation , Will create new  FilterOperator  example , stay  lift  In operation , Create a new one  Observable, Then put the original  Observable  Set to this new  Observable  Example of  source  Field , take  FilterOperator  The instance is assigned to the original  Observable  Of  Operator  Field .

pipe  The result of call execution , Back to a new  Observable  to  pipe  The caller . Finally we  subscribe  Of , This is this.  pipe  Back to  Observable.

subscribe  Inside ,this  Namely  pipe  Back to the new  Observable,operator  Point to  filterOperator,source  Point to  fromEvent  Returned original  Observable：

The first use of  TypeScript  Object structure syntax ,object destructing, take  this.operator  Fields are assigned to variables  Operator, Then use the original  Observable  As context , call  filter Operator.

such ,pipe  Back to  Observable  Subscribe to , Will be passed to the original  Observable  Of  subscribe  operation ：

When we hit a random character on the keyboard , Trigger  MouseEvent  Corresponding  handler, stay  handler  Call inside  Observer  Of  next  operation .

next  The operation will eventually trigger  filtersubscriber predicate  The attribute is passed in by the application developer  filter Operator  Is an anonymous function of ：

filter  The input parameter is also a function , The input to this function is  MouseEvent：

fromEvent  New  Observable, In fact, the implementation logic is internal , Also called  subscriber  Of  next  Method to emit values . meanwhile  fromEvent  Back to  Observable  Same as other creation operators, such as  of  The characteristics of , Is that it can respond to all kinds of events , such as  document  Of  keyup  event .

This event registration mechanism , It's in the picture above  

setupSubscription

  Function .

The specific implementation of registration , Adopted the native browser provided  addEventListener, Callers are  document  Global object , Incoming  eventName  by  keyup,handler  namely  fromEvent  Internal implementation , That is, the code in the green highlighted area in the figure above .

export declare function filter<T>(predicate: (value: T, index: number) => boolean, thisArg?: any): MonoTypeOperatorFunction<T>;


filter Operator  Accept one  predicate  As input parameter , Returns a type of  MonoTypeOperatorFunction  Function of .

there  T  Is a type parameter .MonoType  Corresponding  T, It means single parameter .

MonoTypeOperatorFunction  It's a special kind  OperatorFunction, When the input and return parameters of the latter are the same , That is, specialization into a single type  OperatorFunction：

OperatorFunction  It's another kind of special  UnaryFunction( One variable function ), When the input and output types of a unary function are the same  Observable  when , That is, specialization becomes  OperatorFunction.