這篇文章主要介紹了Angularjs中如何實(shí)現(xiàn)臟值檢測，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),宛城企業(yè)網(wǎng)站建設(shè),宛城品牌網(wǎng)站建設(shè),網(wǎng)站定制,宛城網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,宛城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

構(gòu)建自己的AngularJS，第一部分：Scope和Digest

Angular是一個(gè)成熟和強(qiáng)大的JavaScript框架。它也是一個(gè)比較龐大的框架，在熟練掌握之前，需要領(lǐng)會(huì)它提出的很多新概念。很多Web開發(fā)人員涌向Angular，有不少人面臨同樣的障礙。Digest到底是怎么做的？定義一個(gè)指令（directive）有哪些不同的方法？Service和provider有什么區(qū)別？

Angular的文檔挺不錯(cuò)的，第三方的資源也越來越豐富，想要學(xué)習(xí)一門新的技術(shù)，沒什么方法比把它拆開研究其運(yùn)作機(jī)制更好。

在這個(gè)系列的文章中，我將從無到有構(gòu)建AngularJS的一個(gè)實(shí)現(xiàn)。隨著逐步深入的講解，讀者將能對(duì)Angular的運(yùn)作機(jī)制有一個(gè)深入的認(rèn)識(shí)。

在第一部分中，讀者將看到Angular的作用域是如何運(yùn)作的，還有比如$eval, $digest, $apply這些東西怎么實(shí)現(xiàn)。Angular的臟檢查邏輯看上去有些不可思議，但你將看到實(shí)際并非如此。

基礎(chǔ)知識(shí)

在Github上，可以看到這個(gè)項(xiàng)目的全部源碼。相比只復(fù)制一份下來，我更建議讀者從無到有構(gòu)建自己的實(shí)現(xiàn)，從不同角度探索代碼的每個(gè)步驟。在本文中，我嵌入了JSBin的一些代碼，可以直接在文章中進(jìn)行一些互動(dòng)。（譯者注：因?yàn)槲以趃ithub上翻譯，沒法集成JSBin了，只能給鏈接……）

我們將使用Lo-Dash庫來處理一些在數(shù)組和對(duì)象上的底層操作。Angular自身并未使用Lo-Dash，但是從我們的目的看，要盡量無視這些不太相關(guān)的比較底層的事情。當(dāng)讀者在代碼中看到下劃線（_）的時(shí)候，那就是在調(diào)用Lo-Dash的功能。

我們還將使用console.assert函數(shù)做一些特別的測試。這個(gè)函數(shù)應(yīng)該適用于所有現(xiàn)代JavaScript環(huán)境。

下面是使用Lo-Dash和assert函數(shù)的示例：

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

Scope對(duì)象

Angular的Scope對(duì)象是POJO（簡單的JavaScript對(duì)象），在它們上面，可以像對(duì)其他對(duì)象一樣添加屬性。Scope對(duì)象是用構(gòu)造函數(shù)創(chuàng)建的，我們來寫個(gè)最簡單的版本：

function Scope() {
}

現(xiàn)在我們就可以使用new操作符來創(chuàng)建一個(gè)Scope對(duì)象了。我們也可以在它上面附加一些屬性：

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

這些屬性沒什么特別的。不需要調(diào)用特別的設(shè)置器（setter），賦值的時(shí)候也沒什么限制。相反，在兩個(gè)特別的函數(shù)：$watch和$digest之中發(fā)生了一些奇妙的事情。

監(jiān)控對(duì)象屬性：$watch和$digest

$watch和$digest是相輔相成的。兩者一起，構(gòu)成了Angular作用域的核心：數(shù)據(jù)變化的響應(yīng)。

使用$watch，可以在Scope上添加一個(gè)監(jiān)聽器。當(dāng)Scope上發(fā)生變更時(shí)，監(jiān)聽器會(huì)收到提示。給$watch指定如下兩個(gè)函數(shù)，就可以創(chuàng)建一個(gè)監(jiān)聽器：

• 一個(gè)監(jiān)控函數(shù)，用于指定所關(guān)注的那部分?jǐn)?shù)據(jù)。

• 一個(gè)監(jiān)聽函數(shù)，用于在數(shù)據(jù)變更的時(shí)候接受提示。

作為一名Angular用戶，一般來說，是監(jiān)控一個(gè)表達(dá)式，而不是使用監(jiān)控函數(shù)。監(jiān)控表達(dá)式是一個(gè)字符串，比如說“user.firstName”，通常在數(shù)據(jù)綁定，指令的屬性，或者JavaScript代碼中指定，它被Angular解析和編譯成一個(gè)監(jiān)控函數(shù)。在這篇文章的后面部分我們會(huì)探討這是如何做的。在這篇文章中，我們將使用稍微低級(jí)的方法直接提供監(jiān)控功能。

為了實(shí)現(xiàn)$watch，我們需要存儲(chǔ)注冊(cè)過的所有監(jiān)聽器。我們?cè)赟cope構(gòu)造函數(shù)上添加一個(gè)數(shù)組：

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

在Angular框架中，雙美元符前綴$$表示這個(gè)變量被當(dāng)作私有的來考慮，不應(yīng)當(dāng)在外部代碼中調(diào)用。

現(xiàn)在我們可以定義$watch方法了。它接受兩個(gè)函數(shù)作參數(shù)，把它們存儲(chǔ)在$$watchers數(shù)組中。我們需要在每個(gè)Scope實(shí)例上存儲(chǔ)這些函數(shù)，所以要把它放在Scope的原型上：

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

另外一面就是$digest函數(shù)。它執(zhí)行了所有在作用域上注冊(cè)過的監(jiān)聽器。我們來實(shí)現(xiàn)一個(gè)它的簡化版，遍歷所有監(jiān)聽器，調(diào)用它們的監(jiān)聽函數(shù)：

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

現(xiàn)在我們可以添加監(jiān)聽器，然后運(yùn)行$digest了，這將會(huì)調(diào)用監(jiān)聽函數(shù)：

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

這些本身沒什么大用，我們要的是能檢測由監(jiān)控函數(shù)指定的值是否確實(shí)變更了，然后調(diào)用監(jiān)聽函數(shù)。

臟值檢測

如同上文所述，監(jiān)聽器的監(jiān)聽函數(shù)應(yīng)當(dāng)返回我們所關(guān)注的那部分?jǐn)?shù)據(jù)的變化，通常，這部分?jǐn)?shù)據(jù)就存在于作用域中。為了使得訪問作用域更便利，在調(diào)用監(jiān)控函數(shù)的時(shí)候，使用當(dāng)前作用域作為實(shí)參。一個(gè)關(guān)注作用域上fiestName屬性的監(jiān)聽器像這個(gè)樣子：

function(scope) {
 return scope.firstName;
}

這是監(jiān)控函數(shù)的一般形式：從作用域獲取一些值，然后返回。

$digest函數(shù)的作用是調(diào)用這個(gè)監(jiān)控函數(shù)，并且比較它返回的值和上一次返回值的差異。如果不相同，監(jiān)聽器就是臟的，它的監(jiān)聽函數(shù)就應(yīng)當(dāng)被調(diào)用。

想要這么做，$digest需要記住每個(gè)監(jiān)控函數(shù)上次返回的值。既然我們現(xiàn)在已經(jīng)為每個(gè)監(jiān)聽器創(chuàng)建過一個(gè)對(duì)象，只要把上一次的值存在這上面就行了。下面是檢測每個(gè)監(jiān)控函數(shù)值變更的$digest新實(shí)現(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;
 }); 
};

對(duì)每個(gè)監(jiān)聽器，我們調(diào)用監(jiān)控函數(shù)，把作用域自身當(dāng)作實(shí)參傳遞進(jìn)去，然后比較這個(gè)返回值和上次返回值，如果不同，就調(diào)用監(jiān)聽函數(shù)。方便起見，我們把新舊值和作用域都當(dāng)作參數(shù)傳遞給監(jiān)聽函數(shù)。最終，我們把監(jiān)聽器的last屬性設(shè)置成新返回的值，下一次可以用它來作比較。

有了這個(gè)實(shí)現(xiàn)之后，我們就可以看到在$digest調(diào)用的時(shí)候，監(jiān)聽函數(shù)是怎么執(zhí)行的：

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

我們已經(jīng)實(shí)現(xiàn)了Angular作用域的本質(zhì)：添加監(jiān)聽器，在digest里運(yùn)行它們。

也已經(jīng)可以看到幾個(gè)關(guān)于Angular作用域的重要性能特性：

• 在作用域上添加數(shù)據(jù)本身并不會(huì)有性能折扣。如果沒有監(jiān)聽器在監(jiān)控某個(gè)屬性，它在不在作用域上都無所謂。Angular并不會(huì)遍歷作用域的屬性，它遍歷的是監(jiān)聽器。

• $digest里會(huì)調(diào)用每個(gè)監(jiān)控函數(shù)，因此，最好關(guān)注監(jiān)聽器的數(shù)量，還有每個(gè)獨(dú)立的監(jiān)控函數(shù)或者表達(dá)式的性能。

在Digest的時(shí)候獲得提示

如果你想在每次Angular的作用域被digest的時(shí)候得到通知，可以利用每次digest的時(shí)候挨個(gè)執(zhí)行監(jiān)聽器這個(gè)事情，只要注冊(cè)一個(gè)沒有監(jiān)聽函數(shù)的監(jiān)聽器就可以了。

想要支持這個(gè)用例，我們需要在$watch里面檢測是否監(jiān)控函數(shù)被省略了，如果是這樣，用個(gè)空函數(shù)來代替它：

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

如果用了這個(gè)模式，需要記住，即使沒有l(wèi)istenerFn，Angular也會(huì)尋找watchFn的返回值。如果返回了一個(gè)值，這個(gè)值會(huì)提交給臟檢查。想要采用這個(gè)用法又想避免多余的事情，只要監(jiān)控函數(shù)不返回任何值就行了。在這個(gè)例子里，監(jiān)聽器的值始終會(huì)是未定義的。

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

這個(gè)實(shí)現(xiàn)的核心就這樣，但是離最終的還是差太遠(yuǎn)了。比如說有個(gè)很典型的場景我們不能支持：監(jiān)聽函數(shù)自身也修改作用域上的屬性。如果這個(gè)發(fā)生了，另外有個(gè)監(jiān)聽器在監(jiān)控被修改的屬性，有可能在同一個(gè)digest里面檢測不到這個(gè)變動(dòng)：

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

我們來修復(fù)這個(gè)問題。

當(dāng)數(shù)據(jù)臟的時(shí)候持續(xù)Digest

我們需要改變一下digest，讓它持續(xù)遍歷所有監(jiān)聽器，直到監(jiān)控的值停止變更。

首先，我們把現(xiàn)在的$digest函數(shù)改名為$$digestOnce，它把所有的監(jiān)聽器運(yùn)行一次，返回一個(gè)布爾值，表示是否還有變更了：

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，它作為一個(gè)“外層循環(huán)”來運(yùn)行，當(dāng)有變更發(fā)生的時(shí)候，調(diào)用$$digestOnce：

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

$digest現(xiàn)在至少運(yùn)行每個(gè)監(jiān)聽器一次了。如果第一次運(yùn)行完，有監(jiān)控值發(fā)生變更了，標(biāo)記為dirty，所有監(jiān)聽器再運(yùn)行第二次。這會(huì)一直運(yùn)行，直到所有監(jiān)控的值都不再變化，整個(gè)局面穩(wěn)定下來了。

Angular作用域里并不是真的有個(gè)函數(shù)叫做$$digestOnce，相反，digest循環(huán)都是包含在$digest里的。我們的目標(biāo)更多是清晰度而不是性能，所以把內(nèi)層循環(huán)封裝成了一個(gè)函數(shù)。

下面是新的實(shí)現(xiàn)：

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

我們現(xiàn)在可以對(duì)Angular的監(jiān)聽器有另外一個(gè)重要認(rèn)識(shí)：它們可能在單次digest里面被執(zhí)行多次。這也就是為什么人們經(jīng)常說，監(jiān)聽器應(yīng)當(dāng)是冪等的：一個(gè)監(jiān)聽器應(yīng)當(dāng)沒有邊界效應(yīng)，或者邊界效應(yīng)只應(yīng)當(dāng)發(fā)生有限次。比如說，假設(shè)一個(gè)監(jiān)控函數(shù)觸發(fā)了一個(gè)Ajax請(qǐng)求，無法確定你的應(yīng)用程序發(fā)了多少個(gè)請(qǐng)求。

在我們現(xiàn)在的實(shí)現(xiàn)中，有一個(gè)明顯的遺漏：如果兩個(gè)監(jiān)聽器互相監(jiān)控了對(duì)方產(chǎn)生的變更，會(huì)怎樣？也就是說，如果狀態(tài)始終不會(huì)穩(wěn)定？這種情況展示在下面的代碼里。在這個(gè)例子里，$digest調(diào)用被注釋掉了，把注釋去掉看看發(fā)生什么情況：

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

JSBin執(zhí)行了一段時(shí)間之后就停止了（在我機(jī)器上大概跑了100,000次左右）。如果你在別的東西比如Node.js里跑，它會(huì)一直運(yùn)行下去。

放棄不穩(wěn)定的digest

我們要做的事情是，把digest的運(yùn)行控制在一個(gè)可接受的迭代數(shù)量內(nèi)。如果這么多次之后，作用域還在變更，就勇敢放手，宣布它永遠(yuǎn)不會(huì)穩(wěn)定。在這個(gè)點(diǎn)上，我們會(huì)拋出一個(gè)異常，因?yàn)椴还茏饔糜虻臓顟B(tài)變成怎樣，它都不太可能是用戶想要的結(jié)果。

迭代的大值稱為TTL（short for Time To Live）。這個(gè)值默認(rèn)是10，可能有點(diǎn)?。ㄎ覀儎傔\(yùn)行了這個(gè)digest 100,000次?。?，但是記住這是一個(gè)性能敏感的地方，因?yàn)閐igest經(jīng)常被執(zhí)行，而且每個(gè)digest運(yùn)行了所有的監(jiān)聽器。用戶也不太可能創(chuàng)建10個(gè)以上鏈狀的監(jiān)聽器。

事實(shí)上，Angular里面的TTL是可以調(diào)整的。我們將在后續(xù)文章討論provider和依賴注入的時(shí)候再回顧這個(gè)話題。

我們繼續(xù)，給外層digest循環(huán)添加一個(gè)循環(huán)計(jì)數(shù)器。如果達(dá)到了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)控例子拋出異常：

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

這些應(yīng)當(dāng)已經(jīng)把digest的事情說清楚了。

現(xiàn)在，我們把注意力轉(zhuǎn)到如何檢測變更上吧。

基于值的臟檢查

我們?cè)?jīng)使用嚴(yán)格等于操作符(===)來比較新舊值，在絕大多數(shù)情況下，它是不錯(cuò)的，比如所有的基本類型（數(shù)字，字符串等等），也可以檢測一個(gè)對(duì)象或者數(shù)組是否變成新的了，但Angular還有一種辦法來檢測變更，用于檢測當(dāng)對(duì)象或者數(shù)組內(nèi)部產(chǎn)生變更的時(shí)候。那就是：可以監(jiān)控值的變更，而不是引用。

這類臟檢查需要給$watch函數(shù)傳入第三個(gè)布爾類型的可選參數(shù)當(dāng)標(biāo)志來開啟。當(dāng)這個(gè)標(biāo)志為真的時(shí)候，基于值的檢查開啟。我們來重新定義$watch，接受這個(gè)參數(shù)，并且把它存在監(jiān)聽器里：

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

我們所做的一切是把這個(gè)標(biāo)志加在監(jiān)聽器上，通過兩次取反，強(qiáng)制轉(zhuǎn)換為布爾類型。當(dāng)用戶調(diào)用$watch，沒傳入第三個(gè)參數(shù)的時(shí)候，valueEq會(huì)是未定義的，在監(jiān)聽器對(duì)象里就變成了false。

基于值的臟檢查意味著如果新舊值是對(duì)象或者數(shù)組，我們必須遍歷其中包含的所有內(nèi)容。如果它們之間有任何差異，監(jiān)聽器就臟了。如果該值包含嵌套的對(duì)象或者數(shù)組，它也會(huì)遞歸地按值比較。

Angular內(nèi)置了自己的相等檢測函數(shù)，但是我們會(huì)用Lo-Dash提供的那個(gè)。讓我們定義一個(gè)新函數(shù)，取兩個(gè)值和一個(gè)布爾標(biāo)志，并比較相應(yīng)的值：

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

為了提示值的變化，我們也需要改變之前在每個(gè)監(jiān)聽器上存儲(chǔ)舊值的方式。只存儲(chǔ)當(dāng)前值的引用是不夠的，因?yàn)樵谶@個(gè)值內(nèi)部發(fā)生的變更也會(huì)生效到它的引用上，$$areEqual方法比較同一個(gè)值的兩個(gè)引用始終為真，監(jiān)控不到變化，因此，我們需要建立當(dāng)前值的深拷貝，并且把它們儲(chǔ)存起來。

就像相等檢測一樣，Angular也內(nèi)置了自己的深拷貝函數(shù)，但我們還是用Lo-Dash提供的。我們修改一下$digestOnce，在內(nèi)部使用新的$$areEqual函數(shù)，如果需要的話，也復(fù)制最后一次的引用：

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)在我們可以看到兩種臟檢測方式的差異：

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

相比檢查引用，檢查值的方式顯然是一個(gè)更為復(fù)雜的操作。遍歷嵌套的數(shù)據(jù)結(jié)構(gòu)很花時(shí)間，保持深拷貝的數(shù)據(jù)也占用不少內(nèi)存。這就是Angular默認(rèn)不使用基于值的臟檢測的原因，用戶需要顯式設(shè)置這個(gè)標(biāo)記去打開它。

Angular也提供了第三種臟檢測的方法：集合監(jiān)控。就像基于值的檢測，也能提示對(duì)象和數(shù)組中的變更。但不同于基于值的檢測方式，它做的是一個(gè)比較淺的檢測，并不遞歸進(jìn)入到深層去，所以它比基于值的檢測效率更高。集合檢測是通過“$watchCollection”函數(shù)來使用的，在這個(gè)系列的后續(xù)部分，我們會(huì)來看看它是如何實(shí)現(xiàn)的。

在我們完成值的比對(duì)之前，還有些JavaScript怪事要處理一下。

非數(shù)字（NaN）

在JavaScript里，NaN（Not-a-Number）并不等于自身，這個(gè)聽起來有點(diǎn)怪，但確實(shí)就這樣。如果我們?cè)谂K檢測函數(shù)里不顯式處理NaN，一個(gè)值為NaN的監(jiān)聽器會(huì)一直是臟的。

對(duì)于基于值的臟檢測來說，這個(gè)事情已經(jīng)被Lo-Dash的isEqual函數(shù)處理掉了。對(duì)于基于引用的臟檢測來說，我們需要自己處理。來修改一下$$areEqual函數(shù)的代碼：

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)聽器也正常了：

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

基于值的檢測實(shí)現(xiàn)好了，現(xiàn)在我們?cè)摪炎⒁饬械綉?yīng)用程序代碼如何跟作用域打交道上了。

$eval - 在作用域的上下文上執(zhí)行代碼

在Angular中，有幾種方式可以在作用域的上下文上執(zhí)行代碼，最簡單的一種就是$eval。它使用一個(gè)函數(shù)作參數(shù)，所做的事情是立即執(zhí)行這個(gè)傳入的函數(shù)，并且把作用域自身當(dāng)作參數(shù)傳遞給它，返回的是這個(gè)函數(shù)的返回值。$eval也可以有第二個(gè)參數(shù)，它所做的僅僅是把這個(gè)參數(shù)傳遞給這個(gè)函數(shù)。

$eval的實(shí)現(xiàn)很簡單：

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

$eval的使用一樣很簡單：

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

那么，為什么要用這么一種明顯很多余的方式去執(zhí)行一個(gè)函數(shù)呢？有人覺得，有些代碼是專門與作用域的內(nèi)容打交道的，$eval讓這一切更加明顯。$scope也是構(gòu)建$apply的一個(gè)部分，后面我們就來講它。

然后，可能$eval最有意思的用法是當(dāng)我們不傳入函數(shù)，而是表達(dá)式。就像$watch一樣，可以給$eval一個(gè)字符串表達(dá)式，它會(huì)把這個(gè)表達(dá)式編譯，然后在作用域的上下文中執(zhí)行。我們將在這個(gè)系列的后面部分實(shí)現(xiàn)這些。

$apply - 集成外部代碼與digest循環(huán)

可能Scope上所有函數(shù)里最有名的就是$apply了。它被譽(yù)為將外部庫集成到Angular的最標(biāo)準(zhǔn)的方式，這話有個(gè)不錯(cuò)的理由。

$apply使用函數(shù)作參數(shù)，它用$eval執(zhí)行這個(gè)函數(shù)，然后通過$digest觸發(fā)digest循環(huán)。下面是一個(gè)簡單的實(shí)現(xiàn)：

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

$digest的調(diào)用放置于finally塊中，以確保即使函數(shù)拋出異常，也會(huì)執(zhí)行digest。

關(guān)于$apply，大的想法是，我們可以執(zhí)行一些與Angular無關(guān)的代碼，這些代碼也還是可以改變作用域上的東西，$apply可以保證作用域上的監(jiān)聽器可以檢測這些變更。當(dāng)人們談?wù)撌褂?apply集成代碼到“Angular生命周期”的時(shí)候，他們指的就是這個(gè)事情，也沒什么比這更重要的了。

這里是$apply的實(shí)踐：

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

延遲執(zhí)行 - $evalAsync

在JavaScript中，經(jīng)常會(huì)有把一段代碼“延遲”執(zhí)行的情況 - 把它的執(zhí)行延遲到當(dāng)前的執(zhí)行上下文結(jié)束之后的未來某個(gè)時(shí)間點(diǎn)。最常見的方式就是調(diào)用setTimeout()函數(shù)，傳遞一個(gè)0（或者非常小）作為延遲參數(shù)。

這種模式也適用于Angular程序，但更推薦的方式是使用$timeout服務(wù)，并且使用$apply把要延遲執(zhí)行的函數(shù)集成到digest生命周期。

但在Angular中還有一種延遲代碼的方式，那就是Scope上的$evalAsync函數(shù)。$evalAsync接受一個(gè)函數(shù)，把它列入計(jì)劃，在當(dāng)前正持續(xù)的digest中或者下一次digest之前執(zhí)行。舉例來說，你可以在一個(gè)監(jiān)聽器的監(jiān)聽函數(shù)中延遲執(zhí)行一些代碼，即使它已經(jīng)被延遲了，仍然會(huì)在現(xiàn)有的digest遍歷中被執(zhí)行。

我們首先需要的是存儲(chǔ)$evalAsync列入計(jì)劃的任務(wù)，可以在Scope構(gòu)造函數(shù)中初始化一個(gè)數(shù)組來做這事：

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

我們?cè)賮矶x$evalAsync，它添加將在這個(gè)隊(duì)列上執(zhí)行的函數(shù)：

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

我們顯式在放入隊(duì)列的對(duì)象上設(shè)置當(dāng)前作用域，是為了使用作用域的繼承，在這個(gè)系列的下一篇文章中，我們會(huì)討論這個(gè)。

然后，我們?cè)?digest中要做的第一件事就是從隊(duì)列中取出每個(gè)東西，然后使用$eval來觸發(fā)所有被延遲執(zhí)行的函數(shù)：

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);
};

這個(gè)實(shí)現(xiàn)保證了：如果當(dāng)作用域還是臟的，就想把一個(gè)函數(shù)延遲執(zhí)行，那這個(gè)函數(shù)會(huì)在稍后執(zhí)行，但還處于同一個(gè)digest中。

下面是關(guān)于如何使用$evalAsync的一個(gè)示例：

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

作用域階段

$evalAsync做的另外一件事情是：如果現(xiàn)在沒有其他的$digest在運(yùn)行的話，把給定的$digest延遲執(zhí)行。這意味著，無論什么時(shí)候調(diào)用$evalAsync，可以確定要延遲執(zhí)行的這個(gè)函數(shù)會(huì)“很快”被執(zhí)行，而不是等到其他什么東西來觸發(fā)一次digest。

需要有一種機(jī)制讓$evalAsync來檢測某個(gè)$digest是否已經(jīng)在運(yùn)行了，因?yàn)樗幌胗绊懙奖涣腥胗?jì)劃將要執(zhí)行的那個(gè)。為此，Angular的作用域?qū)崿F(xiàn)了一種叫做階段（phase）的東西，它就是作用域上一個(gè)簡單的字符串屬性，存儲(chǔ)了現(xiàn)在正在做的信息。

在Scope的構(gòu)造函數(shù)里，我們引入一個(gè)叫$$phase的字段，初始化為null：

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

然后，我們定義一些方法用于控制這個(gè)階段變量：一個(gè)用于設(shè)置，一個(gè)用于清除，也加個(gè)額外的檢測，以確保不會(huì)把已經(jīng)激活狀態(tài)的階段再設(shè)置一次：

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方法里，我們來從外層循環(huán)設(shè)置階段屬性為“$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也修改一下，在它里面也設(shè)置個(gè)跟自己一樣的階段。在調(diào)試的時(shí)候，這個(gè)會(huì)有些用：

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

最終，把對(duì)$digest的調(diào)度放進(jìn)$evalAsync。它會(huì)檢測作用域上現(xiàn)有的階段變量，如果沒有（也沒有已列入計(jì)劃的異步任務(wù)），就把這個(gè)digest列入計(jì)劃。

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});
};

有了這個(gè)實(shí)現(xiàn)之后，不管何時(shí)、何地，調(diào)用$evalAsync，都可以確定有一個(gè)digest會(huì)在不遠(yuǎn)的將來發(fā)生。

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

在digest之后執(zhí)行代碼 - $$postDigest

還有一種方式可以把代碼附加到digest循環(huán)中，那就是把一個(gè)$$postDigest函數(shù)列入計(jì)劃。

在Angular中，函數(shù)名字前面有雙美元符號(hào)表示它是一個(gè)內(nèi)部的東西，不是應(yīng)用開發(fā)人員應(yīng)該用的。但它確實(shí)存在，所以我們也要把它實(shí)現(xiàn)出來。

就像$evalAsync一樣，$$postDigest也能把一個(gè)函數(shù)列入計(jì)劃，讓它“以后”運(yùn)行。具體來說，這個(gè)函數(shù)將在下一次digest完成之后運(yùn)行。將一個(gè)$$postDigest函數(shù)列入計(jì)劃不會(huì)導(dǎo)致一個(gè)digest也被延后，所以這個(gè)函數(shù)的執(zhí)行會(huì)被推遲到直到某些其他原因引起一次digest。顧名思義，$$postDigest函數(shù)是在digest之后運(yùn)行的，如果你在$$digest里面修改了作用域，需要手動(dòng)調(diào)用$digest或者$apply，以確保這些變更生效。

首先，我們給Scope的構(gòu)造函數(shù)加隊(duì)列，這個(gè)隊(duì)列給$$postDigest函數(shù)用：

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

然后，我們把$$postDigest也加上去，它所做的就是把給定的函數(shù)加到隊(duì)列里：

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

最終，在$digest里，當(dāng)digest完成之后，就把隊(duì)列里面的函數(shù)都執(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()();
 }
};

下面是關(guān)于如何使用$$postDigest函數(shù)的：

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

異常處理

現(xiàn)有對(duì)Scope的實(shí)現(xiàn)已經(jīng)逐漸接近在Angular中實(shí)際的樣子了，但還有些脆弱，因?yàn)槲覀兤駷橹箾]有花精力在異常處理上。

Angular的作用域在遇到錯(cuò)誤的時(shí)候是非常健壯的：當(dāng)產(chǎn)生異常的時(shí)候，不管在監(jiān)控函數(shù)中，在$evalAsync函數(shù)中，還是在$$postDigest函數(shù)中，都不會(huì)把digest終止掉。我們現(xiàn)在的實(shí)現(xiàn)里，在以上任何地方產(chǎn)生異常都會(huì)把整個(gè)$digest弄掛。

我們可以很容易修復(fù)它，把上面三個(gè)調(diào)用包在try...catch中就好了。

Angular實(shí)際上是把這些異常拋給了它的$exceptionHandler服務(wù)。既然我們現(xiàn)在還沒有這東西，先扔到控制臺(tái)上吧。

$evalAsync和$$postDigest的異常處理是在$digest函數(shù)里，在這些場景里，從已列入計(jì)劃的程序中拋出的異常將被記錄成日志，它后面的還是正常運(yùn)行：

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)碰到異常的時(shí)候健壯多了。

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

銷毀一個(gè)監(jiān)聽器

當(dāng)注冊(cè)一個(gè)監(jiān)聽器的時(shí)候，一般都需要讓它一直存在于整個(gè)作用域的生命周期，所以很少會(huì)要顯式把它移除。也有些場景下，需要保持作用域的存在，但要把某個(gè)監(jiān)聽器去掉。

Angular中的$watch函數(shù)是有返回值的，它是個(gè)函數(shù)，如果執(zhí)行，就把剛注冊(cè)的這個(gè)監(jiān)聽器銷毀。想在我們這個(gè)版本里實(shí)現(xiàn)這功能，只要返回一個(gè)函數(shù)在里面把這個(gè)監(jiān)控器從$$watchers數(shù)組去除就可以了：

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的這個(gè)返回值存起來，以后調(diào)用它來移除這個(gè)監(jiān)聽器：

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

展望未來

我們已經(jīng)走了很長一段路了，已經(jīng)有了一個(gè)完美可以運(yùn)行的類似Angular這樣的臟檢測作用域系統(tǒng)的實(shí)現(xiàn)了，但是Angular的作用域上面還做了更多東西。

或許最重要的是，在Angular里，作用域并不是孤立的對(duì)象，作用域可以繼承于其他作用域，監(jiān)聽器也不僅僅是監(jiān)聽本作用域上的東西，還可以監(jiān)聽這個(gè)作用域的父級(jí)作用域。這種方法，概念上很簡單，但是對(duì)于初學(xué)者經(jīng)常容易造成混淆。所以，本系列的下一篇文章主題就是作用域的繼承。

后面我們會(huì)討論Angular的事件系統(tǒng)，也是實(shí)現(xiàn)在Scope上的。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angularjs中如何實(shí)現(xiàn)臟值檢測”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：Angularjs中如何實(shí)現(xiàn)臟值檢測-創(chuàng)新互聯(lián)
URL分享：http://jinyejixie.com/article24/dcjece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、虛擬主機(jī)、網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站制作、網(wǎng)站收錄、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)