AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest怎么用

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

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

背景

AngularJS開發(fā)者都想知道雙向數(shù)據(jù)綁定是怎么實現(xiàn)的。與data-binding相關(guān)的術(shù)語琳瑯滿目： $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: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

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

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

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

對應(yīng)的html 文件, index.html 代碼如下：

Hello, {{ World }}

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

controllers.js

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

對應(yīng)的html文件 index.html

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

這樣看來，又生成了多個$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相應(yīng)地變化。

看段代碼，例如： controllers.js

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

對應(yīng)的html文件，index.html

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

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

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

在瀏覽器按下按鈕；
瀏覽器接收到一個事件，進入angular context。
$digest循環(huán)開始執(zhí)行，查詢每個$watch是否變化。
由于監(jiān)視$scope.name的$watch報告了變化，它會強制再執(zhí)行一次$digest循環(huán)。
新的$digest循環(huán)沒有檢測到變化，此時瀏覽器拿回控制權(quán)，更新與$scope.name新值相應(yīng)部分的DOM。

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

$apply 的應(yīng)用

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的應(yīng)用場景

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

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

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

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
 <title>test</title>
 <!-- Vendor libraries -->
  <script src="lib/jquery-v1.11.1.js"></script>
  <script src="lib/angular-v1.2.22.js"></script>
  <script src="lib/angular-route-v1.2.22.js"></script>
</head>
<body> 
 <div ng-controller="MainCtrl" >
  <input ng-model="name" />
  Name updated: {{updated}} times.
 </div> 
 <script >
  var demoApp = angular.module('demoApp',[]); 
  demoApp.controller('MainCtrl', function($scope) {
  $scope.name = "Angular";
  $scope.updated = -1;
  $scope.$watch('name', function() {
  $scope.updated++;
 });
});
 </script>
 </body>
</html>

代碼說明：

當controller 執(zhí)行到 $watch時，它會立即調(diào)用一次，所以把updated的值設(shè)為 -1 。上輸入框中輸入字符發(fā)生變化時，你會看到 updated 的值隨之變化，而且能顯示變化的次數(shù)。

AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest怎么用

$watch 檢測到的數(shù)據(jù)變化

看完了這篇文章，相信你對“AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest怎么用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標題：AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest怎么用
本文地址：http://bm7419.com/article28/ijppjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、面包屑導航、營銷型網(wǎng)站建設(shè)、服務(wù)器托管、App開發(fā)、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest怎么用

AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest怎么用