Angularjs 髒值檢測

時間 2019-11-17

原文原文鏈接

文章轉自：http://www.ituring.com.cn/article/39865html

構建本身的AngularJS，第一部分：Scope和Digest

原文連接：http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.htmlgit

Angular是一個成熟和強大的JavaScript框架。它也是一個比較龐大的框架，在熟練掌握以前，須要領會它提出的不少新概念。不少Web開發人員涌向Angular，有很多人面臨一樣的障礙。Digest究竟是怎麼作的？定義一個指令（directive）有哪些不一樣的方法？Service和provider有什麼區別？github

Angular的文檔挺不錯的，第三方的資源也愈來愈豐富，想要學習一門新的技術，沒什麼方法比把它拆開研究其運做機制更好。express

在這個系列的文章中，我將從無到有構建AngularJS的一個實現。隨着逐步深刻的講解，讀者將能對Angular的運做機制有一個深刻的認識。數組

在第一部分中，讀者將看到Angular的做用域是如何運做的，還有好比$eval, $digest, $apply這些東西怎麼實現。Angular的髒檢查邏輯看上去有些難以想象，但你將看到實際並不是如此。數據結構

基礎知識

在Github上，能夠看到這個項目的所有源碼。相比只複製一份下來，我更建議讀者從無到有構建本身的實現，從不一樣角度探索代碼的每一個步驟。在本文中，我嵌入了JSBin的一些代碼，能夠直接在文章中進行一些互動。（譯者注：由於我在github上翻譯，無法集成JSBin了，只能給連接……）app

咱們將使用Lo-Dash庫來處理一些在數組和對象上的底層操做。Angular自身並未使用Lo-Dash，可是從咱們的目的看，要儘可能無視這些不太相關的比較底層的事情。當讀者在代碼中看到下劃線（_）的時候，那就是在調用Lo-Dash的功能。框架

咱們還將使用console.assert函數作一些特別的測試。這個函數應該適用於全部現代JavaScript環境。異步

下面是使用Lo-Dash和assert函數的示例：async

http://jsbin.com/UGOVUk/4/embed?js,console

Scope對象

Angular的Scope對象是POJO（簡單的JavaScript對象），在它們上面，能夠像對其餘對象同樣添加屬性。Scope對象是用構造函數建立的，咱們來寫個最簡單的版本：

function Scope() { }

如今咱們就可使用new操做符來建立一個Scope對象了。咱們也能夠在它上面附加一些屬性：

var aScope = new Scope(); aScope.firstName = 'Jane'; aScope.lastName = 'Smith';

這些屬性沒什麼特別的。不須要調用特別的設置器（setter），賦值的時候也沒什麼限制。相反，在兩個特別的函數：$watch和$digest之中發生了一些奇妙的事情。

監控對象屬性：$watch和$digest

$watch和$digest是相輔相成的。二者一塊兒，構成了Angular做用域的核心：數據變化的響應。

使用$watch，能夠在Scope上添加一個監聽器。當Scope上發生變動時，監聽器會收到提示。給$watch指定以下兩個函數，就能夠建立一個監聽器：

一個監控函數，用於指定所關注的那部分數據。
一個監聽函數，用於在數據變動的時候接受提示。

做爲一名Angular用戶，通常來講，是監控一個表達式，而不是使用監控函數。監控表達式是一個字符串，好比說「user.firstName」，一般在數據綁定，指令的屬性，或者JavaScript代碼中指定，它被Angular解析和編譯成一個監控函數。在這篇文章的後面部分咱們會探討這是如何作的。在這篇文章中，咱們將使用稍微低級的方法直接提供監控功能。

爲了實現$watch，咱們須要存儲註冊過的全部監聽器。咱們在Scope構造函數上添加一個數組：

function Scope() { this.$$watchers = []; }

在Angular框架中，雙美圓符前綴$$表示這個變量被看成私有的來考慮，不該當在外部代碼中調用。

如今咱們能夠定義$watch方法了。它接受兩個函數做參數，把它們存儲在$$watchers數組中。咱們須要在每一個Scope實例上存儲這些函數，因此要把它放在Scope的原型上：

Scope.prototype.$watch = function(watchFn, listenerFn) { var watcher = { watchFn: watchFn, listenerFn: listenerFn }; this.$$watchers.push(watcher); };

另一面就是$digest函數。它執行了全部在做用域上註冊過的監聽器。咱們來實現一個它的簡化版，遍歷全部監聽器，調用它們的監聽函數：

Scope.prototype.$digest = function() { _.forEach(this.$$watchers, function(watch) { watch.listenerFn(); }); };

如今咱們能夠添加監聽器，而後運行$digest了，這將會調用監聽函數：

http://jsbin.com/oMaQoxa/2/embed?js,console

這些自己沒什麼大用，咱們要的是能檢測由監控函數指定的值是否確實變動了，而後調用監聽函數。

髒值檢測

如同上文所述，監聽器的監聽函數應當返回咱們所關注的那部分數據的變化，一般，這部分數據就存在於做用域中。爲了使得訪問做用域更便利，在調用監控函數的時候，使用當前做用域做爲實參。一個關注做用域上fiestName屬性的監聽器像這個樣子：

function(scope) { return scope.firstName; }

這是監控函數的通常形式：從做用域獲取一些值，而後返回。

$digest函數的做用是調用這個監控函數，而且比較它返回的值和上一次返回值的差別。若是不相同，監聽器就是髒的，它的監聽函數就應當被調用。

想要這麼作，$digest須要記住每一個監控函數上次返回的值。既然咱們如今已經爲每一個監聽器建立過一個對象，只要把上一次的值存在這上面就好了。下面是檢測每一個監控函數值變動的$digest新實現：

Scope.prototype.$digest = function() { var self = this; _.forEach(this.$$watchers, function(watch) { var newValue = watch.watchFn(self); var oldValue = watch.last; if (newValue !== oldValue) { watch.listenerFn(newValue, oldValue, self); } watch.last = newValue; }); };

對每一個監聽器，咱們調用監控函數，把做用域自身看成實參傳遞進去，而後比較這個返回值和上次返回值，若是不一樣，就調用監聽函數。方便起見，咱們把新舊值和做用域都看成參數傳遞給監聽函數。最終，咱們把監聽器的last屬性設置成新返回的值，下一次能夠用它來做比較。

有了這個實現以後，咱們就能夠看到在$digest調用的時候，監聽函數是怎麼執行的：

http://jsbin.com/OsITIZu/3/embed?js,console

咱們已經實現了Angular做用域的本質：添加監聽器，在digest裏運行它們。

也已經能夠看到幾個關於Angular做用域的重要性能特性：

在做用域上添加數據自己並不會有性能折扣。若是沒有監聽器在監控某個屬性，它在不在做用域上都無所謂。Angular並不會遍歷做用域的屬性，它遍歷的是監聽器。
$digest裏會調用每一個監控函數，所以，最好關注監聽器的數量，還有每一個獨立的監控函數或者表達式的性能。

在Digest的時候得到提示

若是你想在每次Angular的做用域被digest的時候獲得通知，能夠利用每次digest的時候挨個執行監聽器這個事情，只要註冊一個沒有監聽函數的監聽器就能夠了。

想要支持這個用例，咱們須要在$watch裏面檢測是否監控函數被省略了，若是是這樣，用個空函數來代替它：

Scope.prototype.$watch = function(watchFn, listenerFn) { var watcher = { watchFn: watchFn, listenerFn: listenerFn || function() { } }; this.$$watchers.push(watcher); };

若是用了這個模式，須要記住，即便沒有listenerFn，Angular也會尋找watchFn的返回值。若是返回了一個值，這個值會提交給髒檢查。想要採用這個用法又想避免多餘的事情，只要監控函數不返回任何值就好了。在這個例子裏，監聽器的值始終會是未定義的。

http://jsbin.com/OsITIZu/4/embed?js,console

這個實現的核心就這樣，可是離最終的仍是差太遠了。好比說有個很典型的場景咱們不能支持：監聽函數自身也修改做用域上的屬性。若是這個發生了，另外有個監聽器在監控被修改的屬性，有可能在同一個digest裏面檢測不到這個變更：

http://jsbin.com/eTIpUyE/2/embed?js,console

咱們來修復這個問題。

當數據髒的時候持續Digest

咱們須要改變一下digest，讓它持續遍歷全部監聽器，直到監控的值中止變動。

首先，咱們把如今的$digest函數更名爲$$digestOnce，它把全部的監聽器運行一次，返回一個布爾值，表示是否還有變動了：

Scope.prototype.$$digestOnce = function() { var self = this; var dirty; _.forEach(this.$$watchers, function(watch) { var newValue = watch.watchFn(self); var oldValue = watch.last; if (newValue !== oldValue) { watch.listenerFn(newValue, oldValue, self); dirty = true; } watch.last = newValue; }); return dirty; };

而後，咱們從新定義$digest，它做爲一個「外層循環」來運行，當有變動發生的時候，調用$$digestOnce：

Scope.prototype.$digest = function() { var dirty; do { dirty = this.$$digestOnce(); } while (dirty); };

$digest如今至少運行每一個監聽器一次了。若是第一次運行完，有監控值發生變動了，標記爲dirty，全部監聽器再運行第二次。這會一直運行，直到全部監控的值都再也不變化，整個局面穩定下來了。

Angular做用域裏並非真的有個函數叫作$$digestOnce，相反，digest循環都是包含在$digest裏的。咱們的目標更可能是清晰度而不是性能，因此把內層循環封裝成了一個函數。

下面是新的實現：

http://jsbin.com/Imoyosa/3/embed?js,console

咱們如今能夠對Angular的監聽器有另一個重要認識：它們可能在單次digest裏面被執行屢次。這也就是爲何人們常常說，監聽器應當是冪等的：一個監聽器應當沒有邊界效應，或者邊界效應只應當發生有限次。好比說，假設一個監控函數觸發了一個Ajax請求，沒法肯定你的應用程序發了多少個請求。

在咱們如今的實現中，有一個明顯的遺漏：若是兩個監聽器互相監控了對方產生的變動，會怎樣？也就是說，若是狀態始終不會穩定？這種狀況展現在下面的代碼裏。在這個例子裏，$digest調用被註釋掉了，把註釋去掉看看發生什麼狀況：

http://jsbin.com/eKEvOYa/3/embed?js,console

JSBin執行了一段時間以後就中止了（在我機器上大概跑了100,000次左右）。若是你在別的東西好比Node.js裏跑，它會一直運行下去。

放棄不穩定的digest

咱們要作的事情是，把digest的運行控制在一個可接受的迭代數量內。若是這麼屢次以後，做用域還在變動，就勇敢放手，宣佈它永遠不會穩定。在這個點上，咱們會拋出一個異常，由於無論做用域的狀態變成怎樣，它都不太多是用戶想要的結果。

迭代的最大值稱爲TTL（short for Time To Live）。這個值默認是10，可能有點小（咱們剛運行了這個digest 100,000次！），可是記住這是一個性能敏感的地方，由於digest常常被執行，並且每一個digest運行了全部的監聽器。用戶也不太可能建立10個以上鍊狀的監聽器。

事實上，Angular裏面的TTL是能夠調整的。咱們將在後續文章討論provider和依賴注入的時候再回顧這個話題。

咱們繼續，給外層digest循環添加一個循環計數器。若是達到了TTL，就拋出異常：

Scope.prototype.$digest = function() { var ttl = 10; var dirty; do { dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { throw "10 digest iterations reached"; } } while (dirty); };

下面是更新過的版本，可讓咱們循環引用的監控例子拋出異常：

http://jsbin.com/uNapUWe/2/embed?js,console

這些應當已經把digest的事情說清楚了。

如今，咱們把注意力轉到如何檢測變動上吧。

基於值的髒檢查

咱們曾經使用嚴格等於操做符(===)來比較新舊值，在絕大多數狀況下，它是不錯的，好比全部的基本類型（數字，字符串等等），也能夠檢測一個對象或者數組是否變成新的了，但Angular還有一種辦法來檢測變動，用於檢測當對象或者數組內部產生變動的時候。那就是：能夠監控值的變動，而不是引用。

這類髒檢查須要給$watch函數傳入第三個布爾類型的可選參數當標誌來開啓。當這個標誌爲真的時候，基於值的檢查開啓。咱們來從新定義$watch，接受這個參數，而且把它存在監聽器裏：

Scope.prototype.$watch = function(watchFn, listenerFn, valueEq) { var watcher = { watchFn: watchFn, listenerFn: listenerFn, valueEq: !!valueEq }; this.$$watchers.push(watcher); };

咱們所作的一切是把這個標誌加在監聽器上，經過兩次取反，強制轉換爲布爾類型。當用戶調用$watch，沒傳入第三個參數的時候，valueEq會是未定義的，在監聽器對象裏就變成了false。

基於值的髒檢查意味着若是新舊值是對象或者數組，咱們必須遍歷其中包含的全部內容。若是它們之間有任何差別，監聽器就髒了。若是該值包含嵌套的對象或者數組，它也會遞歸地按值比較。

Angular內置了本身的相等檢測函數，可是咱們會用Lo-Dash提供的那個。讓咱們定義一個新函數，取兩個值和一個布爾標誌，並比較相應的值：

Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) { if (valueEq) { return _.isEqual(newValue, oldValue); } else { return newValue === oldValue; } };

爲了提示值的變化，咱們也須要改變以前在每一個監聽器上存儲舊值的方式。只存儲當前值的引用是不夠的，由於在這個值內部發生的變動也會生效到它的引用上，$$areEqual方法比較同一個值的兩個引用始終爲真，監控不到變化，所以，咱們須要創建當前值的深拷貝，而且把它們儲存起來。

就像相等檢測同樣，Angular也內置了本身的深拷貝函數，但咱們仍是用Lo-Dash提供的。咱們修改一下$digestOnce，在內部使用新的$$areEqual函數，若是須要的話，也複製最後一次的引用：

Scope.prototype.$$digestOnce = function() { var self = this; var dirty; _.forEach(this.$$watchers, function(watch) { var newValue = watch.watchFn(self); var oldValue = watch.last; if (!self.$$areEqual(newValue, oldValue, watch.valueEq)) { watch.listenerFn(newValue, oldValue, self); dirty = true; } watch.last = (watch.valueEq ? _.cloneDeep(newValue) : newValue); }); return dirty; };

如今咱們能夠看到兩種髒檢測方式的差別：

http://jsbin.com/ARiWENO/3/embed?js,console

相比檢查引用，檢查值的方式顯然是一個更爲複雜的操做。遍歷嵌套的數據結構很花時間，保持深拷貝的數據也佔用很多內存。這就是Angular默認不使用基於值的髒檢測的緣由，用戶須要顯式設置這個標記去打開它。

Angular也提供了第三種髒檢測的方法：集合監控。就像基於值的檢測，也能提示對象和數組中的變動。但不一樣於基於值的檢測方式，它作的是一個比較淺的檢測，並不遞歸進入到深層去，因此它比基於值的檢測效率更高。集合檢測是經過「$watchCollection」函數來使用的，在這個系列的後續部分，咱們會來看看它是如何實現的。

在咱們完成值的比對以前，還有些JavaScript怪事要處理一下。

非數字（NaN）

在JavaScript裏，NaN（Not-a-Number）並不等於自身，這個聽起來有點怪，但確實就這樣。若是咱們在髒檢測函數裏不顯式處理NaN，一個值爲NaN的監聽器會一直是髒的。

對於基於值的髒檢測來講，這個事情已經被Lo-Dash的isEqual函數處理掉了。對於基於引用的髒檢測來講，咱們須要本身處理。來修改一下$$areEqual函數的代碼：

Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) { if (valueEq) { return _.isEqual(newValue, oldValue); } else { return newValue === oldValue || (typeof newValue === 'number' && typeof oldValue === 'number' && isNaN(newValue) && isNaN(oldValue)); } };

如今有NaN的監聽器也正常了：

http://jsbin.com/ijINaRA/2/embed?js,console

基於值的檢測實現好了，如今咱們該把注意力集中到應用程序代碼如何跟做用域打交道上了。

$eval - 在做用域的上下文上執行代碼

在Angular中，有幾種方式能夠在做用域的上下文上執行代碼，最簡單的一種就是$eval。它使用一個函數做參數，所作的事情是當即執行這個傳入的函數，而且把做用域自身看成參數傳遞給它，返回的是這個函數的返回值。$eval也能夠有第二個參數，它所作的僅僅是把這個參數傳遞給這個函數。

$eval的實現很簡單：

Scope.prototype.$eval = function(expr, locals) { return expr(this, locals); };

$eval的使用同樣很簡單：

http://jsbin.com/UzaWUC/1/embed?js,console

那麼，爲何要用這麼一種明顯不少餘的方式去執行一個函數呢？有人以爲，有些代碼是專門與做用域的內容打交道的，$eval讓這一切更加明顯。$scope也是構建$apply的一個部分，後面咱們就來說它。

而後，可能$eval最有意思的用法是當咱們不傳入函數，而是表達式。就像$watch同樣，能夠給$eval一個字符串表達式，它會把這個表達式編譯，而後在做用域的上下文中執行。咱們將在這個系列的後面部分實現這些。

$apply - 集成外部代碼與digest循環

可能Scope上全部函數裏最有名的就是$apply了。它被譽爲將外部庫集成到Angular的最標準的方式，這話有個不錯的理由。

$apply使用函數做參數，它用$eval執行這個函數，而後經過$digest觸發digest循環。下面是一個簡單的實現：

Scope.prototype.$apply = function(expr) { try { return this.$eval(expr); } finally { this.$digest(); } };

$digest的調用放置於finally塊中，以確保即便函數拋出異常，也會執行digest。

關於$apply，大的想法是，咱們能夠執行一些與Angular無關的代碼，這些代碼也仍是能夠改變做用域上的東西，$apply能夠保證做用域上的監聽器能夠檢測這些變動。當人們談論使用$apply集成代碼到「Angular生命週期」的時候，他們指的就是這個事情，也沒什麼比這更重要的了。

這裏是$apply的實踐：

http://jsbin.com/UzaWUC/2/embed?js,console

延遲執行 - $evalAsync

在JavaScript中，常常會有把一段代碼「延遲」執行的狀況 - 把它的執行延遲到當前的執行上下文結束以後的將來某個時間點。最多見的方式就是調用setTimeout()函數，傳遞一個0（或者很是小）做爲延遲參數。

這種模式也適用於Angular程序，但更推薦的方式是使用$timeout服務，而且使用$apply把要延遲執行的函數集成到digest生命週期。

但在Angular中還有一種延遲代碼的方式，那就是Scope上的$evalAsync函數。$evalAsync接受一個函數，把它列入計劃，在當前正持續的digest中或者下一次digest以前執行。舉例來講，你能夠在一個監聽器的監聽函數中延遲執行一些代碼，即便它已經被延遲了，仍然會在現有的digest遍歷中被執行。

咱們首先須要的是存儲$evalAsync列入計劃的任務，能夠在Scope構造函數中初始化一個數組來作這事：

function Scope() { this.$$watchers = []; this.$$asyncQueue = []; }

咱們再來定義$evalAsync，它添加將在這個隊列上執行的函數：

Scope.prototype.$evalAsync = function(expr) { this.$$asyncQueue.push({scope: this, expression: expr}); };

咱們顯式在放入隊列的對象上設置當前做用域，是爲了使用做用域的繼承，在這個系列的下一篇文章中，咱們會討論這個。

而後，咱們在$digest中要作的第一件事就是從隊列中取出每一個東西，而後使用$eval來觸發全部被延遲執行的函數：

Scope.prototype.$digest = function() { var ttl = 10; var dirty; do { while (this.$$asyncQueue.length) { var asyncTask = this.$$asyncQueue.shift(); this.$eval(asyncTask.expression); } dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { throw "10 digest iterations reached"; } } while (dirty); };

這個實現保證了：若是看成用域仍是髒的，就想把一個函數延遲執行，那這個函數會在稍後執行，但還處於同一個digest中。

下面是關於如何使用$evalAsync的一個示例：

http://jsbin.com/ilepOwI/1/embed?js,console

做用域階段

$evalAsync作的另一件事情是：若是如今沒有其餘的$digest在運行的話，把給定的$digest延遲執行。這意味着，不管何時調用$evalAsync，能夠肯定要延遲執行的這個函數會「很快」被執行，而不是等到其餘什麼東西來觸發一次digest。

須要有一種機制讓$evalAsync來檢測某個$digest是否已經在運行了，由於它不想影響到被列入計劃將要執行的那個。爲此，Angular的做用域實現了一種叫作階段（phase）的東西，它就是做用域上一個簡單的字符串屬性，存儲瞭如今正在作的信息。

在Scope的構造函數裏，咱們引入一個叫$$phase的字段，初始化爲null：

function Scope() { this.$$watchers = []; this.$$asyncQueue = []; this.$$phase = null; }

而後，咱們定義一些方法用於控制這個階段變量：一個用於設置，一個用於清除，也加個額外的檢測，以確保不會把已經激活狀態的階段再設置一次：

Scope.prototype.$beginPhase = function(phase) { if (this.$$phase) { throw this.$$phase + ' already in progress.'; } this.$$phase = phase; }; Scope.prototype.$clearPhase = function() { this.$$phase = null; };

在$digest方法裏，咱們來從外層循環設置階段屬性爲「$digest」：

Scope.prototype.$digest = function() { var ttl = 10; var dirty; this.$beginPhase("$digest"); do { while (this.$$asyncQueue.length) { var asyncTask = this.$$asyncQueue.shift(); this.$eval(asyncTask.expression); } dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { this.$clearPhase(); throw "10 digest iterations reached"; } } while (dirty); this.$clearPhase(); };

咱們把$apply也修改一下，在它裏面也設置個跟本身同樣的階段。在調試的時候，這個會有些用：

Scope.prototype.$apply = function(expr) { try { this.$beginPhase("$apply"); return this.$eval(expr); } finally { this.$clearPhase(); this.$digest(); } };

最終，把對$digest的調度放進$evalAsync。它會檢測做用域上現有的階段變量，若是沒有（也沒有已列入計劃的異步任務），就把這個digest列入計劃。

Scope.prototype.$evalAsync = function(expr) { var self = this; if (!self.$$phase && !self.$$asyncQueue.length) { setTimeout(function() { if (self.$$asyncQueue.length) { self.$digest(); } }, 0); } self.$$asyncQueue.push({scope: self, expression: expr}); };

有了這個實現以後，無論什麼時候、何地，調用$evalAsync，均可以肯定有一個digest會在不遠的未來發生。

http://jsbin.com/iKeSaGi/1/embed?js,console

在digest以後執行代碼 - $$postDigest

還有一種方式能夠把代碼附加到digest循環中，那就是把一個$$postDigest函數列入計劃。

在Angular中，函數名字前面有雙美圓符號表示它是一個內部的東西，不是應用開發人員應該用的。但它確實存在，因此咱們也要把它實現出來。

就像$evalAsync同樣，$$postDigest也能把一個函數列入計劃，讓它「之後」運行。具體來講，這個函數將在下一次digest完成以後運行。將一個$$postDigest函數列入計劃不會致使一個digest也被延後，因此這個函數的執行會被推遲到直到某些其餘緣由引發一次digest。顧名思義，$$postDigest函數是在digest以後運行的，若是你在$$digest裏面修改了做用域，須要手動調用$digest或者$apply，以確保這些變動生效。

首先，咱們給Scope的構造函數加隊列，這個隊列給$$postDigest函數用：

function Scope() { this.$$watchers = []; this.$$asyncQueue = []; this.$$postDigestQueue = []; this.$$phase = null; }

而後，咱們把$$postDigest也加上去，它所作的就是把給定的函數加到隊列裏：

Scope.prototype.$$postDigest = function(fn) { this.$$postDigestQueue.push(fn); };

最終，在$digest裏，當digest完成以後，就把隊列裏面的函數都執行掉。

Scope.prototype.$digest = function() { var ttl = 10; var dirty; this.$beginPhase("$digest"); do { while (this.$$asyncQueue.length) { var asyncTask = this.$$asyncQueue.shift(); this.$eval(asyncTask.expression); } dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { this.$clearPhase(); throw "10 digest iterations reached"; } } while (dirty); this.$clearPhase(); while (this.$$postDigestQueue.length) { this.$$postDigestQueue.shift()(); } };

下面是關於如何使用$$postDigest函數的：

http://jsbin.com/IMEhowO/1/embed?js,console

異常處理

現有對Scope的實現已經逐漸接近在Angular中實際的樣子了，但還有些脆弱，由於咱們迄今爲止沒有花精力在異常處理上。

Angular的做用域在遇到錯誤的時候是很是健壯的：當產生異常的時候，無論在監控函數中，在$evalAsync函數中，仍是在$$postDigest函數中，都不會把digest終止掉。咱們如今的實現裏，在以上任何地方產生異常都會把整個$digest弄掛。

咱們能夠很容易修復它，把上面三個調用包在try...catch中就行了。

Angular其實是把這些異常拋給了它的$exceptionHandler服務。既然咱們如今尚未這東西，先扔到控制檯上吧。

$evalAsync和$$postDigest的異常處理是在$digest函數裏，在這些場景裏，從已列入計劃的程序中拋出的異常將被記錄成日誌，它後面的仍是正常運行：

Scope.prototype.$digest = function() { var ttl = 10; var dirty; this.$beginPhase("$digest"); do { while (this.$$asyncQueue.length) { try { var asyncTask = this.$$asyncQueue.shift(); this.$eval(asyncTask.expression); } catch (e) { (console.error || console.log)(e); } } dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { this.$clearPhase(); throw "10 digest iterations reached"; } } while (dirty); this.$clearPhase(); while (this.$$postDigestQueue.length) { try { this.$$postDigestQueue.shift()(); } catch (e) { (console.error || console.log)(e); } } };

監聽器的異常處理放在$$digestOnce裏。

Scope.prototype.$$digestOnce = function() { var self = this; var dirty; _.forEach(this.$$watchers, function(watch) { try { var newValue = watch.watchFn(self); var oldValue = watch.last; if (!self.$$areEqual(newValue, oldValue, watch.valueEq)) { watch.listenerFn(newValue, oldValue, self); dirty = true; } watch.last = (watch.valueEq ? _.cloneDeep(newValue) : newValue); } catch (e) { (console.error || console.log)(e); } }); return dirty; };

如今咱們的digest循環碰到異常的時候健壯多了。

http://jsbin.com/IMEhowO/2/embed?js,console

銷燬一個監聽器

當註冊一個監聽器的時候，通常都須要讓它一直存在於整個做用域的生命週期，因此不多會要顯式把它移除。也有些場景下，須要保持做用域的存在，但要把某個監聽器去掉。

Angular中的$watch函數是有返回值的，它是個函數，若是執行，就把剛註冊的這個監聽器銷燬。想在咱們這個版本里實現這功能，只要返回一個函數在裏面把這個監控器從$$watchers數組去除就能夠了：

Scope.prototype.$watch = function(watchFn, listenerFn, valueEq) { var self = this; var watcher = { watchFn: watchFn, listenerFn: listenerFn, valueEq: !!valueEq }; self.$$watchers.push(watcher); return function() { var index = self.$$watchers.indexOf(watcher); if (index >= 0) { self.$$watchers.splice(index, 1); } }; };