$watch，$apply和$digest資料綁定過程詳解

這次帶給大家$watch，$apply和$digest資料綁定過程詳解，$watch，$apply和$digest資料綁定過程的注意事項有哪些，下面就是實戰案例，一起來看一下。

這篇部落格文章主要是寫給新手的，是給那些剛開始接觸Angular，並且想了解資料幫定是如何運作的人。如果你已經對Angular比較了解了，那強烈建議你直接去閱讀原始碼。 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" />

，它被綁定在了第二個輸入框上，然後我們在$watch list裡面加入兩個$watch:

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

這裡，即使我們在$scope上添加了兩個東西，但是只有一個綁定在了UI上，因此在這裡只生成了一個$watch. 再看下面的例子：

controllers.js
app.controller('MainCtrl', function($scope) { $scope.people = [...];});
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

既然所有的$watch都檢查完了，那就要問了：有沒有$watch更新過？如果有至少一個更新過，這個循環就會再次觸發，直到所有的$watch都沒有變化。這樣就能夠保證每個model都已經不會再改變。記住如果循環超過10次的話，它將會拋出一個異常，防止無限循環。 當$digest循環結束時，DOM會相應地變化。

例如： 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';")
。
Angular什么时候不会自动为我们$apply呢？
这是Angular新手共同的痛处。为什么我的jQuery不会更新我绑定的东西呢？因为jQuery没有调用$apply，事件没有进入angular context，$digest循环永远没有执行。
我们来看一个有趣的例子：假设我们有下面这个directive和controller
app.js

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。
试试看吧：http://jsbin.com/opimat/2/
如果我们点击这个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的标志）。
试试看：http://jsbin.com/opimat/3/edit
有用啦！但是有一种更好的使用$apply的方法：

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

有什么不一样的？差别就是在第一个版本中，我们是在angular context
的外面更新的数据，如果有发生错误，Angular永远不知道。很明显在这个像个小玩具的例子里面不会出什么大错，但是想象一下我们如果有个alert框显示错误给用户，然后我们有个第三方的库进行一个网络调用然后失败了，如果我们不把它封装进$apply里面，Angular永远不会知道失败了，alert框就永远不会弹出来了。
因此，如果你想使用一个jQuery插件，并且要执行$digest循环来更新你的DOM的话，要确保你调用了$apply。
有时候我想多说一句的是有些人在不得不调用$apply时会“感觉不妙”，因为他们会觉得他们做错了什么。其实不是这样的，Angular不是什么魔术师，他也不知道第三方库想要更新绑定的数据。使用$watch来监视你自己的东西你已经知道了我们设置的任何绑定都有一个它自己的$watch，当需要时更新DOM，但是我们如果要自定义自己的watches呢？简单来看个例子：
app.js

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。
试试看：http://jsbin.com/ucaxan/1/edit
例子2：
app.js

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的第二个参数接受两个参数，新值和旧值。我们可以用他们来略过第一次的执行。通常你不需要略过第一次执行，但在这个例子里面你是需要的。灵活点嘛少年。
例子3：
app.js

app.controller('MainCtrl', function($scope) { $scope.user = { name: "Fox" }; $scope.updated = 0; $scope.$watch('user', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; });});

index.html

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

我们想要监视$scope.user对象里的任何变化，和以前一样这里只是用一个对象来代替前面的字符串。
试试看：http://jsbin.com/ucaxan/3/edit
呃？没用，为啥？因为$watch
默认是比较两个对象所引用的是否相同，在例子1和2里面，每次更改$scope.name
都会创建一个新的基本变量，因此$watch会执行，因为对这个变量的引用已经改变了。在上面的例子里，我们在监视$scope.user，当我们改变$scope.user.name
时，对$scope.user的引用是不会改变的，我们只是每次创建了一个新的$scope.user.name，但是$scope.user永远是一样的。
例子4：
app.js

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>

试试看：http://jsbin.com/ucaxan/4/edit
现在有用了吧！因为我们对$watch加入了第三个参数，它是一个bool类型的参数，表示的是我们比较的是对象的值而不是引用。由于当我们更新$scope.user.name
时$scope.user也会改变，所以能够正确触发。
关于$watch还有很多tips&tricks，但是这些都是基础。
总结
好吧，我希望你们已经学会了在Angular中数据绑定是如何工作的。我猜想你的第一印象是dirty-checking很慢，好吧，其实是不对的。它像闪电般快。但是，是的，如果你在一个模版里有2000-3000个watch，它会开始变慢。但是我觉得如果你达到这个数量级，就可以找个用户体验专家咨询一下了
无论如何，随着ECMAScript6的到来，在Angular未来的版本里我们将会有Object.observe那样会极大改善$digest循环的速度。同时未来的文章也会涉及一些tips&tricks。
另一方面，这个主题并不容易，如果你发现我落下了什么重要的东西或者有什么东西完全错了，请指正（原文是在GITHUB上PR 或报告issue

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

全局计数的JavaScript代码

逐个隐藏元素的JavaScript代码

怎样阻止django中form页面刷新后自动提交

以上是$watch，$apply和$digest資料綁定過程詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！