AngularJS脏检查机制及$timeout的示例分析-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

AngularJS脏检查机制及$timeout的示例分析-创新互联

这篇文章主要介绍AngularJS脏检查机制及$timeout的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联建站是一家从事企业网站建设、做网站、成都网站建设、行业门户网站建设、网页设计制作的专业网站制作公司,拥有经验丰富的网站建设工程师和网页设计人员,具备各种规模与类型网站建设的实力,在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点成百上千家。

||浏览器事件循环和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轮脏检查,就会抛出一个异常,以防止脏检查无限循环下去。

什么时候会进入这个Angular的上下文环境,触发“脏检查机制”呢?这个问题很重要,它同时也是比较让人头疼的地方。

每一个进入Angular上下文环境的事件,都会执行一次$digest循环。对于ngModel监听的表单交互控件来说,每输入一个字符,就会触发一次循环来检查$watcher函数,以便及时更新View。在Angular1.3之后可以利用ngModelOptions进行配置,来修改默认的触发方式。

||Angular中的$apply

$digest是一个内部函数,正常的应用代码中是不应该直接调用它的。要想主动触发它,就要调用scope.$apply函数,它是触发Angular“脏检查机制”的常用公开接口。

需要注意的是:Angular只能管理它所已知的行为触发方式,而不能涵盖所有的Angular操作场景。这就为什么我们在封装第三方jQuery插件时,不能自动更新视图,而需要我们手动调用$scope.$apply。

集成jquery插件的时候,有时会出现digest in progress错误。如果排除Bug之后仍然不能解决,那么可以考虑用$timeout来解决。

$timeout的妙用

在延时任务中修改被绑定到界面中的变量,那么window.setTimeout是不会触发“脏检查”来更新UI界面的。你可能想:加上$scope.$apply不就解决了嘛。是的,这能解决UI界面更新的问题,但是你可能会遇到另一个问题:

Error: $digest already in progress

这是怎么回事儿?哦,Angular内部正在进行“脏检查”。一位聪明的程序员巧妙地写了下面一段代码来解决这个问题:

function safeApply(scope, fn){ 
  (scope.
phase||scope.$root.
phase) ? fn() : scope.$apply(fn); 
}

代码中,在执行apply函数之前会首先检查Angular内部是不是正在做“脏检查”,如果是就直接执行函数,不用$apply;反之没有启动脏检查,那么就$apply执行该函数。呵呵,“完美”解决,不是吗?

请注意,笔者在上面的完美两个字上加了引号。Angular已经为我们内置了$timeout服务,它是Angular包装原生javascript window.setTimeout而实现的。

$timeout有很多妙用,但一定不要滥用,$timeout实现apply功能不应该是我们的第一方案,第一方案仍然应该是使用Angular内置的指令。

以上是“AngularJS脏检查机制及$timeout的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:AngularJS脏检查机制及$timeout的示例分析-创新互联
文章路径:http://kswsj.cn/article/djecoe.html

其他资讯