In thepreviousarticle, we introduced what exactly change detection is, used a native JS example to better understand change detection, and introduced In which scenarios change detection will be triggered. The previous article summarized 5 common scenarios in work, but we need to think about it first. Does Angular's change detection support all asynchronous events? If supported, can it be listed? If some are not supported, which ones are not supported? These issues will be explained in detail in subsequent articles. [Related tutorial recommendations: "angular tutorial"]

How to subscribe to asynchronous events

As long as an asynchronous operation occurs, Angular will perform change detection , so how does Angular subscribe to (perceive) asynchronous events? In other words, how does Angular know when an asynchronous event is executed? Let’s first learn about zone.js.

zone.js

zone.js provides a mechanism called zone for encapsulating and intercepting asynchronous tasks in the browser, and also providesAsynchronous life cycle hookAnd unified asynchronous error handling mechanism.

zone.js uses patches to intercept common methods and elements in browsers, such assetTimeoutandHTMLElement.prototype.onclick. When Angular starts, it will usezone.jsto patch several browser APIs to capture asynchronous events and call change detection after capturing the events.

package.jsonThe following example:

{ "dependencies": { ... "zone.js": "~0.10.2" } }

You can take a brief look at zone.js.

For example, in the data responsiveness in Vue2, we all know that it usesObject.definePropertyto intercept data changes, but it There are many problems. It can only monitor the property changes of objects, but it cannot do anything about changes in arrays. There are 7 methods in the array prototype that can cause changes to the array. Vue needs to be aware of these methods. How to implement them? Taking the push method as an example, you need to overwrite the original push method and implement a new push. The new push method should retain the functions of the original push method and also notify dependencies to update.

The implementation in zone.js is the same as this idea. Let’s look at a simplified code to simulate the patching process ofsetTimeout:

function setTimeoutPatch() { // 存储原始的setTimeout var originSetTimeout = window['setTimeout']; // 对浏览器原生方法的包裹封装 window.setTimeout = function () { return global['zone']['setTimeout'].apply(global.zone, arguments); }; // 创建包裹方法，提供给上面重写后的setTimeout使用 Zone.prototype['setTimeout'] = function (fn, delay) { // 先调用原始方法 originSetTimeout.apply(window, arguments); // 执行完原始方法后就可以做其他拦截后需要进行的操作了 ... }; }

Is it correct for zone. Now I understand the basic principles of js.

For more programming-related knowledge, please visit:Programming Teaching! !

The above is the detailed content of A brief analysis of subscribing to asynchronous events in Angular change detection. For more information, please follow other related articles on the PHP Chinese website!