angular源碼分析6-髒值檢測實現

scope樹狀結構

angular內置一個 $rootScope服務，rootScope是angular做用範圍的頂級做用域，也是做用域的源頭。$rootScope能夠產生子scope，子scope能夠產生子scope，最終生成一個以rootScope爲根節點的scope樹。以下圖所示：

 Scope是一個構造器函數，new Scope就建立了一個子做用域，而且這個子做用域是由其父做用域建立的。

下面用代碼模擬實現一個scope是如何工做的，是如何實現數據綁定和髒值檢測的。

髒值檢測實現

指令的做用域是構造函數Scope的實例，即做用域是一個Scope實例化的對象。

$watch方法用來註冊監聽的做用於域的的值，當值發生變化時，執行相應的操做。

 

$digest方法用來觸發某個scope對象髒值檢測。髒值檢測觸發開始後，若是在一輪檢測過程當中，存在newVaule與oldValue不一樣，這一輪髒值檢測結束後，會進入下一輪髒值檢測，直到全部的newValue和oldValue值限公或執行的輪數超過指定的髒值檢測最大的輪數，結束髒值檢測。

$apply觸發髒值檢測，相比較$digest，（1）$apply先執行傳入的參數（函數），$digest沒有傳參 （2）$apply而後從根節點觸發髒值檢測，使根做用域和其子做用域都進行髒值檢測，$digest只是觸發當前做用域的髒值檢測 （3）最後，$apply返回傳入的函數執行的結果。

使用實例

實例1

實例2（ng-bind）

ng-bind指令實現

以下angular內置的指令ng-bind，在連接階段，執行postLink即函數ngBindLink時，對ng-bind的值監聽註冊，當ng-bind的值改變時，就更新ng-bind所屬的元素的節點顯示值。

ng-bind使用

html模板

自定myDirective指令，模板中使用了ng-bind指令。

瀏覽器上顯示結果，顯示了綁定的scope.color的值。

下面看一下scope.color第一次綁定到div的過程。

html文檔加載完之後，開始調用angularInit方法初始化angular。執行1489行到第1492行代碼，編譯連接全部指令後，調用$apply觸發髒值檢測，從根做用域到全部子做用域都進行髒值檢測，這樣綁定的數據顯示在view上。在定義ng-bind指令時，監聽註冊了ng-bind的值。在髒值檢測時，scope.color有undefind變爲'red'，值發生了改變，調用ngBindWatchAction監聽函數，更新view的值，即ng-bind所屬的div的值爲red。