运算符是RxJS库和Observables的基本构建块。它使我们能够通过使用一些关键字(函数)来执行复杂的操作。运算符只不过是接受源Observable、对其执行操作并返回新Observable的函数。rxJS管道操作符pipe允许我们链接操作符。每个操作符接受一个Observable并返回一个Observable,这种一致的行为使得链接成为可能。Operator返回的Observable用作下一个operator的输入。下面是一个最简单的自定义Operator的例子。import{interval,of}from'rxjs';functionfancyOperator(source){returnsource;}interval(1000).pipe(fancyOperator).subscribe((value)=>console.log(value));pipecall不会真正执行Operator函数体的逻辑,直到Observable被订阅为止??是这样吗?pipeFromArray只是获取存储在Operation数组中的第一个函数。然后调用它,入参this就是源Observable。接下来我们向fancyOperator添加一些功能。import{interval,Observable}from'rxjs';functionfancyOperator(source){returnObservable.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';从'rxjs/operators'导入{过滤器};functionfilterKey(key){returnfilter((event:KeyboardEvent)=>event.key===key);}fromEvent(document,'keyup').pipe(filterKey('Enter')).subscribe((data)=>console.log(data)//键盘事件);thisfrom定义运算符的输入为回车,输出为filter调用的返回值,一个新的函数。过滤器调用接受一个谓词并返回一个新函数。看一下filter返回函数运行时打印的值:将原来的Observable传递给filter返回的函数并执行:filter返回的函数处理原来的Observable,返回一个新的Observable:触发的构造函数filterOperator:将新创建的Observable的filterOperator实例传递给原Observable的lift方法。这种升降机操作非常简单。创建一个Observable,将原来的Observable附加到新Observable的source字段,并将Operator实例赋值给新Observable实例的操作符方法。所以当你最后订阅时,你订阅了提升操作后的新Observable实例。订阅会触发filterOperator的调用方法:
