對(duì)于一個(gè)在前端屬于純新手的我來(lái)說(shuō)，Javascript都還是一知半解，要想直接上手angular JS，遇到的阻力還真是不少。不過(guò)我相信，只要下功夫，即使是反人類的設(shè)計(jì)也不是什么大的問(wèn)題。
Okay，廢話不多說(shuō)。為了弄明白angular JS為何物，我先是從Scope開(kāi)始。那么什么是Scope呢？借用官方文檔的一段話：
“scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.”
看完后，類比到其他的編程語(yǔ)言上，感覺(jué)Scope就像是Data Model的作用域一樣，為Expressions的執(zhí)行提供上下文，暫且先這么理解吧。
Scope的特性
接下來(lái)，看看Scope有哪些特性呢？
Scope提供$watch方法監(jiān)視Model的變化。
Scope提供$apply方法傳播Model的變化。
Scope可以繼承，用來(lái)隔離不同的application components和屬性訪問(wèn)權(quán)限。
Scope為Expressions的計(jì)算提供上下文。
對(duì)于這四點(diǎn)特性，因?yàn)槲抑皩W(xué)習(xí)過(guò)ActionScript、C++、Java，所以第一、三、四點(diǎn)不難理解，唯獨(dú)第二點(diǎn)感覺(jué)有點(diǎn)云里霧里。本著打破沙鍋問(wèn)到底的原則，我還是通過(guò)Google搜到了一些東西。對(duì)于有經(jīng)驗(yàn)的老手，板磚請(qǐng)輕拍！
源起Javascript
首先，乍一看，scope.apply()似乎就是一個(gè)使得bindings得到更新的普普通通的方法。但稍微多想一點(diǎn)，為什么我們需要它？一般在什么時(shí)候用它呢？用弄明白這兩個(gè)問(wèn)題，還得從Javascript說(shuō)起。在Javascript代碼里，都是按照一定順序來(lái)執(zhí)行的，當(dāng)輪到一個(gè)代碼片段執(zhí)行的時(shí)候，瀏覽器就只會(huì)去執(zhí)行當(dāng)前的片段，不會(huì)做任何其他的事情。所以有時(shí)候一些做得不是很好的網(wǎng)頁(yè)，當(dāng)點(diǎn)擊了某個(gè)東西之后會(huì)卡住，Javascript的工作方式就是會(huì)導(dǎo)致這一現(xiàn)象原因之一！下面我們有一段代碼來(lái)感受一下：
var button = document.getElementById('clickMe');
function buttonClicked () {
alert('the button was clicked');
}
button.addEventListener('click', buttonClicked);
function timerComplete () {
alert('timer complete');
}
setTimeout(timerComplete, 5000);
當(dāng)加載Javascript代碼時(shí)，先先找一個(gè)一個(gè)id叫“clickMe”的按鈕，然后添加一個(gè)監(jiān)聽(tīng)器，然后設(shè)置超時(shí)。等待5秒，會(huì)彈出一個(gè)對(duì)話框。如果刷新頁(yè)面并立即點(diǎn)擊clickMe按鈕，會(huì)彈出一個(gè)對(duì)話框，如果你不點(diǎn)擊OK，timerComplete函數(shù)永遠(yuǎn)沒(méi)有機(jī)會(huì)執(zhí)行。
如何更新bindings
好了，扯了一些看似不相關(guān)的東西之后，我們回歸正題。angular JS是怎么知道什么時(shí)候數(shù)據(jù)的變化和頁(yè)面需要更新的呢？代碼需要知道什么時(shí)候數(shù)據(jù)被修改了，但是現(xiàn)在又沒(méi)有一種方法直接去通知說(shuō)某個(gè)對(duì)象上的數(shù)據(jù)變了（盡管ECMAScript 5正在嘗試解決這一問(wèn)題，但也還是處于實(shí)驗(yàn)階段）。而目前比較主流的策略有以下有兩種解決方案。一種是需要用特殊的對(duì)象，讓所有的數(shù)據(jù)都只能通過(guò)調(diào)用對(duì)象的方法設(shè)置，而不是直接通過(guò)property指定。這樣的話，所有的修改就可以被記錄下來(lái)了，就知道什么時(shí)候頁(yè)面需要更新了。這樣做的弊端就是我們必須去繼承一個(gè)特殊的對(duì)象。對(duì)于賦值也只能通過(guò)object.set('key', 'value')而不是object.key=value的方式。在框架中，像EmberJS和KnockoutJS就是這么干的（雖然我都沒(méi)接觸過(guò)——囧）。另一種就是angular JS采用的方式，在每一次Javascript代碼執(zhí)行序列執(zhí)行結(jié)束后都去檢查是否有數(shù)據(jù)的改變。這看起來(lái)似乎并不高效，甚至嚴(yán)重影響性能。但是angular JS采用了一些比較巧妙的手段解決了這個(gè)問(wèn)題（還沒(méi)研究過(guò)，目前尚不明確）。這么做的好處就是，我們可以隨便使用任意對(duì)象，對(duì)于賦值方式也沒(méi)有限制，而且對(duì)于數(shù)據(jù)的改變也能覺(jué)察到。
對(duì)于angular JS采取的這種解決方案，我們關(guān)心的是什么時(shí)候數(shù)據(jù)發(fā)生了變化，而這也正是scope.apply()派上用場(chǎng)的地方。對(duì)于檢查綁定的數(shù)據(jù)到底有沒(méi)有發(fā)生變化，實(shí)際上是由scope.digest()完成的，但是我們幾乎從來(lái)就沒(méi)有直接調(diào)用過(guò)這個(gè)方法，而是調(diào)用scope.apply()方法，是因?yàn)樵趕cope.apply()方法里面，它會(huì)去調(diào)用scope.digest()方法。scope.apply()方法帶一個(gè)函數(shù)或者一個(gè)表達(dá)式，然后執(zhí)行它，最后調(diào)用scope.digest()方法去更新bindings或者watchers。
什么時(shí)候用$apply()
還是那個(gè)問(wèn)題，那我們到底什么時(shí)候需要去調(diào)用apply()方法呢？情況非常少，實(shí)際上幾乎我們所有的代碼都包在scope.apply()里面，像ng−click，controller的初始化，http的回調(diào)函數(shù)等。在這些情況下，我們不需要自己調(diào)用，實(shí)際上我們也不能自己調(diào)用，否則在apply()方法里面再調(diào)用apply()方法會(huì)拋出錯(cuò)誤。如果我們需要在一個(gè)新的執(zhí)行序列中運(yùn)行代碼時(shí)才真正需要用到它，而且當(dāng)且僅當(dāng)這個(gè)新的執(zhí)行序列不是被angular JS的庫(kù)的方法創(chuàng)建的，這個(gè)時(shí)候我們需要將代碼用scope.apply()包起來(lái)。下面用一個(gè)例子解釋：
<div ng:app ng-controller="Ctrl">{{message}}</div>
functionCtrl($scope) {
$scope.message ="Waiting 2000ms for update";
setTimeout(function () {
$scope.message ="Timeout called!";
// AngularJS unaware of update to $scope
}, 2000);
}
上面的代碼執(zhí)行后頁(yè)面上會(huì)顯示：Waiting 2000ms for update。顯然數(shù)據(jù)的更新沒(méi)有被angular JS覺(jué)察到。
接下來(lái)，我們將Javascript的代碼稍作修改，用scope.apply()包起來(lái)。
functionCtrl($scope) {
$scope.message ="Waiting 2000ms for update";
setTimeout(function () {
$scope.$apply(function () {
$scope.message ="Timeout called!";
});
}, 2000);
}
這次與之前不同的是，頁(yè)面上先會(huì)顯示：Waiting 2000ms for update，等待2秒后內(nèi)容會(huì)被更改為：Timeout called! 。顯然數(shù)據(jù)的更新被angular JS覺(jué)察到了。
NOTE：我們不應(yīng)該這樣做，而是用angular JS提供的timeout方法，這樣它就會(huì)被自動(dòng)用apply方法包起來(lái)了。
科學(xué)是把雙刃劍
最后，我們?cè)賮?lái)瞅一眼scope.apply()和scope.apply(function)方法吧！雖然angular JS為我們做了很多事情，但是我們也因此丟失了一些機(jī)會(huì)。從下面的偽代碼一看便知：
function$apply(expr) {
try {
return$eval(expr);
} catch(e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
它會(huì)捕獲所有的異常并且不會(huì)再拋出來(lái)，最后都會(huì)調(diào)用$digest()方法。
總結(jié)一下
$apply()方法可以在angular框架之外執(zhí)行angular JS的表達(dá)式，例如：DOM事件、setTimeout、XHR或其他第三方的庫(kù)。這僅僅是個(gè)開(kāi)始，水還有很深，歡迎大家一起來(lái)deep dive！
