您的位置: 首页  >  文章  >  AngularJS数据双向绑定后发生了什么？

AngularJS数据双向绑定后发生了什么？

分类: 文章 • 2024-10-19 16:08:52

        大家好，我是IT修真院学员，一枚正直纯洁善良的WEB程序员，今天给大家分享一下，修真院官网JS任务9，深度思考中的知识点-AngularJS数据双向绑定后发生了什么？

一、背景介绍

AngularJS Context

        正常来讲，浏览器接受到事件后会执行对应的回调函数， 这将进入 JavaScript 上下文； 一旦回调函数完成，浏览器将离开 JavaScript 上下文并根据 DOM 更改重新呈现视图， 等待更多的事件。 AngularJS 拓展了这个循环，生成一个Angular context。

二、知识剖析

$watch list

    我们可以想像一下，在我们的代码中有一个$watch list，每当你的模板中添加了一条数据绑定，angualr就会向$watch list中添加一个$watch:   

    当我们在模板中写下下面的代码：

index.html
User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

    我们将会得到两个model：$scope.user和$scope.pass，并且angular向$wacth list中添加了两条$watch。

File: controllers.js

app.controller('MainCtrl', function($scope) {
$scope.foo = "Foo";
$scope.world = "World";
});

File: index.html

Hello, {{ World }}
    在上面的例子中，即便我们在$scope上添加了两个东西，但是只有一个绑定在了UI上，因此在这里只生成了一个 $watch

再看下面的例子：

File: controllers.js

app.controller('MainCtrl', function($scope) {
$scope.people = [...];
});

File: index.html
<ul>
<li ng-repeat="person in people">
{{person.name}} - {{person.age}}
</li>
</ul>

    有多少$watch被创建呢？两个表达式（{{person.name}}和{{person.age}}）和一个指令（ng-repeat），假如$scope .people  有10条数据，那么将会创建21条$watch.因此，每一个绑定到了UI上的数据都会生成一个$watch。对，那这些$watch是什么时候生成的呢？当我们的模版加载完毕时，也就是在linking阶段，Angular解释器会寻找每个directive，然后生成每个需要的$watch。听起来不错哈，但是，然后呢？

$digest loop

    我们前面提到了angular扩展了浏览器处理事件的循环，当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列，另一个处理$watch队列；

AngularJS数据双向绑定后发生了什么？
图片来源于Angular官方文档

那么这个循环的过程是怎样的呢？$digest会循环遍历$watch list中存在的每一个$watch，询问他们是否发生了变化：

  • Hey $watch, what is your value?
    • It is 9
  • Alright, has it changed?
    • No, sir.
  • (nothing happens with this one, so it moves to the next)
  • You, what is your value?
    • It is Foo.
  • Has it changed?
    • Yes, it was Bar.
  • (good, we have a DOM to be updated)
  • This continues until every $watch has been checked.

    这就是dirty-checking（脏检查）当所有的$watch都被检查过之后，如果有$watch发生了变化，会再触发一次$digest循环以确保没有$watch再发生过变化，之后再更新DOM,需要注意的是$digest循环的上限是10次，超过10次，浏览器就会会抛出一个抛出一个异常。

看下面的例子：

File: controllers.js

app.controller('MainCtrl', function() {
$scope.name = "Foo";

$scope.changeFoo = function() {
$scope.name = "Bar";
}
});

File: index.html

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

    这里只生成了一个$watch，ng-click并不会生成$watch 因为ng-click触发的是一个函数，而函数本身是不会发生变化的；当我们点击button时，会发生一下变化：

  • 我们按下按钮
  • 浏览器接收到一个事件，进入AngularJS Context(后面会解释为什么）。
  • $digest循环开始执行，查询每个$watch是否变化。
  • 由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。
  • 新的$digest循环没有检测到变化。
  • 浏览器拿回控制权，更新与$scope.name新值相应部分的DOM。

那么由什么来决定什么事件进入AngularJS Context，而哪些又不进入呢？答案是$apply().

    如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入。现在你可能会问：刚才的例子里我也没有调用$apply啊，为什么？Angular为了做了！因此你点击带有ng-click的元素时，时间就会被封装到一个$apply调用。如果你有一个ng-model="foo"的输入框，然后你敲一个f，事件就会这样调用$apply("foo = 'f';")。

    但是当我们自己定义一个指令时，angular 并不会为我们自动调用$apply();此时会发生什么呢？我们来看下面这个例子：

app.directive('clickable', function() {
 
return {
  restrict: "E",
  scope: {
    foo: '=',
    bar: '='
  },
  template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>',
  link: function(scope, element, attrs) {
    element.bind('click', function() {
      scope.foo++;
      scope.bar++;
    });
  }
}
 
});
 
app.controller('MainCtrl', function($scope) {
  $scope.foo = 0;
  $scope.bar = 0;
});

它将foo和bar从controller里绑定到一个list里面，每次点击这个元素的时候，foo和bar都会自增1。

那我们点击元素的时候会发生什么呢？我们能看到更新吗？答案是否定的。因为点击事件是一个没有封装到$apply里面的常见的事件，这意味着我们会失去我们的计数吗？不会

真正的结果是：$scope确实改变了，但是没有强制$digest循环，监视foo 和bar的$watch没有执行。也就是说如果我们自己执行一次$apply那么这些$watch就会看见这些变化，然后根据需要更新DOM。

如果我们点击这个directive（蓝色区域），我们看不到任何变化，但是我们点击按钮时，点击数就更新了。如刚才说的，在这个directive上点击时我们不会触发$digest循环，但是当按钮被点击时，ng-click会调用$apply，然后就会执行$digest循环，于是所有的$watch都会被检查，当然就包括我们的foo和bar的$watch了。

现在你在想那并不是你想要的，你想要的是点击蓝色区域的时候就更新点击数。很简单，执行一下$apply就可以了：

element.bind('click', function() {
  scope.foo++;
  scope.bar++;
 
  scope.$apply();
});

$apply是我们的$scope（或者是direcvie里的link函数中的scope）的一个函数，调用它会强制一次$digest循环（除非当前正在执行循环，这种情况下会抛出一个异常，这是我们不需要在那里执行$apply的标志）。

还有一种更好的使用$apply的方法：

element.bind('click', function() {
  scope.$apply(function() {
      scope.foo++;
      scope.bar++;
  });
})

有什么不一样的？差别就是在第一个版本中，我们是在angular context的外面更新的数据，如果有发生错误，Angular永远不知道。很明显在这个像个小玩具的例子里面不会出什么大错，但是想象一下我们如果有个alert框显示错误给用户，然后我们有个第三方的库进行一个网络调用然后失败了，如果我们不把它封装进$apply里面，Angular永远不会知道失败了，alert框就永远不会弹出来了。


三、 常见问题

1、如何自定义$watch?

四、解决方案

app.controller('MainCtrl', function($scope) {
  $scope.name = "Angular";
 
  $scope.updated = -1;
 
  $scope.$watch('name', function() {
    $scope.updated++;
  });
});

index.html

<body ng-controller="MainCtrl">
  <input ng-model="name" />
  Name updated: {{updated}} times.
</body>

这就是我们创造一个新的$watch的方法。第一个参数是一个字符串或者函数，在这里是只是一个字符串，就是我们要监视的变量的名字，在这里，$scope.name(注意我们只需要用name)。第二个参数是当$watch说我监视的表达式发生变化后要执行的。我们要知道的第一件事就是当controller执行到这个$watch时，它会立即执行一次，因此我们设置updated为-1。

    
app.controller('MainCtrl', function($scope) {
  $scope.name = "Angular";
 
  $scope.updated = 0;
 
  $scope.$watch('name', function(newValue, oldValue) {
    if (newValue === oldValue) { return; } // AKA first run
    $scope.updated++;
  });
});

index.html

<body ng-controller="MainCtrl">
  <input ng-model="name" />
  Name updated: {{updated}} times.
</body>
    watch的第二个参数接受两个参数，新值和旧值。我们可以用他们来略过第一次的执行。
app.controller('MainCtrl', function($scope) {
  $scope.user = { name: "Fox" };
 
  $scope.updated = 0;
 
  $scope.$watch('user', function(newValue, oldValue) {
    if (newValue === oldValue) { return; }
    $scope.updated++;
  }, true);
});

index.html

<body ng-controller="MainCtrl">
  <input ng-model="user.name" />
  Name updated: {{updated}} times.
</body>

五、编码实战

六、拓展思考

脏检查机制是否很慢？

脏检查速度很快，如果你在一个模版里有2000-3000个watch，它会开始变慢。

七、参考文献

[1] $watch How the $apply Runs a $digest；

[2]angular官方文档


八、更多讨论

Q1: evalAsync队列是什么？

A1:在进行完脏检查后将需要更新的数据放到evalAsync中异步执行，可以提高性能

Q2:当需要手动执行$digest循环的时候应该用$digest（）还是$apply（）？

A2:官方文档中推荐直接用$apply（），因为他会强制执行$digest loop,但是如果你知道需要遍历的$watch的范围的时候用$digest()就可以了。

Q3:所有的调用函数的指令都不会产生$watch吗？

A3:是的，因为函数是不会改变的。



相关推荐