angularJS中$apply()方法詳解
對于一個在前端屬于純新手的我來說，Javascript都還是一知半解，要想直接上手angular JS，遇到的阻力還真是不少。不過我相信，只要下功夫，即使是反人類的設(shè)計也不是什么大的問題。
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的執(zhí)行提供上下文，暫且先這么理解吧。
Scope的特性
接下來，看看Scope有哪些特性呢？
Scope提供$watch方法監(jiān)視Model的變化。
Scope提供$apply方法傳播Model的變化。
Scope可以繼承，用來隔離不同的application components和屬性訪問權(quán)限。
Scope為Expressions的計算提供上下文。
對于這四點特性，因為我之前學習過ActionScript、C++、Java，所以第一、三、四點不難理解，唯獨第二點感覺有點云里霧里。本著打破沙鍋問到底的原則，我還是通過Google搜到了一些東西。對于有經(jīng)驗的老手，板磚請輕拍！
源起Javascript
首先，乍一看，scope.apply()似乎就是一個使得bindings得到更新的普普通通的方法。但稍微多想一點，為什么我們需要它？一般在什么時候用它呢？用弄明白這兩個問題，還得從Javascript說起。在Javascript代碼里，都是按照一定順序來執(zhí)行的，當輪到一個代碼片段執(zhí)行的時候，瀏覽器就只會去執(zhí)行當前的片段，不會做任何其他的事情。所以有時候一些做得不是很好的網(wǎng)頁，當點擊了某個東西之后會卡住，Javascript的工作方式就是會導致這一現(xiàn)象原因之一！下面我們有一段代碼來感受一下：
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”的按鈕，然后添加一個監(jiān)聽器，然后設(shè)置超時。等待5秒，會彈出一個對話框。如果刷新頁面并立即點擊clickMe按鈕，會彈出一個對話框，如果你不點擊OK，timerComplete函數(shù)永遠沒有機會執(zhí)行。
如何更新bindings
好了，扯了一些看似不相關(guān)的東西之后，我們回歸正題。angular JS是怎么知道什么時候數(shù)據(jù)的變化和頁面需要更新的呢？代碼需要知道什么時候數(shù)據(jù)被修改了，但是現(xiàn)在又沒有一種方法直接去通知說某個對象上的數(shù)據(jù)變了（盡管ECMAScript 5正在嘗試解決這一問題，但也還是處于實驗階段）。而目前比較主流的策略有以下有兩種解決方案。一種是需要用特殊的對象，讓所有的數(shù)據(jù)都只能通過調(diào)用對象的方法設(shè)置，而不是直接通過property指定。這樣的話，所有的修改就可以被記錄下來了，就知道什么時候頁面需要更新了。這樣做的弊端就是我們必須去繼承一個特殊的對象。對于賦值也只能通過object.set('key', 'value')而不是object.key=value的方式。在框架中，像EmberJS和KnockoutJS就是這么干的（雖然我都沒接觸過——囧）。另一種就是angular JS采用的方式，在每一次Javascript代碼執(zhí)行序列執(zhí)行結(jié)束后都去檢查是否有數(shù)據(jù)的改變。這看起來似乎并不高效，甚至嚴重影響性能。但是angular JS采用了一些比較巧妙的手段解決了這個問題（還沒研究過，目前尚不明確）。這么做的好處就是，我們可以隨便使用任意對象，對于賦值方式也沒有限制，而且對于數(shù)據(jù)的改變也能覺察到。
對于angular JS采取的這種解決方案，我們關(guān)心的是什么時候數(shù)據(jù)發(fā)生了變化，而這也正是scope.apply()派上用場的地方。對于檢查綁定的數(shù)據(jù)到底有沒有發(fā)生變化，實際上是由scope.digest()完成的，但是我們幾乎從來就沒有直接調(diào)用過這個方法，而是調(diào)用scope.apply()方法，是因為在scope.apply()方法里面，它會去調(diào)用scope.digest()方法。scope.apply()方法帶一個函數(shù)或者一個表達式，然后執(zhí)行它，最后調(diào)用scope.digest()方法去更新bindings或者watchers。
什么時候用$apply()
還是那個問題，那我們到底什么時候需要去調(diào)用apply()方法呢？情況非常少，實際上幾乎我們所有的代碼都包在scope.apply()里面，像ng−click，controller的初始化，http的回調(diào)函數(shù)等。在這些情況下，我們不需要自己調(diào)用，實際上我們也不能自己調(diào)用，否則在apply()方法里面再調(diào)用apply()方法會拋出錯誤。如果我們需要在一個新的執(zhí)行序列中運行代碼時才真正需要用到它，而且當且僅當這個新的執(zhí)行序列不是被angular JS的庫的方法創(chuàng)建的，這個時候我們需要將代碼用scope.apply()包起來。下面用一個例子解釋：
<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í)行后頁面上會顯示：Waiting 2000ms for update。顯然數(shù)據(jù)的更新沒有被angular JS覺察到。
接下來，我們將Javascript的代碼稍作修改，用scope.apply()包起來。
functionCtrl($scope) {
$scope.message ="Waiting 2000ms for update";
setTimeout(function () {
$scope.$apply(function () {
$scope.message ="Timeout called!";
});
}, 2000);
}
這次與之前不同的是，頁面上先會顯示：Waiting 2000ms for update，等待2秒后內(nèi)容會被更改為：Timeout called! 。顯然數(shù)據(jù)的更新被angular JS覺察到了。
NOTE：我們不應(yīng)該這樣做，而是用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();
}
}
它會捕獲所有的異常并且不會再拋出來，最后都會調(diào)用$digest()方法。
總結(jié)一下
$apply()方法可以在angular框架之外執(zhí)行angular JS的表達式，例如：DOM事件、setTimeout、XHR或其他第三方的庫。這僅僅是個開始，水還有很深，歡迎大家一起來deep dive！
相關(guān)文章
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下2014-12-12
AngularJS實現(xiàn)的2048小游戲功能【附源碼下載】
這篇文章主要介紹了AngularJS實現(xiàn)的2048小游戲,可實現(xiàn)通過鍵盤W、S、A、D鍵控制上下左右移動進行游戲的功能,涉及AngularJS頁面元素動態(tài)操作及數(shù)值運算等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
下面小編就為大家?guī)硪黄獪\談Angular中ngModel的$render。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
Angular中AuthGuard路由守衛(wèi)的創(chuàng)建使用
這篇文章主要為大家介紹了Angular中AuthGuard路由守衛(wèi)的創(chuàng)建使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
Angular+Ionic使用queryParams實現(xiàn)跳轉(zhuǎn)頁傳值的方法
這篇文章主要介紹了Angular+Ionic使用queryParams實現(xiàn)跳轉(zhuǎn)頁傳值的方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
對比分析AngularJS中的$http.post與jQuery.post的區(qū)別
這篇文章主要給大家對比分析AngularJS中的$http.post與jQuery.post的區(qū)別，十分的詳細，是篇非常不錯的文章，這里推薦給小伙伴們。2015-02-02
這篇文章主要介紹了AngularJS bootstrap啟動的知識，這里整理了相關(guān)資料及簡單實例代碼，,需要的朋友可以參考下2016-09-09
這篇文章主要給大家介紹了關(guān)于Angular利用HTTP POST下載流文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
AngularJS的依賴注入實例分析(使用module和injector)
這篇文章主要介紹了AngularJS的依賴注入,結(jié)合實例形式分析了依賴注入的原理及使用module和injector實現(xiàn)依賴注入的步驟與操作技巧,需要的朋友可以參考下2017-01-01
AngularJs Injecting Services Into Controllers詳解
本文主要介紹AngularJs Injecting Services Into Controllers的知識,這里整理了一下相關(guān)資料，及示例代碼，幫助大家學習和理解，有興趣的小伙伴可以參考下2016-09-09