详解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内置的指令。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJs定时器$interval 和 $timeout详解

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行.通知的值将是运行的迭代次数.取消一个间隔,调用$intreval.cancel(promise). 备注:当你执行完这项服务后应该把它销毁.特别是当controller或者directive元素被销毁时而$interval未被销毁.你应该考虑到在适当的时候

  • AngularJS 的$timeout服务示例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/angular.js" ></script> <script> v

  • AngularJS中$watch和$timeout的使用示例

    前言 相信使用过Angular的小伙伴应该对$watch这个监听不陌生,它主要用于监听模型的变化,当你的模型部分发生变化时它会通知你.我在最近的平台管理开发中,也用到这个牛逼哄哄的Angular,在做filter的时候不可以避免的用到$watch监听.当时我的想法就是搜索的时候不需要点击搜索按钮,这样在用户体验上也是极好的,避免了输入后再次点击的操作步骤. 然后,当$watch监听的时候一开始代码是这样的 $scope.$watch('filterOptions', function (newV

  • angularjs之$timeout指令详解

    angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise)方法. 用法: $timeout(fn, [delay], [invokeApply]); fn: 回调函数(必填) delay: number类型.延迟的时间(非必填),如果不填,表示等线程空下来以

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

    ||浏览器事件循环和Angular的MVW "脏检查"是Angular中的核心机制之一,它是实现双向绑定.MVVM模式的重要基础. Angular将双向绑定转换为一堆watch表达式,然后递归检查这些watch表达式的结果是否变了,如果变了,则执行相应的watcher函数.等到Model的值不再变化,也就不会再有watcher函数被触发,一个完整的digest循环就结束了. 因为我们不需要改变编程思维,就能用相同的语言.相同的事件模型,快速开发NodeJS程序,所以NodeJS迅速火起

  • 详解angular脏检查原理及伪代码实现

    我们经常听到angular的脏检查机制和数据的双向绑定,这两个词似乎已经是它的代名词了.那么从编程层面,这到底是什么鬼? 当$scope的一个属性被改变时,界面可能会更新.那么为什么angular里面,修改$scope上的一个属性,可以引起界面的变化呢?这是angular的数据响应机制决定的.在angular里面就是脏检查机制.而脏检查,和双向绑定离不开. 这里插句题外话,JavaScript里面非常有意思的一种接口,当你修改(或新增)一个对象的某个属性时,会触发该对象里面的setter.如果你

  • 详解AngularJS的通信机制

    现在几乎满世界的人都在问! 外面有人么? 这里是 USS AngularJS, 我们遇到麻烦了,我们的服务讲得是克灵贡语(Klingon) 而我们的控制器不能同它们的Ferengi 指令通信了. 有人能帮助我们么! 我已经不知道有多少次遇到这种有关什么才是AngularJS里面的组件通信的最佳方式这样的问题了. 很多时候答案都会是为此使用 $rootScope 对象去向任何想要收听的人广播$broadcast出一条消息. 然而,那还真不是做这件事的最佳方式. 组件之间广播消息意味着它们需要多少知

  • 详解C语言进程同步机制

    本文是对进程同步机制的一个大总结(9000+字吐血总结),涵盖面非常的全,包括了进程同步的一些概念.软件同步机制.硬件同步机制.信号量机制和管程机制,对每种机制结合代码做了详细的介绍,并且对琐碎的知识点和概念解释的非常清晰. ​ 在前面的博客中讲述了进程的状态及其状态的转换,每种状态的含义和转换的原因.同样我们也知道,在OS引入了进程后,可以使系统中的多道程序可以并发的执行,进程的并发执行一方面极大的提高了系统的资源利用率和吞吐量,但是另一方面却使系统变得更加复杂,如果不能采取有效的措施,对多个

  • 详解JavaScript 的执行机制

    一.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web Worker,但javascript是单线程这一核心仍未改变. 为什么js是单线程的语言?因为最初的js是用来在浏览器验证表单操纵DOM元素的.如果js是多线程的话,两个线程同时对一个DOM进行了相互冲突的操作,那么浏览器的解析是无法执行的. Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行.在主线程运行的同

  • 详解 MySQL的FreeList机制

    一.前言 MySQL启动后,BufferPool就会被初始化,在你没有执行任何查询操作之前,BufferPool中的缓存页都是一块块空的内存,未被使用过也没有任何数据保存在里面. 而且你也知道了通过缓冲页的描述信息可以直接且唯一的找到它所指向的缓存页. 那你有没有想过,我们从磁盘里面读取出来的 数据页 应该放到那个缓冲页中去呢? 这个问题就引出了Free List. 二.Free List 其实Free List是Buffer Pool中基于缓存页描述信息 组织起来的双向链表.换言之,Free

  • 详解CocosCreator消息分发机制

    概述 本篇开始介绍游戏业务架构相关的内容.在游戏业务层,所有需要隔离的系统和模块间通信都可以通过消息分发解耦.例如网络返回通知.数据更新同步到界面等. 消息分发基于观察者模式设计.需要处理消息的地方向消息中心注册监听回调,派发消息时,调用消息中心的派发接口遍历该消息的监听队列,调用对应的回调方法. 具体方案 先定义监听回调类型 /** * 消息监听回调方法 */ export type NotifyListener = (src: any, data: any) => void; 通过key-v

  • 详解CocosCreator项目结构机制

    详解CocosCreator项目结构机制

     一.项目文件夹结构 初次创建并打开一个 Cocos Creator 项目后,开发者的项目文件夹将会包括以下结构: 下面我们将会介绍每个文件夹的功能. 1.资源文件夹(assets) assets 将会用来放置游戏中所有的本地资源.脚本和第三方库文件.只有在 assets 目录下的内容才能显示在 资源管理器 中.assets 中的每个文件在导入项目后都会生成一个相同名字的 .meta 文件,用于存储对应的资源配置和索引信息..meta 文件需要一并提交到版本控制系统,详见 资源管理注意事项 --

  • 详解Java的类加载机制及热部署的原理

    详解Java的类加载机制及热部署的原理

    一.什么是类加载 类的加载指的是将类的.class文件的二进制数据读入到内存中,将其放在运行数据区的方法去,然后再堆区创建一个java.lang.Class对象,用来封装类在方法区的数据结构.类的加载的最终产品是位于堆区中的Class对象,Class对象封装了类在方法区的数据结构,并且向Java程序员提供了访问方法区的数据结构的接口. 类加载器并不需要等到某个类被"首次主动使用"时再加载它,JVM规范允许类加载器在预料某个类将要被使用时就预先加载它,如果在预先加载的过程中遇到了.cla

  • 详解Spring的核心机制依赖注入

    详解Spring的核心机制依赖注入 对于一般的Java项目,他们都或多或少有一种依赖型的关系,也就是由一些互相协作的对象构成的.Spring把这种互相协作的关系称为依赖关系.如A组件调用B组件的方法,可称A组件依赖于B组件,依赖注入让Spring的Bean以配置文件组织在一起,而不是以硬编码的方式耦合在一起 一.理解依赖注入 依赖注入(Dependency Injection) = 控制反转(Inversion ofControl,IoC):当某个Java实例(调用者)需另一个Java实例(被调

随机推荐