Working principle analysis of rxjs fromEvent

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

this.test The assignment logic of ：

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

Whenever it's time to id by test The button is clicked once , be fromEvent issue A new value , The content is MouseClick event ：

This article introduces this magical fromEvent How it works .

stay rxjs/_esm2015/index.js You can see all rxjs Supported by operators：

fromEvent Constructors support up to 4 Three input parameters , But in my case , It introduces two . So go straight to Observable Object construction logic ：

Observable Constructor for , There is only one input parameter , The input parameter is a function . This function is an anonymous function , Only function body without function name .

Maintain the anonymous function in Observable Private property of _subscribe in .

fromEvent Returns an observable object , Calling the subscribe Method , Register an observer .

Upper figure observerOrNext In our application , Pass it on to subscribe Method , That is to use console.log Print id by test Of button Thrown after being clicked MouseEvent event .

Because we haven't given fromEvent Back to Observable Object designation operator, So the first 20 That's ok operator by undefined：

Call function toSubscriber Create a new subscriber：

Upper figure nextOrObserver It is specified in my application console.log(event) Anonymous functions , Just use Subscriber It's wrapped up .

Subscriber.js Inside ：Subscriber Of destination attribute , Yes SafeSubscriber example ：

Back to Observable Of subscribe Method . Now we know , In its toSubscriber In the method , Created a Subscriber example , Its important properties are shown in the figure above 1,2,3 Shown . Because there is no such thing as Observable Appoint operator, So the first 22 Yes IF Branch in , It's about carrying out the first 26 Yes else Branch .

Get into trySubscribe Method ：

_trySubscribe yes _subscribe Method package , Plus error handling ：

As mentioned at the beginning of the article Observable Private property _subscribe, Point to fromEvent.js The first 14 Self-executing anonymous function ：

Now execute the anonymous function , Function body setupSubscription.

How to judge whether the variable passed in is EventTarget Well ？

Check if it has addEventListner and removeEventListener that will do .

Here is the fromEvent.js In a certain handler function , Register as the event handler after the button is clicked .

Be careful , Here to click Click on the event register , Not specified by our application console.log(event), It is fromEvent.js An internal function in , As shown in the figure below ：

When I click UI Of test After button , Trigger click event ,fromEvent.js The event handler defined in is called ：

Remember what we mentioned earlier toSubscriber Function call ？ Application defined console.log(event), Package as SafeSubscriber, Store in _next In the attribute .

here , Final trigger subscriber Private property of _next Pointing to the application processing logic ：

Used JavaScript function Native call Method call ：

Final , Enter the application print code execution , The answer is solved ：