首页 > 语言 > JavaScript > 正文

详解AngularJS脏检查机制及$timeout的妙用

2024-05-06 15:15:43
字体:
来源:转载
供稿:网友

||浏览器事件循环和Angular的MVW

“脏检查”是Angular中的核心机制之一,它是实现双向绑定、MVVM模式的重要基础。

Angular将双向绑定转换为一堆watch表达式,然后递归检查这些watch表达式的结果是否变了,如果变了,则执行相应的watcher函数。等到Model的值不再变化,也就不会再有watcher函数被触发,一个完整的digest循环就结束了。

因为我们不需要改变编程思维,就能用相同的语言、相同的事件模型,快速开发NodeJS程序,所以NodeJS迅速火起来,JavaScript full-stack也日渐流行。

我们经常听说Angular是一个MV*的框架,这是因为Angular拓展了浏览器的事件模型,建立了一个自己的上下文环境。

||Angular中的$watch函数

watch表达式很灵活:可以是一个函数,可以是$scope上的一个属性名,也可以是一个字符串形式的表达式。$scope上的属性名或表达式,最终仍会被$parse服务解析为响应的获取属性值的函数。

所有的watcher函数都会被unshift函数插入scope.$$watchers数组的头部,以便后边的$digest使用。

最后,$watch函数会返回一个反注册函数,一旦我们调用它,就可以移除刚才注册的watcher。

需要注意的是,Angular默认是不会使用angular.equals()函数进行深度比较的,因为使用===比较会更快,所以,它对数组或者Object进行比较时检查的是引用。这就导致内容完全相同的两个表达式被判定为不同。如果需要进行深度比较,第三个可选参数objectEquality,需要显式设置为true,如$watch('someExp', function(){...}, true)。

Angular还提供了$watchGroup、$watchCollection方法来监听数组或者是一组属性。

||Angular中的$digest函数

前面提到Angular拓展了浏览器的事件循环,这是怎么回事呢?

当接受View上的事件指令所转发的事件时,就会切换到Angular的上下文环境,来相应这类事件,$digest循环就会触发。

$digest循环实际上包括两个while循环。它们分别是:处理$evalAsync的异步运算队列,处理$watch的watchers队列。

当$digest循环发生的时候,它会遍历当前$scope及其所有子$scope上已注册的所有watchers函数。

遍历一遍所有watcher函数称为一轮脏检查。执行完一轮脏检查,如果任何一个watcher所监听的值改变过,那么就会重新再进行一轮脏检查,直到所有的watcher函数都报告其所监听的值不再变了。

当$digest循环结束时,才把模型的变化结果更新到DOM中去。这样可以合并多个更新,防止频繁的DOM属性。

需要注意的是,在$digest循环结束之前,如果超过了10轮脏检查,就会抛出一个异常,以防止脏检查无限循环下去。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选