RxJs fromEvent 工作原理分析

fromEvent(this.test, 'click').subscribe((event) => console.log(event));

this.test 的赋值逻辑：

this.test = this.document.getElementById('test');

每当该 id 为 test 的按钮被点击一次，则 fromEvent issue 一个新的值，内容为 MouseClick 事件：

本文介绍这个神奇的 fromEvent 的工作原理。

在 rxjs/_esm2015/index.js 下能看到所有 rxjs 支持的 operators：

fromEvent 构造函数支持最多 4 个输入参数，但我的例子里，之传入了两个。因此直接进入 Observable 对象的构造逻辑：

Observable 的构造函数，只有一个输入参数，该输入参数为一个函数。这个函数是一个匿名函数，只有函数体而无函数名称。

把该匿名函数维护在 Observable 的私有属性 _subscribe 里。

fromEvent 返回一个可观察对象，调用该对象的 subscribe 方法，给其注册观察者。

上图 observerOrNext 就是我们应用程序里，传入给 subscribe 方法的匿名函数，即使用 console.log 打印 id 为 test 的 button 被点击之后抛出的 MouseEvent 事件。

因为我们暂时没有给 fromEvent 返回的 Observable 对象指定 operator，因此第 20 行 operator 为 undefined：

调用函数 toSubscriber 创建一个新的 subscriber：

上图 nextOrObserver 就是我应用程序里指定的 console.log(event) 匿名函数，只是用 Subscriber 包了一层。

Subscriber.js 内部：Subscriber 的 destination 属性，指向了 SafeSubscriber 实例：

再回到 Observable 的 subscribe 方法。现在我们知道了，在其 toSubscriber 方法里，创建了一个 Subscriber 实例，其重要属性如上图1，2，3所示。因为没有为该 Observable 指定 operator，所以第 22 行的 IF 分支进不去，而是执行第 26 行的 else 分支。

进入 trySubscribe 方法：

_trySubscribe 是 _subscribe 方法的包裹，再加上错误处理：

文章开头提到的 Observable 私有属性 _subscribe, 指向 fromEvent.js 第14行匿名函数：

现在执行该匿名函数，函数体内 setupSubscription.

如何判断传进来的变量是 EventTarget 呢？

检查其是否具有 addEventListner 和 removeEventListener 即可。

这里把 fromEvent.js 里某个 handler 函数，作为按钮点击后的事件处理函数进行注册。

注意，这里给 click 点击事件注册的，并不是我们应用程序指定的 console.log(event), 而是 fromEvent.js 里一个内部函数，如下图所示：

当我点击 UI 的 test 按钮后，触发 click 事件，fromEvent.js 里定义的事件处理函数被调用：

还记得我们之前提到的 toSubscriber 函数调用么？将应用程序定义的 console.log(event), 包装成 SafeSubscriber，存储到 _next 属性里。

这里，最终触发 subscriber 的私有属性 _next 指向的应用程序处理逻辑：

使用了 JavaScript function 原生的 call 方法进行调用：

最终，进入了应用程序打印代码执行，谜底就此解开：

更多Jerry的原创文章，尽在：“汪子熙”:

RxJs fromEvent 工作原理分析相关推荐

RxJs map operator 工作原理分析
使用一个例子来研究 map 操作符的工作原理. 推荐阅读本文之前,先浏览这篇文章RxJs fromEvent 工作原理分析以了解相关知识. 源代码: import { Component, OnIni ...
Hadoop生态圈-Zookeeper的工作原理分析
Hadoop生态圈-Zookeeper的工作原理分析作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 无论是是Kafka集群,还是producer和consumer都依赖于Zoo ...
原理剖析（第 009 篇）ReentrantReadWriteLock工作原理分析
2019独角兽企业重金招聘Python工程师标准>>> 原理剖析(第 009 篇)ReentrantReadWriteLock工作原理分析一.大致介绍 1.在前面章节了解了AQS和 ...
匿名突破网络限制 (Tor工作原理分析)
转载自:http://blog.163.com/mike_gz/blog/static/247532200672932800/ 网管顾名思义,就是天天管着网络.想尽各种手段限制我们上网的人.在网络中订 ...
滑环的基本结构及工作原理分析
滑环是工业机械部件,基本原理是利用导电机械部件的折动或滚动在接触旋转部件和静止部件之间传递电能或电信号的产业部部件,作为360度旋转方式的一个相当好的解决方法,那么,下面一起了解下滑环的基本结构及工作 ...
【高通SDM660平台 Android 10.0】(19) --- Camera_focus、Camera_snapshot、volume_up 按键工作原理分析
[高通SDM660平台 Android 10.0]19 --- Camera_focus.Camera_snapshot.volume_up 按键工作原理分析一. DTS代码配置二. Kernel ...
二极管温度补偿电路工作原理分析
众所周知,PN结导通后有一个约为0.6V(指硅材料PN结)的压降,同时PN结还有一个与温度相关的特性:PN结导通后的压降基本不变,但不是不变,PN结两端的压降随温度升高而略有下降,温度愈高其下降的量愈 ...
船型开关工作原理分析
船型开关工作原理分析由于疫情,这几个月一直无聊的待在家里,就把家里翻出来的旧电热锅简单的修理了一下,关于电热锅的修理博客之后有时间再写吧,这次就总结下在修过程中让我一直很头疼的船型开关的工作原理. ...
全自动升降柱工作原理分析
全自动升降柱工作原理分析全自动升降柱使用范围比较广泛,在城市交通安全中提供非常便捷的交通舒缓措施,可控制车辆行驶确保安全,全自动升降柱外观设计精美, 具有高的防撞击效果,当电动升降柱升起可在地面形成 ...

RxJs fromEvent 工作原理分析

RxJs fromEvent 工作原理分析相关推荐

最新文章

热门文章