建站
咨詢
售后
建站咨詢
新聞中心
Angular是一個成熟和強大的JavaScript框架。它也是一個比較龐大的框架，在熟練掌握之前，需要領會它提出的很多新概念。很多Web 開發(fā)人員涌向Angular，有不少人面臨同樣的障礙。Digest到底是怎么做的？定義一個指令（directive）有哪些不同的方 法？Service和provider有什么區(qū)別？
Angular的文檔挺不錯的，第三方的資源也越來越豐富，想要學習一門新的技術，沒什么方法比把它拆開研究其運作機制更好。
在這個系列的文章中，我將從無到有構建AngularJS的一個實現(xiàn)。隨著逐步深入的講解，讀者將能對Angular的運作機制有一個深入的認識。
在***部分中，讀者將看到Angular的作用域是如何運作的，還有比如$eval, $digest, $apply這些東西怎么實現(xiàn)。Angular的臟檢查邏輯看上去有些不可思議，但你將看到實際并非如此。
基礎知識
在Github上，可以看到這個項目的全部源碼。相比只復制一份下來，我更建議讀者從無到有構建自己的實現(xiàn)，從不同角度探索代碼的每個步驟。在本文 中，我嵌入了JSBin的一些代碼，可以直接在文章中進行一些互動。（譯者注：因為我在github上翻譯，沒法集成JSBin了，只能給鏈接……）
我們將使用Lo-Dash庫來處理一些在數組和對象上的底層操作。Angular自身并未使用Lo-Dash，但是從我們的目的看，要盡量無視這些不太相關的比較底層的事情。當讀者在代碼中看到下劃線（_）的時候，那就是在調用Lo-Dash的功能。
我們還將使用console.assert函數做一些特別的測試。這個函數應該適用于所有現(xiàn)代JavaScript環(huán)境。
下面是使用Lo-Dash和assert函數的示例：
Scope對象
Angular的Scope對象是POJO（簡單的JavaScript對象），在它們上面，可以像對其他對象一樣添加屬性。Scope對象是用構造函數創(chuàng)建的，我們來寫個最簡單的版本：
- function Scope() {
- }
現(xiàn)在我們就可以使用new操作符來創(chuàng)建一個Scope對象了。我們也可以在它上面附加一些屬性：
- var aScope = new Scope();
- aScope.firstName = 'Jane';
- aScope.lastName = 'Smith';
這些屬性沒什么特別的。不需要調用特別的設置器（setter），賦值的時候也沒什么限制。相反，在兩個特別的函數：$watch和$digest之中發(fā)生了一些奇妙的事情。
監(jiān)控對象屬性：$watch和$digest
$watch和$digest是相輔相成的。兩者一起，構成了Angular作用域的核心：數據變化的響應。
使用$watch，可以在Scope上添加一個監(jiān)聽器。當Scope上發(fā)生變更時，監(jiān)聽器會收到提示。給$watch指定如下兩個函數，就可以創(chuàng)建一個監(jiān)聽器：
- 一個監(jiān)控函數，用于指定所關注的那部分數據。
- 一個監(jiān)聽函數，用于在數據變更的時候接受提示。
作為一名Angular用戶，一般來說，是監(jiān)控一個表達式，而不是使用監(jiān)控函數。監(jiān)控表達式是一個字符串，比如說 “user.firstName”，通常在數據綁定，指令的屬性，或者JavaScript代碼中指定，它被Angular解析和編譯成一個監(jiān)控函數。在 這篇文章的后面部分我們會探討這是如何做的。在這篇文章中，我們將使用稍微低級的方法直接提供監(jiān)控功能。
為了實現(xiàn)$watch，我們需要存儲注冊過的所有監(jiān)聽器。我們在Scope構造函數上添加一個數組：
- function Scope() {
- this.$$watchers = [];
- }
在Angular框架中，雙美元符前綴$$表示這個變量被當作私有的來考慮，不應當在外部代碼中調用。
現(xiàn)在我們可以定義$watch方法了。它接受兩個函數作參數，把它們存儲在$$watchers數組中。我們需要在每個Scope實例上存儲這些函數，所以要把它放在Scope的原型上：
- Scope.prototype.$watch = function(watchFn, listenerFn) {
- var watcher = {
- watchFn: watchFn,
- listenerFn: listenerFn
- };
- this.$$watchers.push(watcher);
- };
另外一面就是$digest函數。它執(zhí)行了所有在作用域上注冊過的監(jiān)聽器。我們來實現(xiàn)一個它的簡化版，遍歷所有監(jiān)聽器，調用它們的監(jiān)聽函數：
- Scope.prototype.$digest = function() {
- _.forEach(this.$$watchers, function(watch) {
- watch.listenerFn();
- });
- };
現(xiàn)在我們可以添加監(jiān)聽器，然后運行$digest了，這將會調用監(jiān)聽函數：
這些本身沒什么大用，我們要的是能檢測由監(jiān)控函數指定的值是否確實變更了，然后調用監(jiān)聽函數。
臟值檢測
如同上文所述，監(jiān)聽器的監(jiān)聽函數應當返回我們所關注的那部分數據的變化，通常，這部分數據就存在于作用域中。為了使得訪問作用域更便利，在調用監(jiān)控函數的時候，使用當前作用域作為實參。一個關注作用域上fiestName屬性的監(jiān)聽器像這個樣子：
- function(scope) {
- return scope.firstName;
- }
#p#
這是監(jiān)控函數的一般形式：從作用域獲取一些值，然后返回。
$digest函數的作用是調用這個監(jiān)控函數，并且比較它返回的值和上一次返回值的差異。如果不相同，監(jiān)聽器就是臟的，它的監(jiān)聽函數就應當被調用。
想要這么做，$digest需要記住每個監(jiān)控函數上次返回的值。既然我們現(xiàn)在已經為每個監(jiān)聽器創(chuàng)建過一個對象，只要把上一次的值存在這上面就行了。下面是檢測每個監(jiān)控函數值變更的$digest新實現(xiàn)：
- 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;
- });
- };
對每個監(jiān)聽器，我們調用監(jiān)控函數，把作用域自身當作實參傳遞進去，然后比較這個返回值和上次返回值，如果不同，就調用監(jiān)聽函數。方便起見，我們把新舊值和作用域都當作參數傳遞給監(jiān)聽函數。最終，我們把監(jiān)聽器的last屬性設置成新返回的值，下一次可以用它來作比較。
有了這個實現(xiàn)之后，我們就可以看到在$digest調用的時候，監(jiān)聽函數是怎么執(zhí)行的：
我們已經實現(xiàn)了Angular作用域的本質：添加監(jiān)聽器，在digest里運行它們。
也已經可以看到幾個關于Angular作用域的重要性能特性：
- 在作用域上添加數據本身并不會有性能折扣。如果沒有監(jiān)聽器在監(jiān)控某個屬性，它在不在作用域上都無所謂。Angular并不會遍歷作用域的屬性，它遍歷的是監(jiān)聽器。
- $digest里會調用每個監(jiān)控函數，因此，***關注監(jiān)聽器的數量，還有每個獨立的監(jiān)控函數或者表達式的性能。
在Digest的時候獲得提示
如果你想在每次Angular的作用域被digest的時候得到通知，可以利用每次digest的時候挨個執(zhí)行監(jiān)聽器這個事情，只要注冊一個沒有監(jiān)聽函數的監(jiān)聽器就可以了。
想要支持這個用例，我們需要在$watch里面檢測是否監(jiān)控函數被省略了，如果是這樣，用個空函數來代替它：
- Scope.prototype.$watch = function(watchFn, listenerFn) {
- var watcher = {
- watchFn: watchFn,
- listenerFn: listenerFn || function() { }
- };
- this.$$watchers.push(watcher);
- };
如果用了這個模式，需要記住，即使沒有l(wèi)istenerFn，Angular也會尋找watchFn的返回值。如果返回了一個值，這個值會提交給臟檢查。想要采用這個用法又想避免多余的事情，只要監(jiān)控函數不返回任何值就行了。在這個例子里，監(jiān)聽器的值始終會是未定義的。
這個實現(xiàn)的核心就這樣，但是離最終的還是差太遠了。比如說有個很典型的場景我們不能支持：監(jiān)聽函數自身也修改作用域上的屬性。如果這個發(fā)生了，另外有個監(jiān)聽器在監(jiān)控被修改的屬性，有可能在同一個digest里面檢測不到這個變動：
我們來修復這個問題。
當數據臟的時候持續(xù)Digest
我們需要改變一下digest，讓它持續(xù)遍歷所有監(jiān)聽器，直到監(jiān)控的值停止變更。
首先，我們把現(xiàn)在的$digest函數改名為$$digestOnce，它把所有的監(jiān)聽器運行一次，返回一個布爾值，表示是否還有變更了：
- 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，它作為一個“外層循環(huán)”來運行，當有變更發(fā)生的時候，調用$$digestOnce：
- Scope.prototype.$digest = function() {
- var dirty;
- do {
- dirty = this.$$digestOnce();
- } while (dirty);
- };
$digest現(xiàn)在至少運行每個監(jiān)聽器一次了。如果***次運行完，有監(jiān)控值發(fā)生變更了，標記為dirty，所有監(jiān)聽器再運行第二次。這會一直運行，直到所有監(jiān)控的值都不再變化，整個局面穩(wěn)定下來了。
Angular作用域里并不是真的有個函數叫做$$digestOnce，相反，digest循環(huán)都是包含在$digest里的。我們的目標更多是清晰度而不是性能，所以把內層循環(huán)封裝成了一個函數。
下面是新的實現(xiàn)：
我們現(xiàn)在可以對Angular的監(jiān)聽器有另外一個重要認識：它們可能在單次digest里面被執(zhí)行多次。這也就是為什么人們經常說，監(jiān)聽器應當是冪 等的：一個監(jiān)聽器應當沒有邊界效應，或者邊界效應只應當發(fā)生有限次。比如說，假設一個監(jiān)控函數觸發(fā)了一個Ajax請求，無法確定你的應用程序發(fā)了多少個請 求。
在我們現(xiàn)在的實現(xiàn)中，有一個明顯的遺漏：如果兩個監(jiān)聽器互相監(jiān)控了對方產生的變更，會怎樣？也就是說，如果狀態(tài)始終不會穩(wěn)定？這種情況展示在下面的代碼里。在這個例子里，$digest調用被注釋掉了，把注釋去掉看看發(fā)生什么情況：
JSBin執(zhí)行了一段時間之后就停止了（在我機器上大概跑了100,000次左右）。如果你在別的東西比如Node.js里跑，它會一直運行下去。
#p#
放棄不穩(wěn)定的digest
我們要做的事情是，把digest的運行控制在一個可接受的迭代數量內。如果這么多次之后，作用域還在變更，就勇敢放手，宣布它永遠不會穩(wěn)定。在這個點上，我們會拋出一個異常，因為不管作用域的狀態(tài)變成怎樣，它都不太可能是用戶想要的結果。
迭代的***值稱為TTL（short for Time To Live）。這個值默認是10，可能有點?。ㄎ覀儎傔\行了這個digest 100,000次?。?，但是記住這是一個性能敏感的地方，因為digest經常被執(zhí)行，而且每個digest運行了所有的監(jiān)聽器。用戶也不太可能創(chuàng)建10 個以上鏈狀的監(jiān)聽器。
事實上，Angular里面的TTL是可以調整的。我們將在后續(xù)文章討論provider和依賴注入的時候再回顧這個話題。
我們繼續(xù)，給外層digest循環(huán)添加一個循環(huán)計數器。如果達到了TTL，就拋出異常：
- Scope.prototype.$digest = function() {
- var ttl = 10;
- var dirty;
- do {
- dirty = this.$$digestOnce();
- if (dirty && !(ttl--)) {
- throw "10 digest iterations reached";
- }
- } while (dirty);
- };
下面是更新過的版本，可以讓我們循環(huán)引用的監(jiān)控例子拋出異常：
這些應當已經把digest的事情說清楚了。
現(xiàn)在，我們把注意力轉到如何檢測變更上吧。
基于值的臟檢查
我們曾經使用嚴格等于操作符(===)來比較新舊值，在絕大多數情況下，它是不錯的，比如所有的基本類型（數字，字符串等等），也可以檢測一個對象 或者數組是否變成新的了，但Angular還有一種辦法來檢測變更，用于檢測當對象或者數組內部產生變更的時候。那就是：可以監(jiān)控值的變更，而不是引用。
這類臟檢查需要給$watch函數傳入第三個布爾類型的可選參數當標志來開啟。當這個標志為真的時候，基于值的檢查開啟。我們來重新定義$watch，接受這個參數，并且把它存在監(jiān)聽器里：
- Scope.prototype.$watch = function(watchFn, listenerFn, valueEq) {
- var watcher = {
- watchFn: watchFn,
- listenerFn: listenerFn,
- valueEq: !!valueEq
- };
- this.$$watchers.push(watcher);
- };
我們所做的一切是把這個標志加在監(jiān)聽器上，通過兩次取反，強制轉換為布爾類型。當用戶調用$watch，沒傳入第三個參數的時候，valueEq會是未定義的，在監(jiān)聽器對象里就變成了false。
基于值的臟檢查意味著如果新舊值是對象或者數組，我們必須遍歷其中包含的所有內容。如果它們之間有任何差異，監(jiān)聽器就臟了。如果該值包含嵌套的對象或者數組，它也會遞歸地按值比較。
Angular內置了自己的相等檢測函數，但是我們會用Lo-Dash提供的那個。讓我們定義一個新函數，取兩個值和一個布爾標志，并比較相應的值：
- Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) {
- if (valueEq) {
- return _.isEqual(newValue, oldValue);
- } else {
- return newValue === oldValue;
- }
- };
為了提示值的變化，我們也需要改變之前在每個監(jiān)聽器上存儲舊值的方式。只存儲當前值的引用是不夠的，因為在這個值內部發(fā)生的變更也會生效到它的引用 上，$$areEqual方法比較同一個值的兩個引用始終為真，監(jiān)控不到變化，因此，我們需要建立當前值的深拷貝，并且把它們儲存起來。
就像相等檢測一樣，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;
- };
現(xiàn)在我們可以看到兩種臟檢測方式的差異：
相比檢查引用，檢查值的方式顯然是一個更為復雜的操作。遍歷嵌套的數據結構很花時間，保持深拷貝的數據也占用不少內存。這就是Angular默認不使用基于值的臟檢測的原因，用戶需要顯式設置這個標記去打開它。
Angular也提供了第三種臟檢測的方法：集合監(jiān)控。就像基于值的檢測，也能提示對象和數組中的變更。但不同于基于值的 檢測方式，它做的是一個比較淺的檢測，并不遞歸進入到深層去，所以它比基于值的檢測效率更高。集合檢測是通過“$watchCollection”函數來 使用的，在這個系列的后續(xù)部分，我們會來看看它是如何實現(xiàn)的。
在我們完成值的比對之前，還有些JavaScript怪事要處理一下。
非數字（NaN）
在JavaScript里，NaN（Not-a-Number）并不等于自身，這個聽起來有點怪，但確實就這樣。如果我們在臟檢測函數里不顯式處理NaN，一個值為NaN的監(jiān)聽器會一直是臟的。
對于基于值的臟檢測來說，這個事情已經被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));
- }
- };
現(xiàn)在有NaN的監(jiān)聽器也正常了：
基于值的檢測實現(xiàn)好了，現(xiàn)在我們該把注意力集中到應用程序代碼如何跟作用域打交道上了。
#p#
$eval – 在作用域的上下文上執(zhí)行代碼
在Angular中，有幾種方式可以在作用域的上下文上執(zhí)行代碼，最簡單的一種就是$eval。它使用一個函數作參數，所做的事情是立即執(zhí)行這個傳 入的函數，并且把作用域自身當作參數傳遞給它，返回的是這個函數的返回值。$eval也可以有第二個參數，它所做的僅僅是把這個參數傳遞給這個函數。
$eval的實現(xiàn)很簡單：
- Scope.prototype.$eval = function(expr, locals) {
- return expr(this, locals);
- };
$eval的使用一樣很簡單：
那么，為什么要用這么一種明顯很多余的方式去執(zhí)行一個函數呢？有人覺得，有些代碼是專門與作用域的內容打交道的，$eval讓這一切更加明顯。$scope也是構建$apply的一個部分，后面我們就來講它。
然后，可能$eval最有意思的用法是當我們不傳入函數，而是表達式。就像$watch一樣，可以給$eval一個字符串表達式，它會把這個表達式編譯，然后在作用域的上下文中執(zhí)行。我們將在這個系列的后面部分實現(xiàn)這些。
$apply – 集成外部代碼與digest循環(huán)
可能Scope上所有函數里最有名的就是$apply了。它被譽為將外部庫集成到Angular的最標準的方式，這話有個不錯的理由。
$apply使用函數作參數，它用$eval執(zhí)行這個函數，然后通過$digest觸發(fā)digest循環(huán)。下面是一個簡單的實現(xiàn)：
- Scope.prototype.$apply = function(expr) {
- try {
- return this.$eval(expr);
- } finally {
- this.$digest();
- }
- };
$digest的調用放置于finally塊中，以確保即使函數拋出異常，也會執(zhí)行digest。
關于$apply，大的想法是，我們可以執(zhí)行一些與Angular無關的代碼，這些代碼也還是可以改變作用域上的東西，$apply可以保證作用域 上的監(jiān)聽器可以檢測這些變更。當人們談論使用$apply集成代碼到“Angular生命周期”的時候，他們指的就是這個事情，也沒什么比這更重要的了。
這里是$apply的實踐：
延遲執(zhí)行 – $evalAsync
在JavaScript中，經常會有把一段代碼“延遲”執(zhí)行的情況 – 把它的執(zhí)行延遲到當前的執(zhí)行上下文結束之后的未來某個時間點。最常見的方式就是調用setTimeout()函數，傳遞一個0（或者非常?。┳鳛檠舆t參數。
這種模式也適用于Angular程序，但更推薦的方式是使用$timeout服務，并且使用$apply把要延遲執(zhí)行的函數集成到digest生命周期。
但在Angular中還有一種延遲代碼的方式，那就是Scope上的$evalAsync函數。$evalAsync接受一個函數，把它列入計劃， 在當前正持續(xù)的digest中或者下一次digest之前執(zhí)行。舉例來說，你可以在一個監(jiān)聽器的監(jiān)聽函數中延遲執(zhí)行一些代碼，即使它已經被延遲了，仍然會 在現(xiàn)有的digest遍歷中被執(zhí)行。
我們首先需要的是存儲$evalAsync列入計劃的任務，可以在Scope構造函數中初始化一個數組來做這事：
- function Scope() {
- this.$$watchers = [];
- this.$$asyncQueue = [];
- }
我們再來定義$evalAsync，它添加將在這個隊列上執(zhí)行的函數：
- Scope.prototype.$evalAsync = function(expr) {
- this.$$asyncQueue.push({scope: this, expression: expr});
- };
我們顯式在放入隊列的對象上設置當前作用域，是為了使用作用域的繼承，在這個系列的下一篇文章中，我們會討論這個。
然后，我們在$digest中要做的***件事就是從隊列中取出每個東西，然后使用$eval來觸發(fā)所有被延遲執(zhí)行的函數：
- 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);
- };
這個實現(xiàn)保證了：如果當作用域還是臟的，就想把一個函數延遲執(zhí)行，那這個函數會在稍后執(zhí)行，但還處于同一個digest中。
下面是關于如何使用$evalAsync的一個示例：
#p#
作用域階段
$evalAsync做的另外一件事情是：如果現(xiàn)在沒有其他的$digest在運行的話，把給定的$digest延遲執(zhí)行。這意味著，無論什么時候調用$evalAsync，可以確定要延遲執(zhí)行的這個函數會“很快”被執(zhí)行，而不是等到其他什么東西來觸發(fā)一次digest。
需要有一種機制讓$evalAsync來檢測某個$digest是否已經在運行了，因為它不想影響到被列入計劃將要執(zhí)行的那個。為此，Angular的作用域實現(xiàn)了一種叫做階段（phase）的東西，它就是作用域上一個簡單的字符串屬性，存儲了現(xiàn)在正在做的信息。
在Scope的構造函數里，我們引入一個叫$$phase的字段，初始化為null：
- function Scope() {
- this.$$watchers = [];
- this.$$asyncQueue = [];
- this.$$phase = null;
- }
然后，我們定義一些方法用于控制這個階段變量：一個用于設置，一個用于清除，也加個額外的檢測，以確保不會把已經激活狀態(tài)的階段再設置一次：
- Scope.prototype.$beginPhase = function(phase) {
- if (this.$$phase) {
- throw this.$$phase + ' already in progress.';
- }
- this.$$phasephase = phase;
- };
- Scope.prototype.$clearPhase = function() {
- this.$$phase = null;
- };
在$digest方法里，我們來從外層循環(huán)設置階段屬性為“$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。它會檢測作用域上現(xiàn)有的階段變量，如果沒有（也沒有已列入計劃的異步任務），就把這個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});
- };
有了這個實現(xiàn)之后，不管何時、何地，調用$evalAsync，都可以確定有一個digest會在不遠的將來發(fā)生。
在digest之后執(zhí)行代碼 – $$postDigest
還有一種方式可以把代碼附加到digest循環(huán)中，那就是把一個$$postDigest函數列入計劃。
在Angular中，函數名字前面有雙美元符號表示它是一個內部的東西，不是應用開發(fā)人員應該用的。但它確實存在，所以我們也要把它實現(xiàn)出來。
就像$evalAsync一樣，$$postDigest也能把一個函數列入計劃，讓它“以后”運行。具體來說，這個函數將在下一次digest完 成之后運行。將一個$$postDigest函數列入計劃不會導致一個digest也被延后，所以這個函數的執(zhí)行會被推遲到直到某些其他原因引起一次 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完成之后，就把隊列里面的函數都執(zhí)行掉。
- 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函數的：
#p#
異常處理
現(xiàn)有對Scope的實現(xiàn)已經逐漸接近在Angular中實際的樣子了，但還有些脆弱，因為我們迄今為止沒有花精力在異常處理上。
Angular的作用域在遇到錯誤的時候是非常健壯的：當產生異常的時候，不管在監(jiān)控函數中，在$evalAsync函數中，還是在$$postDigest函數中，都不會把digest終止掉。我們現(xiàn)在的實現(xiàn)里，在以上任何地方產生異常都會把整個$digest弄掛。
我們可以很容易修復它，把上面三個調用包在try…catch中就好了。
Angular實際上是把這些異常拋給了它的$exceptionHandler服務。既然我們現(xiàn)在還沒有這東西，先扔到控制臺上吧。
$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);
- }
- }
- };
監(jiān)聽器的異常處理放在$$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;
- };
現(xiàn)在我們的digest循環(huán)碰到異常的時候健壯多了。
銷毀一個監(jiān)聽器
當注冊一個監(jiān)聽器的時候，一般都需要讓它一直存在于整個作用域的生命周期，所以很少會要顯式把它移除。也有些場景下，需要保持作用域的存在，但要把某個監(jiān)聽器去掉。
Angular中的$watch函數是有返回值的，它是個函數，如果執(zhí)行，就把剛注冊的這個監(jiān)聽器銷毀。想在我們這個版本里實現(xiàn)這功能，只要返回一個函數在里面把這個監(jiān)控器從$$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);
- }
- };
- };
現(xiàn)在我們就可以把$watch的這個返回值存起來，以后調用它來移除這個監(jiān)聽器：
展望未來
我們已經走了很長一段路了，已經有了一個***可以運行的類似Angular這樣的臟檢測作用域系統(tǒng)的實現(xiàn)了，但是Angular的作用域上面還做了更多東西。
或許最重要的是，在Angular里，作用域并不是孤立的對象，作用域可以繼承于其他作用域，監(jiān)聽器也不僅僅是監(jiān)聽本作用域上的東西，還可以監(jiān)聽這 個作用域的父級作用域。這種方法，概念上很簡單，但是對于初學者經常容易造成混淆。所以，本系列的下一篇文章主題就是作用域的繼承。
后面我們會討論Angular的事件系統(tǒng)，也是實現(xiàn)在Scope上的。
原文鏈接：http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html
譯文鏈接：http://www.ituring.com.cn/article/39865#
網站欄目：構建自己的AngularJS（1）：Scope和Digest
URL分享：http://m.5511xx.com/article/dhhdsij.html
