站长资讯网
最全最丰富的资讯网站

浅析Angular变更检测中的订阅异步事件

浅析Angular变更检测中的订阅异步事件

前端(vue)入门到精通课程,老师在线辅导:联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

在上一篇文章中,我们介绍了具体什么是变更检测,用一个原生JS例子来更好的去理解变更检测,以及介绍了在哪些场景下会触发变更检测。前文中总结了5种工作中常见的场景,但是我们需要先思考一下,Angular的变更检测是否支持所有的异步事件呢?如果支持,可以列出来吗?如果有些不支持,哪些不支持呢?这些问题会在后续文章中详细的讲解。【相关教程推荐:《angular教程》】

如何订阅异步事件

只要发生了异步操作,Angular就后进行变更检测,那么Angular是如何订阅(感知)到异步事件的呢?也就是说,当异步事件执行的时候,Angular是怎么知道的呢?先来了解一下zone.js。

zone.js

zone.js 提供了一种称为zone的机制,用于封装和拦截浏览器中的异步任务,还提供了异步生命周期钩子和统一的异步错误处理机制。

zone.js是通过打补丁的方式来对浏览器中常见方法和元素进行拦截,比如setTimeoutHTMLElement.prototype.onclick。Angular在启动时会利用zone.js修补几个浏览器API,从而去实现异步事件的捕获,并在捕获事件后调用变更检测。

package.json如下示例:

{   "dependencies": {        ...     "zone.js": "~0.10.2"   } }
登录后复制

可以简单来看一下zone.js。

浅析Angular变更检测中的订阅异步事件

比如,在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的基本原理有了了解了呢。

赞(0)
分享到: 更多 (0)