Angular环境
浏览器里面有一个事件队列(event queue),用户触发啥事儿,或者网络请求,延时操作(例如定时器之类),都是一个event,浏览器会轮询这些事件,然后调用这些回调(这里的回调简单来说可以理解为触发一个函数),然后就进入JavaScript的环境中执行(JavaScript context),在这里面可以改变数据,操作DOM(也就是html结构),然后再退出JavaScript环境,又进入浏览器环境,然后浏览器根据之前的改动重新绘制界面,这就是个一个流程。
Angular在javascript context内定义了一个称为angular context(Angular环境)的执行环境,非angular环境的那部分环境称为经典环境(classic context)
$watch队列
angular环境中也有一个队列,叫$watch队列,列表里装着被监视的变量,每当你绑定了一些东西到你的UI上,就会往$watch队列中插入一个$watch
eg1:
<input type="text" ng-model= "a"/>
<input type="text" ng-model= "b"/>
这就添加了两个$watch
eg2:
<input type="text" ng-model= "a"/>
$scope.a= "11"; $scope.b= "22";
添加了一个$watch,因为虽然有两个变量,但绑定到UI上的只有a
eg3:
<ul>
<li ng-repeat="person in people">
{{person.name}} - {{person.age}}
</li>
</ul>
$scope.people= [...] //长度为3
绑定了3*2+ 1= 7个$watch,其中1为people
另外:当我们使用$watch函数时,也是基于这种原理,往$watch队列中添加变量
eg:
$scope.$watch('a', function(newValue, oldValue){
})
这就往$watch队列中添加了a
$digest循环
当事件进入angular context时,$digest将被触发,而它将遍历$watch队列
例如:
访问a
a的值未发生改变
访问b
b改变了,那么这次检查发现了"脏值",有DOM需要更新
继续访问
。。。
理想状态下只循环一次,但只要发现脏值,循环就得继续,直到所有的$watch不发生变化,再更新DOM
但如果循环超过10次,将抛出异常,以防止无限循环
但其实$digest不会只执行一次!
让我们做一个假设:
当一个$digest循环运行时,watchers会被执行来检查scope中的models是否发生了变化。如果发生了变化,那么相应的listener函数就会被执行。
这涉及到一个重要的问题。如果listener函数本身会修改一个scope model呢?AngularJS会怎么处理这种情况?
答案是$digest循环不会只运行一次。在当前的一次循环结束后,它会再执行一次循环用来检查是否有models发生了变化!这就是脏检查(Dirty Checking),
它用来处理在listener函数被执行时可能引起的model变化。因此,$digest循环会持续运行直到model不再发生变化,或者$digest循环的次数达到了10次。因此,尽可能地不要在listener函数中修改model。
值得注意的是:
每一个进入angular context的时间都会执行一次$digest循环,而每次循环都会检查整个页面的所有$watch
$apply
那么由什么决定事件是否进入angular context?这就得靠$apply了
当有事件触发时,会调用$apply,而当你触发ng-click的事件时,或者更改变量的值时,事件会被装到一个$apply中调用,也就是说,默认调用了$apply!
这就是为什么的jQuery不会更新绑定的数据,他不会调用$apply,因此需要我们手动调用