angularJS中$apply()方法詳解

2019-11-20 13:29:02

字體：大中小

來源：轉載

供稿：網友

對于一個在前端屬于純新手的我來說，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就是這么干的（雖然我都沒接觸過――亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb