? ?? ?? ???, ?? ? Angular? ??? ???? ??? ???? ??? ????? ???? ?? ???? ?? ???????. ?? Angular? ?? ?? ?? ??? ?? ?? ??? ???? ?? ????.

Angular ???? ?? ??? ???? ??? ????? ?? ?????. ??? ??? ? ? ????: $watch, $apply, $digest, dirty-checking... ?? ?????? ??? ?????? ???? ??? ??? ??? ????. ?? ?? ??? ??? ?? ??? ??? ?? ???? ??? ???? ?? ??? ??? ?????. ??.

???? ??? ?????.

???? ??? ?? ? Angular.js ??

????? ?? ??? ?? ??? ?? ???? ???? ????. ??? ????? ???? ????? ???? ?????? ??????? ?? ???? ?? ??? ????, ?? ??? ???? ????? DOM?? ???? ???. ?? ?? ??????. Angular? ? ??? ??? ???? ??? ??? ?????? ??? ?? ??? ?????(??? ??? ????? ?? ?????). ????? ???? ??? ????? ????? ? ?? ??? ? ???? ???.

$watch ???($watch ??)

UI? ???? ???? ??? $watch ???? $watch? ?????. $watch? ?????? ??? ??? ??? ? ?? ???? ??? ???. ?? ?? ?? ???

index.html

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

???? On?? ???? $scope.user? ????. ? ?? ?? ???? ? ?? ?? ??? ???? $scope.pass? ????. ?? ?? $watch ??? ? ?? $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? ?????? ??? ???? 2?(?? 1?, ?? 1?)? ?? ng-repeat? 1? ???? ? 10??? (2 * 10) + 1??? $??? 21?? ???. ??? UI? ???? ?? ???? $watch? ?????. ?, $watch? ?? ??????? ???? ????, ? ?? ??(Angular? ??? ??? ?? ??? ?????---???? ??)?? Angular ?????? ? ???? ?? ??? ? $watch? ?????. ?? ? ??? ??? ??????

$digest ??

?? ??? ?? ??? ??? ??????? $digest ??? ????? Angular ?????? ??? ? ?? ???? ??? ? ??????. ? ??? ? ?? ?? ??? ?????. ??? evalAsync ???? ???? ?? ??? ? ??? ???? ????? ? $watch ???? ?????. ??? ??? ????? $digest? $watch? ???? ??? ?? ????.

?? $watch, ??? ??? ??????

?? ??????
???, ???.
(? ??? ??? ???? ?? ??)
??? ????, ??? ??? ??????
????? ????.
?? ?? ??? ? ????
???????. ?? Bar????.
(????. ?????? ? DOM? ????.)
$watch ???? ??? ??? ?? ?????.

?? ?? ???? ???. ?? ?? $watch? ??????? ???? ???. $watch? ?????????? ??? ??? ????? ?? ?? $watches? ???? ?? ??? ??? ?? ??????. ??? ?? ? ??? ?? ???? ????. ??? 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>

???? ng-click? $watch? ???? ?? ??? $watch? ????(??? ???? ??).

??? ????

????? ???? ???? ?? ????? ?????(??? ??? ?????).

$digest ??? ???? ???? ? $watch? ?????? ?????.

$scope.name? ?????? $watch? ?? ??? ????? ? ?? $digest ??? ?? ?????.

?? ??? ???? ?? ??? $digest ?????.

????? ???? ??? $scope.name? ? ?? ???? DOM ??? ???????.

??? ?? ??? ?(??? ?? ???? ?? ??)? ?? ????? ???? ?? ???? $digest ??? ????? ????. ?, ??? ??? ??? ??? ?? $watch? ?? ???? ?????.

$apply? ?? ?? ???? ??

?? ???? ?? ????? ???? ?? ???? ???? ???? ?? ?????? $?????!

如果當(dāng)事件觸發(fā)時，你調(diào)用$apply，它會進(jìn)入angular context，如果沒有調(diào)用就不會進(jìn)入?，F(xiàn)在你可能會問：剛才的例子里我也沒有調(diào)用$apply啊，為什么？Angular為了做了！因此你點(diǎn)擊帶有ng-click的元素時，時間就會被封裝到一個$apply調(diào)用。如果你有一個ng-model="foo"的輸入框，然后你敲一個f，事件就會這樣調(diào)用$apply("foo = 'f';")。

Angular什么時候不會自動為我們$apply呢？

這是Angular新手共同的痛處。為什么我的jQuery不會更新我綁定的東西呢？因?yàn)閖Query沒有調(diào)用$apply，事件沒有進(jìn)入angular context，$digest循環(huán)永遠(yuǎn)沒有執(zhí)行。

我們來看一個有趣的例子：

假設(shè)我們有下面這個directive和controller

app.js

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

它將foo和bar從controller里綁定到一個list里面，每次點(diǎn)擊這個元素的時候，foo和bar都會自增1。

那我們點(diǎn)擊元素的時候會發(fā)生什么呢？我們能看到更新嗎？答案是否定的。因?yàn)辄c(diǎn)擊事件是一個沒有封裝到$apply里面的常見的事件，這意味著我們會失去我們的計數(shù)嗎？不會

真正的結(jié)果是：$scope確實(shí)改變了，但是沒有強(qiáng)制$digest循環(huán)，監(jiān)視foo 和bar的$watch沒有執(zhí)行。也就是說如果我們自己執(zhí)行一次$apply那么這些$watch就會看見這些變化，然后根據(jù)需要更新DOM。

試試看吧：http://jsbin.com/opimat/2/

如果我們點(diǎn)擊這個directive（藍(lán)色區(qū)域），我們看不到任何變化，但是我們點(diǎn)擊按鈕時，點(diǎn)擊數(shù)就更新了。如剛才說的，在這個directive上點(diǎn)擊時我們不會觸發(fā)$digest循環(huán)，但是當(dāng)按鈕被點(diǎn)擊時，ng-click會調(diào)用$apply，然后就會執(zhí)行$digest循環(huán)，于是所有的$watch都會被檢查，當(dāng)然就包括我們的foo和bar的$watch了。

現(xiàn)在你在想那并不是你想要的，你想要的是點(diǎn)擊藍(lán)色區(qū)域的時候就更新點(diǎn)擊數(shù)。很簡單，執(zhí)行一下$apply就可以了：

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

$apply是我們的$scope（或者是direcvie里的link函數(shù)中的scope）的一個函數(shù)，調(diào)用它會強(qiáng)制一次$digest循環(huán)（除非當(dāng)前正在執(zhí)行循環(huán)，這種情況下會拋出一個異常，這是我們不需要在那里執(zhí)行$apply的標(biāo)志）。

試試看：http://jsbin.com/opimat/3/edit

有用啦！但是有一種更好的使用$apply的方法：

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

有什么不一樣的？差別就是在第一個版本中，我們是在angular context的外面更新的數(shù)據(jù)，如果有發(fā)生錯誤，Angular永遠(yuǎn)不知道。很明顯在這個像個小玩具的例子里面不會出什么大錯，但是想象一下我們?nèi)绻袀€alert框顯示錯誤給用戶，然后我們有個第三方的庫進(jìn)行一個網(wǎng)絡(luò)調(diào)用然后失敗了，如果我們不把它封裝進(jìn)$apply里面，Angular永遠(yuǎn)不會知道失敗了，alert框就永遠(yuǎn)不會彈出來了。

因此，如果你想使用一個jQuery插件，并且要執(zhí)行$digest循環(huán)來更新你的DOM的話，要確保你調(diào)用了$apply。

有時候我想多說一句的是有些人在不得不調(diào)用$apply時會“感覺不妙”，因?yàn)樗麄儠X得他們做錯了什么。其實(shí)不是這樣的，Angular不是什么魔術(shù)師，他也不知道第三方庫想要更新綁定的數(shù)據(jù)。

使用$watch來監(jiān)視你自己的東西

你已經(jīng)知道了我們設(shè)置的任何綁定都有一個它自己的$watch，當(dāng)需要時更新DOM，但是我們?nèi)绻远x自己的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>

這就是我們創(chuàng)造一個新的$watch的方法。第一個參數(shù)是一個字符串或者函數(shù)，在這里是只是一個字符串，就是我們要監(jiān)視的變量的名字，在這里，$scope.name(注意我們只需要用name)。第二個參數(shù)是當(dāng)$watch說我監(jiān)視的表達(dá)式發(fā)生變化后要執(zhí)行的。我們要知道的第一件事就是當(dāng)controller執(zhí)行到這個$watch時，它會立即執(zhí)行一次，因此我們設(shè)置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的第二個參數(shù)接受兩個參數(shù)，新值和舊值。我們可以用他們來略過第一次的執(zhí)行。通常你不需要略過第一次執(zhí)行，但在這個例子里面你是需要的。靈活點(diǎn)嘛少年。

例子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>

我們想要監(jiān)視$scope.user對象里的任何變化，和以前一樣這里只是用一個對象來代替前面的字符串。

試試看：http://jsbin.com/ucaxan/3/edit

呃？沒用，為啥？因?yàn)?watch默認(rèn)是比較兩個對象所引用的是否相同，在例子1和2里面，每次更改$scope.name都會創(chuàng)建一個新的基本變量，因此$watch會執(zhí)行，因?yàn)閷@個變量的引用已經(jīng)改變了。在上面的例子里，我們在監(jiān)視$scope.user，當(dāng)我們改變$scope.user.name時，對$scope.user的引用是不會改變的，我們只是每次創(chuàng)建了一個新的$scope.user.name，但是$scope.user永遠(yuǎn)是一樣的。

例子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

現(xiàn)在有用了吧！因?yàn)槲覀儗?watch加入了第三個參數(shù)，它是一個bool類型的參數(shù)，表示的是我們比較的是對象的值而不是引用。由于當(dāng)我們更新$scope.user.name時$scope.user也會改變，所以能夠正確觸發(fā)。

關(guān)于$watch還有很多tips&tricks，但是這些都是基礎(chǔ)。

總結(jié)

好吧，我希望你們已經(jīng)學(xué)會了在Angular中數(shù)據(jù)綁定是如何工作的。我猜想你的第一印象是dirty-checking很慢，好吧，其實(shí)是不對的。它像閃電般快。但是，是的，如果你在一個模版里有2000-3000個watch，它會開始變慢。但是我覺得如果你達(dá)到這個數(shù)量級，就可以找個用戶體驗(yàn)專家咨詢一下了

無論如何，隨著ECMAScript6的到來，在Angular未來的版本里我們將會有Object.observe那樣會極大改善$digest循環(huán)的速度。同時未來的文章也會涉及一些tips&tricks。

另一方面，這個主題并不容易，如果你發(fā)現(xiàn)我落下了什么重要的東西或者有什么東西完全錯了，請指正（原文是在GITHUB上PR 或報告issue）

希望本文所述對大家AngularJS程序設(shè)計有所幫助。