深入理解angularjs $watch ,$apply 和 $digest --- 理解数据绑定过程
转自:http://www.angularjs.cn/A0a6
Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇:$watch
,$apply
,$digest
,dirty-checking
... 它们是什么?它们是如何工作的呢?让我们从头开始吧。
浏览器事件循环和Angular.js扩展
我们的浏览器一直在等待事件,比如用户交互。假如你点击一个按钮或者在输入框里输入东西,事件的回调函数就会在javascript解释器里执行,然后你就可以做任何DOM操作,等回调函数执行完毕时,浏览器就会相应地对DOM做出变化。 Angular拓展了这个事件循环,生成一个有时成为angular context
的执行环境(记住,这是个重要的概念),为了解释什么是context
以及它如何工作,我们还需要解释更多的概念。
$watch 队列($watch list)
每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch
。想象一下$watch
就是那个可以检测它监视的model里时候有变化的东西。例如你有如下的代码
index.html
User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />
在这里我们有个$scope.user
,他被绑定在了第一个输入框上,还有个$scope.pass
,它被绑定在了第二个输入框上,然后我们在$watch list
里面加入两个$watch
:
controllers.js
app.controller('MainCtrl', function($scope) {
$scope.foo = "Foo";
$scope.world = "World";
});
index.html
Hello, {{ World }}
这里,即便我们在$scope
上添加了两个东西,但是只有一个绑定在了UI上,因此在这里只生成了一个$watch
. 再看下面的例子:
index.html
<ul>
<li ng-repeat="person in people">
{{person.name}} - {{person.age}}
</li>
</ul>
这里又生成了多少个$watch
呢?每个person有两个(一个name,一个age),然后ng-repeat又有一个,因此10个person一共是(2 * 10) +1
,也就是说有21个$watch
。 因此,每一个绑定到了UI上的数据都会生成一个$watch
。对,那这写$watch
是什么时候生成的呢? 当我们的模版加载完毕时,也就是在linking阶段(Angular分为compile阶段和linking阶段---译者注),Angular解释器会寻找每个directive,然后生成每个需要的$watch
。听起来不错哈,但是,然后呢?
$digest
循环(这个digest不知道怎么翻译)
还记得我前面提到的扩展的事件循环吗?当浏览器接收到可以被angular context
处理的事件时,$digest
循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync
队列,另一个处理$watch
队列,这个也是本篇博文的主题。 这个是处理什么的呢?$digest
将会遍历我们的$watch
,然后询问:
- 嘿,
$watch
,你的值是什么?- 是9。
- 好的,它改变过吗?
- 没有,先生。
- (这个变量没变过,那下一个)
- 你呢,你的值是多少?
- 报告,是
Foo
。
- 报告,是
- 刚才改变过没?
- 改变过,刚才是
Bar
。
- 改变过,刚才是
- (很好,我们有DOM需要更新了)
- 继续询问知道
$watch
队列都检查过。
这就是所谓的dirty-checking
。
例如: controllers.js
app.controller('MainCtrl', function() {
$scope.name = "Foo";
$scope.changeFoo = function() {
$scope.name = "Bar";
}
});
index.html
{{ name }}
<button ng-click="changeFoo()">Change the name</button>
这里我们有一个$watch
因为ng-click不生成$watch
(函数是不会变的)。
- 我们按下按钮
- 浏览器接收到一个事件,进入
angular context
(后面会解释为什么)。 $digest
循环开始执行,查询每个$watch
是否变化。- 由于监视
$scope.name
的$watch
报告了变化,它会强制再执行一次$digest
循环。 - 新的
$digest
循环没有检测到变化。 - 浏览器拿回控制权,更新与
$scope.name
新值相应部分的DOM。
这里很重要的(也是许多人的很蛋疼的地方)是每一个进入angular context
的事件都会执行一个$digest
循环,也就是说每次我们输入一个字母循环都会检查整个页面的所有$watch
。
通过$apply
来进入angular context
谁决定什么事件进入angular context
,而哪些又不进入呢?$apply
!
如果当事件触发时,你调用$apply
,它会进入angular context
,如果没有调用就不会进入。现在你可能会问:刚才的例子里我也没有调用$apply
啊,为什么?Angular为了做了!因此你点击带有ng-click的元素时,时间就会被封装到一个$apply
调用。如果你有一个ng-model="foo"
的输入框,然后你敲一个f
,事件就会这样调用$apply("foo = 'f';")
。
后文见下一篇文章!
深入理解angularjs $watch ,$apply 和 $digest --- 理解数据绑定过程的更多相关文章
- 理解$watch ,$apply 和 $digest --- 理解数据绑定过程
原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给那些刚刚开始 ...
- 深入理解$watch ,$apply 和 $digest --- 理解数据绑定过程——续
Angular什么时候不会自动为我们$apply呢? 这是Angular新手共同的痛处.为什么我的jQuery不会更新我绑定的东西呢?因为jQuery没有调用$apply,事件没有进入angular ...
- [转]理解$watch ,$apply 和 $digest --- 理解数据绑定过程
原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给那些刚刚开始 ...
- 理解$watch、$apply与$digest
Angular环境 浏览器里面有一个事件队列(event queue),用户触发啥事儿,或者网络请求,延时操作(例如定时器之类),都是一个event,浏览器会轮询这些事件,然后调用这些回调(这里的回调 ...
- 理解Angular中的$apply()以及$digest()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- 深入理解Angular中的$Apply()以及$Digest()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- 通俗理解angularjs中的$apply,$digest,$watch
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- (网页)理解Angular中的$apply()以及$digest()
转自CSDN: 工作有问题上CSDN上转转. $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$ ...
- (转) 理解Angular中的$apply()以及$digest()
原文地址:http://blog.csdn.net/dm_vincent/article/details/38705099 $apply()和$digest()在AngularJS中是两个核心概念,但 ...
随机推荐
- LOJ10066 新的开始
LOJ10066 新的开始 prim 典型题.碰到这种情况,只要建一个虚拟节点,和其他的点连边,按题目给权值即可 代码中把n+1当成虚拟节点 懒得写kruskal就用prim了 #include< ...
- 根据wsdl文件,Java工程自动生成webservice客户端调用
根据wsdl文件,Java工程自动生成webservice客户端调用 1,工具:带有webservice插件的myeclips 2,步骤: (1),新建一个Java工程:relationship (2 ...
- 強化 Python 在 Vim 裡的顏色
我習慣用 putty 連 Unix server 開 screen,再用 vim 寫 Python.這篇記錄如何改善 Python 的顏色. 啟動 256 色 terminal 首先將可用的色彩數增加 ...
- 字符编码(ASCII、ANSI、GB2312、UTF-8等)系统梳理(转载)
引言 在显示器上看见的文字.图片等信息在电脑里面其实并不是我们看见的样子,即使你知道所有信息都存储在硬盘里,把它拆开也看不见里面有任何东西,只有些盘片.假设,你用显微镜把盘片放大,会看见盘片表面凹凸不 ...
- 导出数据库表为world文档说明,以及PowerDesigner导出表结构pdm设计文档
如何使用“mysql导出数据库结构为world工具”以及如何使用powerdesigner映射数据库模型 一.通过powerdesigner配置ojdbc 1.安装并打开powerdesigner,新 ...
- json字符串在javascript和java代码中的表示方式
最近在使用js写json形式的字符串的时候,当我把json形式的字符串放到函数JSON.parse()的时候,总是报错Uncaught SyntaxError: Unexpected token ' ...
- 汇编语言调用Linux系统调用read和write
.section .data UserMsg: .ascii "Please input the message:" LenOfUserMsg: .equ lenMsg, LenO ...
- 利用Chrome的Heap Snapshot功能分析一个时间段内的内存占用率
在下图测试代码第13行和第16行设断点. 以调试方式运行,首先断点在第13行处触发: 打开Chrome开发者工具,点击Profiles tab, 再点击按钮"Take Snapshot&qu ...
- angular编译机制
转载https://segmentfault.com/a/1190000011562077 Angular编译机制 前言 http://www.cnblogs.com/ztwBlog/p/620975 ...
- 修改unity变量名但不丢失序列化值
using UnityEngine; using UnityEngine.Serialization; public class LgsTest : MonoBehaviour { [Formerly ...