Angular.js中$apply()和$digest()的深入理解

更新時間：2016年10月13日 10:16:26 投稿：daisy

相信大家都知道$digest()和$apply()是AngularJS中的兩個核心并且有時候容易引人誤解的部分。我們需要深入理解這兩者是如何運作的，從而才能理解AngularJS本身是如何運作的。本文的目的就是介紹$digest()和$apply()是如何確確實實的對你有用的。下面來一起看看吧。

$apply()和$digest()介紹

AngularJS提供了一個非?？岬奶匦越凶鲭p向數(shù)據(jù)綁定(Two-way Data Binding)，這個特性大大簡化了我們的代碼編寫方式。數(shù)據(jù)綁定意味著當(dāng)View中有任何數(shù)據(jù)發(fā)生了變化，那么這個變化也會自動地反饋到scope的數(shù)據(jù)上，也即意味著scope模型會自動地更新。類似地，當(dāng)scope模型發(fā)生變化時，view中的數(shù)據(jù)也會更新到最新的值。那么AngularJS是如何做到這一點的呢？當(dāng)你寫下表達式如時，AngularJS在幕后會為你在scope模型上設(shè)置一個watcher，它用來在數(shù)據(jù)發(fā)生變化的時候更新view。

這里的watcher和你會在AngularJS中設(shè)置的watcher是一樣的：

$scope.$watch('aModel', function(newValue, oldValue) {
 //update the DOM with newValue
});

傳入到$watch()中的第二個參數(shù)是一個回調(diào)函數(shù)，該函數(shù)在aModel的值發(fā)生變化的時候會被調(diào)用。當(dāng)aModel發(fā)生變化的時候，這個回調(diào)函數(shù)會被調(diào)用來更新view這一點不難理解，但是，還存在一個很重要的問題！AngularJS是如何知道什么時候要調(diào)用這個回調(diào)函數(shù)呢？換句話說，AngularJS是如何知曉aModel發(fā)生了變化，才調(diào)用了對應(yīng)的回調(diào)函數(shù)呢？它會周期性的運行一個函數(shù)來檢查scope模型中的數(shù)據(jù)是否發(fā)生了變化嗎？好吧，這就是$digest循環(huán)的用武之地了。

在$digest循環(huán)中，watchers會被觸發(fā)。當(dāng)一個watcher被觸發(fā)時，AngularJS會檢測scope模型，如何它發(fā)生了變化那么關(guān)聯(lián)到該watcher的回調(diào)函數(shù)就會被調(diào)用。

那么，下一個問題就是$digest循環(huán)是在什么時候以各種方式開始的？

在調(diào)用了$scope.$digest()后，$digest循環(huán)就開始了。假設(shè)你在一個ng-click指令對應(yīng)的handler函數(shù)中更改了scope中的一條數(shù)據(jù)，此時AngularJS會自動地通過調(diào)用$digest()來觸發(fā)一輪$digest循環(huán)。當(dāng)$digest循環(huán)開始后，它會觸發(fā)每個watcher。這些watchers會檢查scope中的當(dāng)前model值是否和上一次計算得到的model值不同。如果不同，那么對應(yīng)的回調(diào)函數(shù)會被執(zhí)行。調(diào)用該函數(shù)的結(jié)果，就是view中的表達式內(nèi)容(譯注：諸如)會被更新。除了ng-click指令，還有一些其它的built-in指令以及服務(wù)來讓你更改models(比如ng-model，$timeout等)和自動觸發(fā)一次$digest循環(huán)。

目前為止還不錯！但是，有一個小問題。在上面的例子中，AngularJS并不直接調(diào)用$digest()，而是調(diào)用$scope.$apply() ，后者會調(diào)用$rootScope.$digest() 。因此，一輪$digest循環(huán)在$rootScope開始，隨后會訪問到所有的children scope中的watchers。

現(xiàn)在，假設(shè)你將ng-click指令關(guān)聯(lián)到了一個button上，并傳入了一個function名到ng-click上。當(dāng)該button被點擊時，AngularJS會將此function包裝到一個wrapping function中，然后傳入到$scope.$apply() 。因此，你的function會正常被執(zhí)行，修改models(如果需要的話)，此時一輪$digest循環(huán)也會被觸發(fā)，用來確保view也會被更新。

$scope.$apply()會自動地調(diào)用$rootScope.$digest() 。$apply()方法有兩種形式。第一種會接受一個function作為參數(shù)，執(zhí)行該function并且觸發(fā)一輪$digest循環(huán)。第二種會不接受任何參數(shù)，只是觸發(fā)一輪$digest循環(huán)。我們馬上會看到為什么第一種形式更好。

什么時候手動調(diào)用$apply()方法？

如果AngularJS總是將我們的代碼wrap到一個function中并傳入$apply() ，以此來開始一輪$digest循環(huán)，那么什么時候才需要我們手動地調(diào)用$apply()方法呢？實際上，AngularJS對此有著非常明確的要求，就是它只負責(zé)對發(fā)生于AngularJS上下文環(huán)境中的變更會做出自動地響應(yīng)(即，在$apply()方法中發(fā)生的對于models的更改)。AngularJS的built-in指令就是這樣做的，所以任何的model變更都會被反映到view中。但是，如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通過手動調(diào)用$apply()來通知AngularJS。這就像告訴AngularJS，你修改了一些models，希望AngularJS幫你觸發(fā)watchers來做出正確的響應(yīng)。

比如，如果你使用了JavaScript中的setTimeout()來更新一個scope model，那么AngularJS就沒有辦法知道你更改了什么。這種情況下，調(diào)用$apply()就是你的責(zé)任了，通過調(diào)用它來觸發(fā)一輪$digest循環(huán)。類似地，如果你有一個指令用來設(shè)置一個DOM事件listener并且在該listener中修改了一些models，那么你也需要通過手動調(diào)用$apply()來確保變更會被正確的反映到view中。

讓我們來看一個例子。加入你有一個頁面，一旦該頁面加載完畢了，你希望在兩秒鐘之后顯示一條信息。你的實現(xiàn)可能是下面這個樣子的：

<body ng-app="myApp">
 <div ng-controller="MessageController">
 Delayed Message: {{message}}
 </div>
</body>

/* What happens without an $apply() */

angular.module('myApp',[]).controller('MessageController', function($scope) {

 $scope.getMessage = function() {
 setTimeout(function() {
  $scope.message = 'Fetched after 3 seconds';
  console.log('message:'+$scope.message);
 }, 2000);
 }

 $scope.getMessage();

});

通過運行這個例子，你會看到過了兩秒鐘之后，控制臺確實會顯示出已經(jīng)更新的model，然而，view并沒有更新。原因也許你已經(jīng)知道了，就是我們忘了調(diào)用$apply()方法。因此，我們需要修改getMessage() ，如下所示：

/* What happens with $apply */
angular.module('myApp',[]).controller('MessageController', function($scope) {

 $scope.getMessage = function() {
 setTimeout(function() {
  $scope.$apply(function() {
  //wrapped this within $apply
  $scope.message = 'Fetched after 3 seconds';
  console.log('message:' + $scope.message);
  });
 }, 2000);
 }

 $scope.getMessage();

});

如果你運行了上面的例子，你會看到view在兩秒鐘之后也會更新。唯一的變化是我們的代碼現(xiàn)在被wrapped到了$scope.$apply()中，它會自動觸發(fā)$rootScope.$digest() ，從而讓watchers被觸發(fā)用以更新view。

順便提一下，你應(yīng)該使用$timeout service來代替setTimeout() ，因為前者會幫你調(diào)用$apply() ，讓你不需要手動地調(diào)用它。

而且，注意在以上的代碼中你也可以在修改了model之后手動調(diào)用沒有參數(shù)的$apply() ，就像下面這樣：

$scope.getMessage = function() {
 setTimeout(function() {
 $scope.message = 'Fetched after two seconds';
 console.log('message:' + $scope.message);
 $scope.$apply(); //this triggers a $digest
 }, 2000);
};

以上的代碼使用了$apply()的第二種形式，也就是沒有參數(shù)的形式。需要記住的是你總是應(yīng)該使用接受一個function作為參數(shù)的$apply()方法。這是因為當(dāng)你傳入一個function到$apply()中的時候，這個function會被包裝到一個try…catch塊中，所以一旦有異常發(fā)生，該異常會被$exceptionHandler service處理。

$digest循環(huán)會運行多少次？

當(dāng)一個$digest循環(huán)運行時，watchers會被執(zhí)行來檢查scope中的models是否發(fā)生了變化。如果發(fā)生了變化，那么相應(yīng)的listener函數(shù)就會被執(zhí)行。這涉及到一個重要的問題。如果listener函數(shù)本身會修改一個scope model呢？AngularJS會怎么處理這種情況？

答案是$digest循環(huán)不會只運行一次。在當(dāng)前的一次循環(huán)結(jié)束后，它會再執(zhí)行一次循環(huán)用來檢查是否有models發(fā)生了變化。這就是臟檢查(Dirty Checking)，它用來處理在listener函數(shù)被執(zhí)行時可能引起的model變化。因此，$digest循環(huán)會持續(xù)運行直到model不再發(fā)生變化，或者$digest循環(huán)的次數(shù)達到了10次。因此，盡可能地不要在listener函數(shù)中修改model。

$digest循環(huán)最少也會運行兩次，即使在listener函數(shù)中并沒有改變?nèi)魏蝝odel。正如上面討論的那樣，它會多運行一次來確保models沒有變化。

總結(jié)

我希望這篇文章解釋清楚了$apply和$digest。需要記住的最重要的是AngularJS是否能檢測到你對于model的修改。如果它不能檢測到，那么你就需要手動地調(diào)用$apply()。以上就是這篇文章的全部內(nèi)容，大家都學(xué)會了嗎？希望這篇文章的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: