快捷導(dǎo)航

深入淺析AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)

更新時(shí)間：2017年05月11日 15:34:53 作者：拼搏的小叔

這篇文章主要介紹了AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)知識(shí),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一、理解雙向數(shù)據(jù)綁定和監(jiān)聽器

為了實(shí)現(xiàn)雙向數(shù)據(jù)綁定，AngularJS使用了$watch API來觀察期作用域中的模型變化。具體的作用域取決于你的代碼如何編寫。如果你沒有創(chuàng)建一個(gè)自作用域，就是說沒有使用ngController指令在你的DOM和你的控制器代碼之間創(chuàng)建一個(gè)關(guān)聯(lián)，你可能處理的是跟作用域$rootScope，這個(gè)作用域由ngApp自動(dòng)創(chuàng)建，并且是應(yīng)用中所有作用域的父作用域，當(dāng)然，如果你選擇手動(dòng)啟動(dòng)AngularJS，那情況就另當(dāng)別論了。每當(dāng)你創(chuàng)建了一個(gè)數(shù)據(jù)綁定時(shí)，AngularJS就會(huì)自動(dòng)創(chuàng)建一個(gè)監(jiān)聽器來監(jiān)聽這個(gè)數(shù)據(jù)的變化。比如說下面這個(gè)簡(jiǎn)單的例子:

<p>Hello {{name}}!</p>

在這個(gè)例子中，我們使用了插值指令，這個(gè)指令會(huì)注冊(cè)一個(gè)監(jiān)聽器來監(jiān)聽相應(yīng)作用域中屬性name的變化，并在該屬性發(fā)生變化時(shí)將它實(shí)時(shí)反應(yīng)到DOM中。

添加下面的代碼，你的name屬性將會(huì)自動(dòng)的被賦值為Pascal：

angular.module('myApp', []) 
 .run(function ($rootScope) { 
  $rootScope.name = "Pascal"; 
}]);

通過上面的代碼，我們就成功的使用了插值指令創(chuàng)建了在試圖上創(chuàng)建了一個(gè)數(shù)據(jù)綁定?，F(xiàn)在，如果name屬性發(fā)生變化，視圖將會(huì)自動(dòng)發(fā)生更新。比如說我們添加下面的代碼，在按鈕點(diǎn)擊是修改name的值:

<button ng-click="name = 'Christoph'">Click me!</button>

此時(shí)，點(diǎn)擊按鈕，我們可以將name的值修改為Christoph，同時(shí)我們會(huì)觸發(fā)一個(gè)$digest循環(huán)來更新DOM中相應(yīng)的部分。在上面的例子中，你看的知識(shí)單向數(shù)據(jù)綁定。然而，你完全可以使用ngModel指令來將視圖中發(fā)生的變化實(shí)時(shí)的反應(yīng)到模型中。

上面的雙向綁定魔法的實(shí)現(xiàn)完全依賴于$digest循環(huán)，當(dāng)$digest循環(huán)被觸發(fā)時(shí)，AngularJS將會(huì)去處理遍歷當(dāng)前作用域和子作用域中的所有監(jiān)聽器，然后通過檢查模型中發(fā)生的變化來更新DOM中的值，直到模型不再發(fā)生變化為止。一旦$digest循環(huán)執(zhí)行完成，瀏覽器會(huì)重新渲染DOM來反應(yīng)模型數(shù)據(jù)變化。

現(xiàn)在，我們大概了解了AngularJS的數(shù)據(jù)綁定機(jī)制，你可能會(huì)問我們?yōu)楹芜€需要一次性數(shù)據(jù)綁定。

由于AngularJS使用監(jiān)聽器來實(shí)現(xiàn)數(shù)據(jù)綁定。當(dāng)監(jiān)聽器越來越多時(shí)，可能會(huì)出現(xiàn)一些性能上的問題。由于在注冊(cè)監(jiān)聽器使，同時(shí)會(huì)注冊(cè)一個(gè)回調(diào)函數(shù)，以便在$digest循環(huán)執(zhí)行時(shí)能夠相應(yīng)的更新視圖。也就是說，監(jiān)聽器越多，AngularJS需要處理的回調(diào)函數(shù)也就越多。

現(xiàn)在假設(shè)在視圖中有很多值需要被AngularJS處理。比如說像上面使用插值指令來進(jìn)行數(shù)據(jù)綁定，雖然我們可能并不想讓這個(gè)值只綁定一次，比如說上面的Pascal，在應(yīng)用代碼執(zhí)行的整個(gè)過程中這個(gè)屬性都不會(huì)發(fā)生改變，但是AngularJS默認(rèn)依然會(huì)在這個(gè)屬性上綁定一個(gè)監(jiān)聽器和回調(diào)函數(shù)。因此，在$digest時(shí)，AngularJS依然會(huì)去特意的關(guān)注這個(gè)值，這實(shí)在是有些過頭了。

二、一次性數(shù)據(jù)綁定(One-time bindings)

這就是我們需要一次性數(shù)據(jù)綁定的原因。在AngularJS的文檔中，我們可以清楚的了解到這個(gè)新特性的作用:一次性數(shù)據(jù)綁定表達(dá)式可以在數(shù)據(jù)穩(wěn)定之后，不需要在$digest循環(huán)中重計(jì)算…

一次性數(shù)據(jù)綁定的出現(xiàn)解決了前面提到的由監(jiān)聽器太多帶來的性能問題。那么我們應(yīng)該如何使用一次性數(shù)據(jù)綁定呢？

使用一次性數(shù)據(jù)綁定非常的簡(jiǎn)單，我們只需要在表達(dá)式之前加上雙冒號(hào)::即可。比如，前面我們使用了插值指令將name屬性綁定到了視圖中: