angular.js - 試問angularjs的雙向綁定是如何實現的？

Question

用過angularjs的人一定知道他的雙向綁定，用起來也是很方便，可是他內部是怎麼實現的呢？

視圖變化了去更新數據，這個還好理解，也大都知道怎麼去模擬一下，但是說到數據變化了去更新視圖，關鍵在於是怎麼去判斷數據發生了變化。 。 。

之前想了一下，類似先儲存一份oldValue，然後定時去遍歷這些，用newValue和oldValue去對比，如果變化了做更新和其他相關的工作。 。 。

但是覺得這樣行嗎？自己思索半天覺得也不是很可靠，希望各位兄弟姊妹不吝教誨！ ## 標題

Answer 1

實作一個類似雙向綁定的簡單範例

HTML

<input id="app" my-model="text" />

SCRIPT

var scope = {};
var input = document.getElementById('app');

視圖變化更新資料

這個很簡單，編譯指令myModel的時候綁定事件即可

input.addEventListener('input', function (e) {
    scope.text = e.currentTarget.value;
},false);

資料變化更新UI

scope內部有個watchers和digest

scope.$$watchers = [];
scope.$$watchers.push({
    key:'text',
    fn: function (value) {
        input.value = value;
    }
});

scope.$digest = function () {
    scope.$$watchers.forEach(function (watcher) {
        watcher.fn(scope.text);
    });
};

當我們給scope賦值的時候在觸發digest，那麼UI就會同步更新了

scope.text ='zzz';
scope.$digest();

直接給scope賦值並不會更新UI，只有觸發了digest，angualr才會去更新UI，大部分情況下angular幫我們主動觸發了digest，給人的印象好像我們隨便給scope就可以了，結果出現自己理解不了的狀況。例如

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        setTimeout(function () {
            $scope.text = 'zzz';
        }, 1000);
    });
    

直接使用setTimeout，結果UI就是不更新，需要我們做如下處理

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.text = 'zzz';
            });
        }, 1000);
    });
    

或使用angular的$timeout,它幫我們觸發了digest

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope,$timeout) {
        $timeout(function () {               
            $scope.text = 'zzz';
        }, 1000);
    });

Answer 2

搜尋一下吧 很多文章可以給你解惑 先搜尋再提問

Answer 3

先聲明一點，我對於題主提到的angularjs不太熟悉，有點不對題。
knockout也有相同的資料資料雙向綁定的特性，它是以觀察者模式進行實現的，創建被觀察的物件後，使用set方法賦值的時候，同時通知對該物件感興趣的觀察者，以此來達到資料雙向綁定的效果。

Answer 4

angular1 是髒檢查。 。也因為這個帶來了效能的問題

Answer 5

AngularJS 是如何實現其雙向資料綁定機制的？

Answer 6

可以參考：
http://teropa.info/build-your-own-angular/build_your_own_angularjs_sample.pdf