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

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

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

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

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

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

$watch

這有點類似于我們的觀察者模式，在當前作用域$scope下，我們創建一個監控器$watchers和一個監聽器$watch，$watchers 負責管理所有的 $watch，當我們每次綁定到UI上的時候就<font color=red>自動</font>創建一個$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循環就會觸發。$digest將會遍歷我們的$watch，如果$watch沒有變化，這個循環檢測就將停止，如果有至少一個更新過，這個循環就會再次觸發，直到所有的$watch都沒有變化。這樣就能夠保證每個model都已經不會再變化。這就是臟檢查(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循環開始執行，查詢每個$watch是否變化。
4. 由于監視$scope.name的$watch報告了變化，它會強制再執行一次$digest循環。
5. 新的$digest循環沒有檢測到變化。
6. 更新與$scope.name新值相應部分的DOM。

$apply

$apply 我們可以直接理解為刷新UI。<font color=red>如果當事件觸發時，你調用$apply，它會進入angular context，如果沒有調用就不會進入，之后的$digest檢測機制就不會觸發</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);
 });
 }
 }
});

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

$apply()方法的兩種形式

1) 無參

$scope.$apply();

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

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

2) 有參

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

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

如果用這種形式，即使后面的發生異常，數據還是會更新。

在 AngularJS 中使用 $watch

常用的使用方式：

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

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

如果要監聽的是一個對象，那還需要第三個參數：

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

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

總結

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

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

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

4) AngularJs自帶的指令已經實現了$apply，所以不需要我們額外的編寫

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

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