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.