這幾天，根據buddy指定的任務，要分享一點angular JS的東西。對於一個在前端屬於純新手的我來說，Javascript都還是一知半解，要想直接上手angular JS，遇到的阻力還真是不少。不過我相信，隻要下功夫，即使是反人類的設計也不是什麼大的問題。
Okay，廢話不多說。為瞭弄明白angular JS為何物，我先是從Scope開始。那麼什麼是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.”
看完後，類比到其他的編程語言上，感覺Scope就像是Data Model的作用域一樣，為Expressions的執行提供上下文，暫且先這麼理解吧。
Scope的特性
接下來，看看Scope有哪些特性呢？
Scope提供$watch方法監視Model的變化。
Scope提供$apply方法傳播Model的變化。
Scope可以繼承，用來隔離不同的application components和屬性訪問權限。
Scope為Expressions的計算提供上下文。
對於這四點特性，因為我之前學習過ActionScript、C++、Java，所以第一、三、四點不難理解，唯獨第二點感覺有點雲裡霧裡。本著打破沙鍋問到底的原則，我還是通過Google搜到瞭一些東西。對於有經驗的老手，板磚請輕拍！
源起Javascript
首先，乍一看，$scope.$apply()似乎就是一個使得bindings得到更新的普普通通的方法。但稍微多想一點，為什麼我們需要它？一般在什麼時候用它呢？用弄明白這兩個問題，還得從Javascript說起。在Javascript代碼裡，都是按照一定順序來執行的，當輪到一個代碼片段執行的時候，瀏覽器就隻會去執行當前的片段，不會做任何其他的事情。所以有時候一些做得不是很好的網頁，當點擊瞭某個東西之後會卡住，Javascript的工作方式就是會導致這一現象原因之一！下面我們有一段代碼來感受一下：
復制代碼
var button = document.getElementById('clickMe');
function buttonClicked () {
alert('the button was clicked');
}
button.addEventListener('click', buttonClicked);
function timerComplete () {
alert('timer complete');
}
setTimeout(timerComplete, 5000);
復制代碼
當加載Javascript代碼時，先先找一個一個id叫“clickMe”的按鈕，然後添加一個監聽器，然後設置超時。等待5秒，會彈出一個對話框。如果刷新頁面並立即點擊clickMe按鈕，會彈出一個對話框，如果你不點擊OK，timerComplete函數永遠沒有機會執行。
如何更新bindings
好瞭，扯瞭一些看似不相關的東西之後，我們回歸正題。angular JS是怎麼知道什麼時候數據的變化和頁面需要更新的呢？代碼需要知道什麼時候數據被修改瞭，但是現在又沒有一種方法直接去通知說某個對象上的數據變瞭（盡管ECMAScript 5正在嘗試解決這一問題，但也還是處於實驗階段）。而目前比較主流的策略有以下有兩種解決方案。一種是需要用特殊的對象，讓所有的數據都隻能通過調用對象的方法設置，而不是直接通過property指定。這樣的話，所有的修改就可以被記錄下來瞭，就知道什麼時候頁面需要更新瞭。這樣做的弊端就是我們必須去繼承一個特殊的對象。對於賦值也隻能通過object.set('key', 'value')而不是object.key=value的方式。在框架中，像EmberJS和KnockoutJS就是這麼幹的（雖然我都沒接觸過——囧）。另一種就是angular JS采用的方式，在每一次Javascript代碼執行序列執行結束後都去檢查是否有數據的改變。這看起來似乎並不高效，甚至嚴重影響性能。但是angular JS采用瞭一些比較巧妙的手段解決瞭這個問題（還沒研究過，目前尚不明確）。這麼做的好處就是，我們可以隨便使用任意對象，對於賦值方式也沒有限制，而且對於數據的改變也能覺察到。
對於angular JS采取的這種解決方案，我們關心的是什麼時候數據發生瞭變化，而這也正是$scope.$apply()派上用場的地方。對於檢查綁定的數據到底有沒有發生變化，實際上是由$scope.$digest()完成的，但是我們幾乎從來就沒有直接調用過這個方法，而是調用$scope.$apply()方法，是因為在$scope.$apply()方法裡面，它會去調用$scope.$digest()方法。$scope.$apply()方法帶一個函數或者一個表達式，然後執行它，最後調用$scope.$digest()方法去更新bindings或者watchers。
什麼時候用$apply()
還是那個問題，那我們到底什麼時候需要去調用$apply()方法呢？情況非常少，實際上幾乎我們所有的代碼都包在$scope.$apply()裡面，像ng-click，controller的初始化，$http的毀掉函數等。在這些情況下，我們不需要自己調用，實際上我們也不能自己調用，否則在$apply()方法裡面再調用$apply()方法會拋出錯誤。如果我們需要在一個新的執行序列中運行代碼時才真正需要用到它，而且當且僅當這個新的執行序列不是被angular JS的庫的方法創建的，這個時候我們需要將代碼用$scope.$apply()包起來。下面用一個例子解釋：
[HTML]
<p ng:app ng-controller="Ctrl">{{message}}</p>
[Javascript]
復制代碼
functionCtrl($scope) {
$scope.message ="Waiting 2000ms for update";
setTimeout(function () {
$scope.message ="Timeout called!";
// AngularJS unaware of update to $scope
}, 2000);
}
復制代碼
上面的代碼執行後頁面上會顯示：Waiting 2000ms for update。顯然數據的更新沒有被angular JS覺察到。
接下來，我們將Javascript的代碼稍作修改，用$scope.$apply()包起來。
[Javascript]
復制代碼
functionCtrl($scope) {
$scope.message ="Waiting 2000ms for update";
setTimeout(function () {
$scope.$apply(function () {
$scope.message ="Timeout called!";
});
}, 2000);
}
復制代碼
這次與之前不同的是，頁面上先會顯示：Waiting 2000ms for update，等待2秒後內容會被更改為：Timeout called! 。顯然數據的更新被angular JS覺察到瞭。
NOTE：我們不應該這樣做，而是用angular JS提供的$timeout方法，這樣它就會被自動用$apply方法包起來瞭。
科學是把雙刃劍
最後，我們再來瞅一眼$scope.$apply()和$scope.$apply(function)方法吧！雖然angular JS為我們做瞭很多事情，但是我們也因此丟失瞭一些機會。從下面的偽代碼一看便知：
復制代碼
function$apply(expr) {
try {
return$eval(expr);
} catch(e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
復制代碼
它會捕獲所有的異常並且不會再拋出來，最後都會調用$digest()方法。
總結一下
$apply()方法可以在angular框架之外執行angular JS的表達式，例如：DOM事件、setTimeout、XHR或其他第三方的庫。這僅僅是個開始，水還有很深，歡迎大傢一起來deep pe！
===================================================================
【題外話】
If you are assigning a string containing a . char, you will need to use the $apply(fn) method or you will get an error.
Example:
var imagename = "myimage.png";
$scope.$apply($scope.image = imagename);
The code above will throw an error because Angular will interpret the string as an object. Using the function method this does not happen.
Example:
$scope.$apply(function () {
$scope.image = imagename;
});