||瀏覽器事件循環(huán)和Angular的MVW

“臟檢查”是Angular中的核心機制之一，它是實現雙向綁定、MVVM模式的重要基礎。

Angular將雙向綁定轉換為一堆watch表達式，然后遞歸檢查這些watch表達式的結果是否變了，如果變了，則執(zhí)行相應的watcher函數。等到Model的值不再變化，也就不會再有watcher函數被觸發(fā)，一個完整的digest循環(huán)就結束了。

因為我們不需要改變編程思維，就能用相同的語言、相同的事件模型，快速開發(fā)NodeJS程序，所以NodeJS迅速火起來，JavaScript full-stack也日漸流行。

我們經常聽說Angular是一個MV*的框架，這是因為Angular拓展了瀏覽器的事件模型，建立了一個自己的上下文環(huán)境。

||Angular中的$watch函數

watch表達式很靈活：可以是一個函數，可以是$scope上的一個屬性名，也可以是一個字符串形式的表達式。$scope上的屬性名或表達式，最終仍會被$parse服務解析為響應的獲取屬性值的函數。

所有的watcher函數都會被unshift函數插入scope.$$watchers數組的頭部，以便后邊的$digest使用。

最后，$watch函數會返回一個反注冊函數，一旦我們調用它，就可以移除剛才注冊的watcher。

需要注意的是，Angular默認是不會使用angular.equals()函數進行深度比較的，因為使用===比較會更快，所以，它對數組或者Object進行比較時檢查的是引用。這就導致內容完全相同的兩個表達式被判定為不同。如果需要進行深度比較，第三個可選參數objectEquality，需要顯式設置為true，如$watch('someExp', function(){...}, true)。

Angular還提供了$watchGroup、$watchCollection方法來監(jiān)聽數組或者是一組屬性。

||Angular中的$digest函數

前面提到Angular拓展了瀏覽器的事件循環(huán)，這是怎么回事呢？

當接受View上的事件指令所轉發(fā)的事件時，就會切換到Angular的上下文環(huán)境，來相應這類事件，$digest循環(huán)就會觸發(fā)。

$digest循環(huán)實際上包括兩個while循環(huán)。它們分別是：處理$evalAsync的異步運算隊列，處理$watch的watchers隊列。

當$digest循環(huán)發(fā)生的時候，它會遍歷當前$scope及其所有子$scope上已注冊的所有watchers函數。

遍歷一遍所有watcher函數稱為一輪臟檢查。執(zhí)行完一輪臟檢查，如果任何一個watcher所監(jiān)聽的值改變過，那么就會重新再進行一輪臟檢查，直到所有的watcher函數都報告其所監(jiān)聽的值不再變了。

當$digest循環(huán)結束時，才把模型的變化結果更新到DOM中去。這樣可以合并多個更新，防止頻繁的DOM屬性。

需要注意的是，在$digest循環(huán)結束之前，如果超過了10輪臟檢查，就會拋出一個異常，以防止臟檢查無限循環(huán)下去。

什么時候會進入這個Angular的上下文環(huán)境，觸發(fā)“臟檢查機制”呢？這個問題很重要，它同時也是比較讓人頭疼的地方。

每一個進入Angular上下文環(huán)境的事件，都會執(zhí)行一次$digest循環(huán)。對于ngModel監(jiān)聽的表單交互控件來說，每輸入一個字符，就會觸發(fā)一次循環(huán)來檢查$watcher函數，以便及時更新View。在Angular1.3之后可以利用ngModelOptions進行配置，來修改默認的觸發(fā)方式。

||Angular中的$apply

$digest是一個內部函數，正常的應用代碼中是不應該直接調用它的。要想主動觸發(fā)它，就要調用scope.$apply函數，它是觸發(fā)Angular“臟檢查機制”的常用公開接口。

需要注意的是：Angular只能管理它所已知的行為觸發(fā)方式，而不能涵蓋所有的Angular操作場景。這就為什么我們在封裝第三方jQuery插件時，不能自動更新視圖，而需要我們手動調用$scope.$apply。

集成jquery插件的時候，有時會出現digest in progress錯誤。如果排除Bug之后仍然不能解決，那么可以考慮用$timeout來解決。

$timeout的妙用

在延時任務中修改被綁定到界面中的變量，那么window.setTimeout是不會觸發(fā)“臟檢查”來更新UI界面的。你可能想：加上$scope.$apply不就解決了嘛。是的，這能解決UI界面更新的問題，但是你可能會遇到另一個問題：

 Error: $digest already in progress

這是怎么回事兒？哦，Angular內部正在進行“臟檢查”。一位聰明的程序員巧妙地寫了下面一段代碼來解決這個問題：

function safeApply(scope, fn){ 
  (scope.
phase||scope.$root.
phase) ? fn() : scope.$apply(fn); 
} 

代碼中，在執(zhí)行apply函數之前會首先檢查Angular內部是不是正在做“臟檢查”，如果是就直接執(zhí)行函數，不用$apply；反之沒有啟動臟檢查，那么就$apply執(zhí)行該函數。呵呵，“完美”解決，不是嗎？

請注意，筆者在上面的完美兩個字上加了引號。Angular已經為我們內置了$timeout服務，它是Angular包裝原生javascript window.setTimeout而實現的。

$timeout有很多妙用，但一定不要濫用，$timeout實現apply功能不應該是我們的第一方案，第一方案仍然應該是使用Angular內置的指令。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論