Angular变更检测的订阅异步事件
如何订阅异步事件
只要发生了异步操作,Angular就后进行变更检测,那么Angular是如何订阅(感知)到异步事件的呢?也就是说,当异步事件执行的时候,Angular是怎么知道的呢?先来了解一下zone.js。
zone.js
zone.js 提供了一种称为zone的机制,用于封装和拦截浏览器中的异步任务,还提供了异步生命周期钩子和统一的异步错误处理机制。
zone.js是通过打补丁的方式来对浏览器中常见方法和元素进行拦截,比如setTimeout和HTMLElement.prototype.onclick。Angular在启动时会利用zone.js修补几个浏览器API,从而去实现异步事件的捕获,并在捕获事件后调用变更检测。
package.json如下示例:
{
"dependencies": {
...
"zone.js": "~0.10.2"
}
}
可以简单来看一下zone.js。
比如,在Vue2中的数据响应式,我们都知道它是使用了Object.defineProperty来实现数据变化的拦截,但是它存在很多问题,它只可以监听对象的属性变化,但是对于数组的变化时无能为力的。数组原型中有7个方法可以引起数组的变化,对于这些方法Vue都需要感知到他们,那怎么实现呢?拿push方法作为例子,需要把原始的push方法覆盖掉,实现一个新的push,新的push方法要保留原始push方法的功能,还要通知依赖进行更新。
zone.js中的实现和这个思路是一样的,来看一段简化的代码模拟一下setTimeout的补丁过程:
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);
// 执行完原始方法后就可以做其他拦截后需要进行的操作了
...
};
}
是不是对zone.js的基本原理有了了解了呢。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfeaih
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01