JS學習筆記——AngularJS 1.x雙向數據綁定機制

0.前言

AngularJS和vueJS是前端比較熱門的兩個框架，AngularJS 1.x是我第一個接觸的框架，雙向綁定是其最大的特色，咱們從原生JS的角度看看，這個雙向數據綁定是如何實現的。點這裏看vueJS的雙向綁定原理。

1.簡單的雙向綁定實現

AngularJS的雙向綁定基於髒檢測(dirty checking)。所謂的dirty checking就是對比新舊兩個值，若是有變化（形象點說，就是這個值髒了），就更新。AngularJS註冊瞭如下幾個事件，當這些事件發生後，就會開始」髒檢測」。」髒檢測」的核心函數是$digest()。

• DOM事件(Click, Keyup)
• XHR響應
• 瀏覽器Location變化
• Timer事件(setTimeout()和setInterval())
• 手動執行 $digest() 或$apply()

model->view：$scope下的變量出現變化，執行DOM更新。
view->model：監聽DOM事件，在事件處理程序中改變$scope下的變量。
下面以AngularJS中的ng-click和ng-bind兩個指令爲例子，說說如何實現雙向綁定。

<div>
    <form>
        <input type="text" ng-bind="count" />
        <button type="button" ng-click="increment" >increment</button>
    </form>
    <div ng-bind="count">
    </div>
</div>

//構造函數
function Scope(){
    this.$$watchers = [];//須要綁定的變量列表
}
Scope.prototype.$watch = function(){
	//往$$watchers裏面加須要綁定的變量
}
Scope.prototype.$digest = function(){
	//髒檢測
	//循環檢測$$watchers裏的全部數據，對比是否變化：若是沒有變化，再循環一次確認是否變化，直到連續兩次不變(最多循環10次)；若是發生變化，則更新DOM
}

window.load = function(){
    var $scope = new Scope();

    for(var key in $scope) {
        //把$scope中的變量添加到$$watchers列表中
    }

    //處理帶有ng-click和ng-bind指令的元素
    //V->M:給這兩個元素綁定事件處理程序，在程序中修改model
    //M->V:由於修改了model，而後立刻調用$scope.$digest()

}

因爲$digest須要循環檢測綁定的變量，所以AngularJS推薦一個頁面綁定的view最好不要超過2000個。

【Reference】
1. 雙向綁定的簡單實現——基於「髒檢測」 https://zhuanlan.zhihu.com/p/24990192