淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)

那么什么是雙向綁定，下面簡單進行講解。

首先我們要理解數(shù)據(jù)綁定。我們看到的網(wǎng)站頁面中，是由數(shù)據(jù)和設計兩部分組合而成。將設計轉(zhuǎn)換成瀏覽器能理解的語言，便是html和css主要做的工作。而將數(shù)據(jù)顯示在頁面上，并且有一定的交互效果（比如點擊等用戶操作及對應的頁面反應）則是js主要完成的工作。很多時候我們不可能每次更新數(shù)據(jù)便刷新頁面（get請求），而是通過向后端請求相關(guān)數(shù)據(jù)，并通過無刷新加載的方式進行更新頁面（post請求）。那么數(shù)據(jù)進行更新后，頁面上相應的位置也能自動做出對應的修改，便是數(shù)據(jù)綁定。

在以前的開發(fā)模式中，這一步一般通過jq操作DOM結(jié)構(gòu)，從而進行更新頁面。但這樣帶來的是大量的代碼和大量的操作。如果能在開始的時候，便已經(jīng)確定好從后端獲取的數(shù)據(jù)到頁面上需要進行的操作，當數(shù)據(jù)發(fā)生改變，頁面的相關(guān)內(nèi)容也自動發(fā)生變化，這樣便能極大地方便前端工程師的開發(fā)。在新的框架中（angualr，react，vue等）,通過對數(shù)據(jù)的監(jiān)視，發(fā)現(xiàn)變化便根據(jù)已經(jīng)寫好的規(guī)則進行修改頁面，便實現(xiàn)了數(shù)據(jù)綁定。可以看出，數(shù)據(jù)綁定是M(model，數(shù)據(jù)）通過VM（model-view，數(shù)據(jù)與頁面之間的變換規(guī)則）向V（view）的一個修改。

而雙向綁定則是增加了一條反向的路。在用戶操作頁面（比如在Input中輸入值）的時候，數(shù)據(jù)能及時發(fā)生變化，并且根據(jù)數(shù)據(jù)的變化，頁面的另一處也做出對應的修改。有一個常見的例子就是淘寶中的購物車，在商品數(shù)量發(fā)生變化的時候，商品價格也能及時變化。這樣便實現(xiàn)了V——M——VM——V的一個雙向綁定。

AngularJs 為 scope 模型上設置了一個 監(jiān)聽隊列，用來監(jiān)聽數(shù)據(jù)變化并更新 view 。每次綁定一個東西到 view(html) 上時 AngularJs 就會往 $watch 隊列里插入一條 $watch，用來檢測它監(jiān)視的 model 里是否有變化的東西。當瀏覽器接收到可以被 angular context 處理的事件時，$digest 循環(huán)就會觸發(fā)。$digest 會遍歷所有的 $watch。從而更新DOM。

$watch

這有點類似于我們的觀察者模式，在當前作用域$scope下，我們創(chuàng)建一個監(jiān)控器$watchers和一個監(jiān)聽器$watch，$watchers 負責管理所有的 $watch，當我們每次綁定到UI上的時候就<font color=red>自動</font>創(chuàng)建一個$watch，并把它放到 $watchers。

controller.js

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

index.html

<div>{{Hello}}</div>

這里，即便我們在$scope上添加了兩個變量，<font color=red>但是只有一個綁定在了UI上，因此在這里只生成了一個$watch</font>

$digest

當瀏覽器接收到可以被angular context處理的事件時，$digest循環(huán)就會觸發(fā)。$digest將會遍歷我們的$watch，如果$watch沒有變化，這個循環(huán)檢測就將停止，如果有至少一個更新過，這個循環(huán)就會再次觸發(fā)，直到所有的$watch都沒有變化。這樣就能夠保證每個model都已經(jīng)不會再變化。這就是臟檢查(Dirty Checking)機制

controller.js

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

 $scope.changeFoo = function() {
 $scope.name = "Bar";
 }
});

index.js

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

1. 當我們按下按鈕
2. 瀏覽器接收到一個事件，進入angular context。
3. $digest循環(huán)開始執(zhí)行，查詢每個$watch是否變化。
4. 由于監(jiān)視$scope.name的$watch報告了變化，它會強制再執(zhí)行一次$digest循環(huán)。
5. 新的$digest循環(huán)沒有檢測到變化。
6. 更新與$scope.name新值相應部分的DOM。

$apply

$apply 我們可以直接理解為刷新UI。<font color=red>如果當事件觸發(fā)時，你調(diào)用$apply，它會進入angular context，如果沒有調(diào)用就不會進入，之后的$digest檢測機制就不會觸發(fā)</font>

app.directive('clickable', function() {
 return {
 restrict: "E",
 scope: {
 foo: '='
 },
 template: '<ul style="background-color: lightblue"><li>{{foo}}</li></ul>',
 link: function(scope, element, attrs) {
 element.bind('click', function() {
 scope.foo++;
 console.log(scope.foo);
 });
 }
 }
});

當我們調(diào)用clickable指令的時候，我們可以看到foo的值增加了，但是界面上顯示的內(nèi)容并沒有改變。$digest臟檢測機制沒有觸發(fā)，檢測foo的$watch就沒有執(zhí)行。

$apply()方法的兩種形式

1) 無參

$scope.$apply();

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

當我們使用這種形式的時候，如果在scope.$apply之前程序發(fā)生異常，那scope.$apply沒有執(zhí)行，界面就不會更新

2) 有參

$scope.$apply(function(){
 ...
})

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

如果用這種形式，即使后面的發(fā)生異常，數(shù)據(jù)還是會更新。

在 AngularJS 中使用 $watch

常用的使用方式：

$scope.name = 'Hello';
$scope.$watch('name', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
});

傳入到$watch()中的第二個參數(shù)是一個回調(diào)函數(shù)，該函數(shù)在name的值發(fā)生變化的時候會被調(diào)用。

如果要監(jiān)聽的是一個對象，那還需要第三個參數(shù)：

$scope.data.name = 'Hello';
$scope.$watch('data', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
}, true);

表示比較的是對象的值而不是引用，如果不加第三個參數(shù)true，在 data.name 變化時，不會觸發(fā)相應操作，因為引用的是同一引用。

總結(jié)

1) 只有在$scope變量綁定到頁面上，才會創(chuàng)建 $watch

2) $apply決定事件是否可以進入angular context

3) $digest 循環(huán)檢查model時最少兩次，最多10次(多于10次拋出異常，防止無限檢查)

4) AngularJs自帶的指令已經(jīng)實現(xiàn)了$apply，所以不需要我們額外的編寫

5) 在自定義指令時，建議使用帶function參數(shù)的$apply

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com