抑郁症健康,内容丰富有趣,生活中的好帮手!
抑郁症健康 > Angular 学习系列 - - 脏值检查及其相关

Angular 学习系列 - - 脏值检查及其相关

时间:2018-09-02 12:38:43

相关推荐

今天突然就想写写$digest和$apply,这些都是脏值检查的主体内容。

先以普通js来做一个简单的监控例子吧:

vardiv=ducoment.getElementById("myDiv");div.addEventListener("click",function(e){console.log(e);})

在这里,我们给一个div绑定了个点击事件,并且给这个绑定事件一个回调函数。这里我们就是给了这个div一个监听,当监听到有点击事件发生在此div上,则执行该回调函数。

Angular的$watch也是这样的效果。拿ngModel为例:

in html: <input ng-model="value" />

in controller.js: $scope.value = "Hello World";

我们只要改变input里的值,在controller里对应的$scope.value也会随之发生相同的变化。这里就是给$watch列表添加了一个监控函数,从而做到这个效果的。

$watch列表就是给所有绑定到同一$scope对象的UI元素添加一个监控函数到$watch列表里。

$watch列表会触发$digest循环,并且在$digest循环中通过“脏值检查”机制进行解析。

好了,本篇的正主来了:脏值检查

什么是脏值检查?简单来说,就是Angular检查模型的值是否发生了变化,而程序还没对该变化进行同步的机制。Angular将会通过脏值检查遍历整个$watch列表,只要当中的某个值发生了变化,应用就会退回到$digest循环中,直到检测到这个值不再发生任何变化,然后再启用新值并且继续遍历$watch列表。整个$watch列表循环后,且其中值都不再变化了,那么整个应用程序的model也就趋于稳定了,这时候才在View渲染该有的数据。

这里有个报错需要注意,也是挺多人会遇到且提出的问题,到底是什么错误呢,发上来秀秀,想必大家不会陌生~

Error:[$rootScope:infdig]10$digest()iterationsreached.Aborting!

$digest循环运行10次,Angular就会抛出这个异常,同事停止$digest循环。而10这个次数可以在config里面注入$rootScopeProvider服务并且配置:

$rootScopeProvider.digestTtl(15);

这时候,错误就变成了:

Error:[$rootScope:infdig]15$digest()iterationsreached.Aborting!

哈哈,小伙伴们肯定会说:你个小贱人,不就是换个数值重新报错么.... 好吧,那么你上去看看本兽说的出现这个错误的原因,不就可以根据问题来解决了么 -。-

上面那个服务是用于配置当值不稳定的时候,$digest循环几次自动跳出循环的,部分场景可能会用得到。

关于$watch函数以及相关的使用,可以移步本兽的另一篇文章,url请狂戳这里:$watch

$digest循环是脏值检查机制的主体。那么$digest怎么玩呢?

自动进入$digest我们已经知道了,比如$scope的$watch列表中值发生变化,则触发$digest循环。

那么手动召唤我们伟大的$digest循环呢?当我们集齐一只$apply,就可以召唤$digest了。

$apply()函数在框架外部让表达式在Angular上下文内部执行。好吧,这个确实听起来比较绕...

下面来一段$apply的使用代码吧:

<divng-app="Demo"ng-controller="testCtrlasctrl"><my-dircount="ctrl.count"></my-dir>{{ctrl.count}}</div>

(function(){angular.module('Demo',[]).directive("myDir",myDir).controller('testCtrl',testCtrl);functionmyDir(){return{restrict:'AECM',template:'<inputtype="button"value="clickme"/>',scope:{count:"="},link:function(scope,element,attrs){element.bind('click',function(){scope.count++;scope.$apply();});}}};functiontestCtrl(){this.count=0;}}());

顺便也扯下,该在啥时使用$apply

Angular提供的可用于视图中任意指令都可调用$apply(),比如:ng-click,ng-change等等。

还有一些Angular内置的服务会调用$digest()。比如:$http服务(在XHR请求完成并触发更新返回的promise中会调用$apply())、使用$timeout()。

在我们使用第三方框架时或在自己写的指令当中使用。比如:jQuery(Angular不建议在controller内操作DOM,DOM操作应该在Directive中使用,所以jQuery代码也请写在指令里吧),上面的代码(也是在指令中使用)。

关于$apply vs $digest ,请移步本兽的一篇Github译文:( 译、持续更新 ) JavaScript小技巧介绍#01 - AngularJs: $digest vs $apply

如果觉得《Angular 学习系列 - - 脏值检查及其相关》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。