rxjs Observable filter Operator 的实现原理介绍
看下面这段使用 filter Operator 的代码:
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
);
原始 Observable 调用 pipe,执行自定义 Operator 的逻辑,在逻辑里生成一个 filter Operator 实例。单步调试如下:
返回一个 filterOperatorFunction:
filter 调用返回的是一个 filterOperatorFunction:
至此我们只完成了 pipe 两段调用的第一段:得到 filter 返回的 filterOperatorFunction.
然后执行 pipe 操作的第二段,如上图图例所示,将原始 Observable 传入 filterOperatorFunction:
这个第二段操作,就会创建新的 FilterOperator 实例,在 lift 操作里,新建一个 Observable,然后把原始的 Observable 设置为这个新 Observable 实例的 source 字段,将 FilterOperator 实例赋给原始 Observable 的 Operator 字段。
pipe 调用执行的结果,返回一个新的 Observable 给 pipe 的调用者。最后我们 subscribe 的,就是这个 pipe 返回的 Observable.
subscribe 内部,this 就是 pipe 返回的新 Observable,operator 指向 filterOperator,source 指向 fromEvent 返回的原始 Observable:
首先利用 TypeScript 对象结构语法,object destructing,将 this.operator 字段赋给变量 Operator,然后以原始 Observable 作为上下文,调用 filter Operator.
这样,pipe 返回的 Observable 上进行订阅,会传递到原始 Observable 的 subscribe 操作:
当我们在键盘上随便敲击一个字符后,触发 MouseEvent 对应的 handler,在 handler 里调用 Observer 的 next 操作。
next 操作最后会触发 filtersubscriber predicate 属性即应用开发人员传入 filter Operator 的匿名函数:
filter 输入参数也是一个函数,该函数的输入即 MouseEvent:
fromEvent 新建的 Observable,其实现逻辑内部,同样调用了 subscriber 的 next 方法来发射值。同时 fromEvent 返回的 Observable 同其他创建操作符比如 of 的特色之处,就在于其能够响应各种事件,比如 document 的 keyup 事件。
这种事件注册机制,是在上图 setupSubscription
函数里实现的。
注册的具体实现,采取了浏览器原生提供的 addEventListener,调用者为 document 全局对象,传入的 eventName 为 keyup,handler 即 fromEvent 内部实现,即上图绿色高亮区域内的代码。
export declare function filter<T>(predicate: (value: T, index: number) => boolean, thisArg?: any): MonoTypeOperatorFunction<T>;
filter Operator 接受一个 predicate 作为输入参数,返回一个类型为 MonoTypeOperatorFunction 的函数。
这里的 T 为类型参数。MonoType 对应 T,意思是单参数。
MonoTypeOperatorFunction 是一种特殊的 OperatorFunction,当后者的输入和返回参数都相同时,即特殊化为单类型 OperatorFunction:
OperatorFunction 又是一种特殊的 UnaryFunction(一元函数),当一元函数的输入和输出类型都是一个 Observable 时,即特殊化成了 OperatorFunction.
相关文章
- cglib动态代理实现原理_动态代理的两种方式
- jquery的delegate实现原理[通俗易懂]
- 【JAVA定时器】四种常见定时器的原理和简单实现
- DeepLink的实现原理「建议收藏」
- AlphaCode论文和背后原理快速解读,也许程序员短期内还不会被取代...
- jsonp的实现原理_jsonp为什么要提供回调函数
- 理论:第一章:HashMap底层实现原理,红黑树,B+树,B树的结构原理,volatile关键字,CAS(比较与交换)实现原理
- webpack打包原理分析和实现(三)
- hashmap的底层实现原理_hashtable底层数据结构
- 一步步实现React-Hooks核心原理
- 「Go工具箱」go语言csrf库的使用方式和实现原理
- snmp协议分析_snmp协议工作原理
- docker映射端口命令_docker底层原理
- jdk1.7 hashmap扩容_Java并发实现原理:JDK源码剖析
- 从源码角度看React-Hydrate原理
- 理解SpringIOC原理手写SpringIOC
- docker容器运行原理以及创建过程
- Linux利用inotify和rsync服务实现数据实时同步的原理解析
- HTTPS 原理浅析及其在 Android 中的使用详解手机开发
- 实现分布式锁的Redis原理(redis分布式锁原理)
- 原理Linux下实现共享内存的原理浅析(linux共享内存实现)
- Oracle中序列号的实现原理(oracle序列号)
- 深度解析redis的hash结构:使用方法与实现原理(redis的hash结构)
- aphoreLinux:信号量管理原理及其应用(linuxsem)
- Linux 内核烧写:原理、流程及实现(linux 内核烧写原理)
- SSM框架与Redis整合的原理探究(ssm整合redis原理)
- 探究深入探究Redis集群内部原理(redis 集群内部原理)
- Redis中超时淘汰策略实现原理(redis超时淘汰原理)
- H2数据库导入CSV文件实现原理简析
- iframe上下滚动条如何默认在下方实现原理