Shellway

AngularJS中的$digest循环

Angular的最核心功能就是数据双向绑定和依赖注入。今天Shellway就来讲讲我对双向绑定及$digest的个人理解,如有不妥之处大家尽情拍砖。

双向绑定是这样的:数据模型即表单值发生变化,触发相应事件,调用相关函数进行相应,对比模型值是否有变化,如果变化了,数据绑定处的Dom也回马上变化。这个功能特性非常好用,执行效率也非常高。

下图是angular的chrome插件baratang的监视截图:

angularjs-baratang-testing

图中有1283个监视器,digest周期执行时间为81.694ms。80多毫秒执行近1300个监视,感觉效率不是很高啊,可能我的代码有问题,有待优化。

那angular中的digest到底该如何理解呢?“digest”翻译成中文是“消化、吸收、领悟”的意思。我觉得还是直接从它字面意思来理解比较好,也就是“消化”的意思。

在AngularJS中,把检测数据模型变化的过程称为$digest循环。$digest方法是$apply中的重要一步,调用它就会检测注册在所有作用域上的所有监视对象。当页面中的模型变脏了(即有变化了),angular就需要用$digest来消化这些脏的垃圾,让页面重回干净整洁(模型趋于稳定)的状态。

$digest的主要用途是:①检测模型的哪些部分发生了变化,并尽量简单的对需要修改的区域进行重绘;②尽量将DOM重绘推迟到最后一刻,等待模型运算完成趋于稳定,在对页面进行统一重绘,这样避免了界面的闪烁,页减少了对性能的消耗。