小編給大家分享一下AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設計制作、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務子洲,10多年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18982081108

背景

AngularJS開發(fā)者都想知道雙向數(shù)據(jù)綁定是怎么實現(xiàn)的。與data-binding相關的術語琳瑯滿目： $watch,$apply,$digest,dirty-checking等等它們是如何工作的呢？讓我們從頭開始講起吧

AngularJS 的雙向數(shù)據(jù)綁定是被瀏覽器逼的

瀏覽器看上去很美，其實在數(shù)據(jù)交互這塊兒，由于瀏覽器的“不作為”，導致瀏覽器的數(shù)據(jù)刷新成為一個難題。具體來說，瀏覽器可以很容易地監(jiān)聽一個事件，比如：用戶點擊一個按鈕，或者在輸入框里輸入東西，為此還提供了事件回調(diào)函數(shù)的API，事件的回調(diào)函數(shù)就會在javascript解釋器里執(zhí)行；但反過來就沒這么簡單了，如果來自后臺的數(shù)據(jù)發(fā)生了變化，需要通知給瀏覽器，讓瀏覽器刷新，瀏覽器并沒有提供這樣的數(shù)據(jù)交互機制，對于開發(fā)者來說，這是一個難以逾越的障礙，怎么辦呢？ AngularJS出現(xiàn)了，它通過$scope 很好地實現(xiàn)了雙向數(shù)據(jù)綁定，其背后的原理就是$watch,$apply,$digest,dirty-checking

$watch 隊列（$watch list）

從字面上看，watch 是觀察的意思。 每次綁定一些東西到瀏覽器上時，就會往$watch隊列里插入一條$watch。想象一下$watch就是那個可以檢測它監(jiān)視的model里時候有變化的東西。例如你有如下的代碼

User: 
Password: 

這里有個$scope.user，它被綁定在了第一個輸入框上，還有個$scope.pass，它被綁定在了第二個輸入框上；然后在$watch list里面加入兩個$watch:

創(chuàng)建一個 controllers.js 文件，代碼如下：

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

對應的html 文件, index.html 代碼如下：

Hello, {{ World }}

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

controllers.js

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

對應的html文件 index.html

 
   {{person.name}} - {{person.age}}
 

這樣看來，又生成了多個$watch。每個person有兩個（一個name，一個age），然后ng-repeat是一個循環(huán)，因此10個person一共是(2 * 10) +1,也就是說有21個$watch。 因此，每一個綁定到了瀏覽器上的數(shù)據(jù)都會生成一個$watch。對，那這寫$watch是什么時候生成的呢？ 先回顧下AngularJS的加載原理

AngularJS的加載原理：

AngularJS的模板加載分為編譯（compile）和鏈接（linking）兩個階段，在linking階段，AngularJS解釋器會尋找每個directive，然后生成每個需要的$watch。對了，$watch就是在這個階段生成的。

接下來，開始用到 $digest了

$digest 循環(huán)

從字面上看，digest是 “消化”的意思，總感覺這個名字怪怪的，跟不可思議的是 dirty-checking， 字面意思“臟檢查”，還是不翻譯為好。原作者的本意肯定不是這個意思，只可意會不可言傳！

$digest 是一個循環(huán)，它在循環(huán)做什么呢？ $digest 在遍歷我們的$watch。 $digest 一個個地詢問$watch —— “嗨，你觀察的數(shù)據(jù)發(fā)生變化了沒？”

這個遍歷就是所謂的dirty-checking。既然所有的$watch都檢查完了，那就要問了：有沒有$watch更新過？如果有至少一個更新過，這個循環(huán)就會再次觸發(fā)，直到所有的$watch都沒有變化。這樣就能夠保證每個model都已經(jīng)不會再變化。記住如果循環(huán)超過10次的話，它將會拋出一個異常，以免出現(xiàn)無限循環(huán)。 當$digest循環(huán)結(jié)束時，DOM相應地變化。

看段代碼，例如： controllers.js

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

對應的html文件，index.html

{{ name }}
Change the name

這里只有一個$watch，因為ng-click不生成$watch（函數(shù)是不會變的）。

$digest 執(zhí)行的流程是：

1. 在瀏覽器按下按鈕；

2. 瀏覽器接收到一個事件，進入angular context。

3. $digest循環(huán)開始執(zhí)行，查詢每個$watch是否變化。

4. 由于監(jiān)視$scope.name的$watch報告了變化，它會強制再執(zhí)行一次$digest循環(huán)。

5. 新的$digest循環(huán)沒有檢測到變化，此時瀏覽器拿回控制權，更新與$scope.name新值相應部分的DOM。

從中可以看出AngularJS的一個明顯的不足：每一個進入angular context的事件都會執(zhí)行一個$digest循環(huán)，哪怕僅僅是輸入一個字母，$digest 都會遍歷整個頁面的所有$watch。

$apply 的應用

Angular context 是整個Angular的上下文，也可以把它理解為Angular容器，那么，是誰來決定哪些事件可以進入 Angular Context，哪些事件又不能進入呢？ 其控制器在 $apply手上。

如果當事件觸發(fā)時，調(diào)用$apply，它會進入angular context，如果沒有調(diào)用就不會進入。你可能會問：剛才的例子并沒有調(diào)用$apply，這是怎么回事呢？原來，是Angular背后替你做了。當點擊帶有ng-click的元素時，事件就會被封裝到一個$apply調(diào)用中。如果有一個ng-model="foo"的輸入框，當輸入一個字母 f 時，事件就會這樣調(diào)用，$apply("foo = 'f';")。

$apply的應用場景

$apply是$scope的一個函數(shù)，調(diào)用它會強制一次$digest循環(huán)。如果當前正在執(zhí)行$apply循環(huán)，則會拋出一個異常。

如果瀏覽器上數(shù)據(jù)沒有及時刷新，可以通過調(diào)用$scope.$apply() 方法，強行刷新一遍。

通過 $watch 監(jiān)控自己的$scope

 
 
  
  
  

 
 
  
  Name updated: {{updated}} times.