對於Angular JS中$apply()的理解

Angular最引人注目的特性就是雙向綁定，然而它是怎麼作到的，我能夠來總結兩點：

• 將變化的數據從model傳向view-->$apply

• 將變化的數據從view傳向model-->$watch

這連個函數都是基於scope的基礎上，對scope對象的成員變化情況進行傳播的。那麼，我不妨是從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，因此第1、3、四點不難理解，惟獨第二點感受有點雲裏霧裏。本着打破沙鍋問到底的原則，我仍是經過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]

<div ng:app ng-controller="Ctrl">{{message}}</div>

[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()方法。