資訊專欄INFORMATION COLUMN
摘要：本片文章是這個(gè)系列的第一篇，將介紹這其中最重要的一個(gè)新特性。正是為解決此問(wèn)題而生的。在介紹之前，先理解一下數(shù)據(jù)綁定和的的概念。中引入了一種新語(yǔ)法用于表示指令綁定的。注意按鈕的作用是把更新為，不過(guò)再試試看不會(huì)再發(fā)生改變?cè)逆溄?/p>
Angular 1.3 版本終于放出，在更新了許多新特性的同時(shí)也修復(fù)了許多bug并且?guī)?lái)性能提升。為了幫助自己也幫助別人更早理解這些新特性，接下來(lái)將會(huì)有一個(gè)系列文章去介紹這些主要的新特性和改進(jìn)。本片文章是這個(gè)系列的第一篇，將介紹這其中最重要的一個(gè)新特性：one-time bindng。
唉，先別急！我記得Angular的數(shù)據(jù)綁定是自動(dòng)保持UI同步更新的?。繘](méi)錯(cuò)，這個(gè)特點(diǎn)非常重要，但不一定所有地方都需要。這種數(shù)據(jù)綁定的方式需要框架時(shí)刻監(jiān)視著所有綁定過(guò)的數(shù)據(jù)，這種方式真的很消耗性能。one-time binding 正是為解決此問(wèn)題而生的。在介紹 one-time binding 之前，先理解一下數(shù)據(jù)綁定和watcher的的概念。
理解數(shù)據(jù)綁定和watchers為了實(shí)現(xiàn)數(shù)據(jù)綁定，Angular 使用了 $watch API去觀察 scope 上的數(shù)據(jù)的改動(dòng)。其中 scope 具體是什么如何形成的取決于你的代碼。如果你沒(méi)有手動(dòng)創(chuàng)建一個(gè) child scope ，例如通過(guò) ngController 指令去創(chuàng)建，那么你可能是在和 $rootScope 打交道，這個(gè) $rootScope 是指當(dāng)前應(yīng)用的一般通過(guò) ngApp 指令創(chuàng)建的根 scope。
和 scope 打交道并觀察其中的變化一般總是要用到所謂的 watcher 。Watchers 通過(guò) DOM 中的 directives 注冊(cè)。比方說(shuō)通過(guò)直接 interpolation 指令去同步 scope 模型的值：
Hello {{name}}!
這個(gè) interpolation 指令注冊(cè)了一個(gè)用于 $rootScope 上 name 屬性的 watcher，從而可以更新綁定了這個(gè)屬性值的DOM。
我們可以在 socpe 上通過(guò)標(biāo)識(shí)符直接定義一個(gè)屬性并同時(shí)給它賦值，這樣它就可以直接在DOM中顯示：
angular.module("maApp", [])
.run(function($rootScope) {
$rootScope.name = "Pascal";
});
我們剛剛通過(guò) interpolation 指令在 view 上綁定了一了一個(gè) model 值，如果改變它的值，view 也會(huì)同時(shí)自動(dòng)更新?？梢酝ㄟ^(guò)添加一個(gè)按鈕實(shí)現(xiàn)更新 name 屬性值的操作：
點(diǎn)擊這個(gè)按鈕會(huì)把 Christoph 賦給 name 屬性，這觸發(fā)了一個(gè) $digest 可以保持 DOM 相應(yīng)更新的輪詢。在這個(gè)例子中數(shù)據(jù)的更新只是單向的(上->下)。如果是在用到 ngModel 的 input 元素的例子中，用戶可以輸入內(nèi)容改變這個(gè)屬性的值，同時(shí)改變也實(shí)時(shí)的返回到實(shí)際的 model 上。
這些是因?yàn)橐粋€(gè) $digest 輪詢被觸發(fā)才發(fā)生的，Angular 負(fù)責(zé)處理所有當(dāng)前 scope 和它的 child scope 上注冊(cè)過(guò)的 watchers，并檢查 model 是否經(jīng)過(guò)改動(dòng)，然后直到 model 穩(wěn)定調(diào)用并且沒(méi)有更多的 listeners 被點(diǎn)燃，對(duì)應(yīng)的 listeners 被調(diào)用。
以下是以上描述的代碼效果展示：
plnkr
現(xiàn)在我們已經(jīng)對(duì) Angular 中的數(shù)據(jù)綁定機(jī)制有了一個(gè)大致的了解，那么可能想到為什么會(huì)需要 one-time binding 這樣的特性呢？
鑒于使用 watcher 來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定的本質(zhì)，我們可能會(huì)遇到有太多 watcher 時(shí)較差性能的問(wèn)題。正如我們所了解的那樣，watch expressions 和他們對(duì)應(yīng)的 callback listeners 都是是注冊(cè)在 scope 上的，基于此 Angular 可以在 $digest 輪詢的時(shí)候處理它們也就保持了相應(yīng)的 view 更行。簡(jiǎn)單地說(shuō)，越多 watchers 被注冊(cè)，Angular 要處理的也就越多。
現(xiàn)在想象一種有許多動(dòng)態(tài)值在 view 中的場(chǎng)景。比如國(guó)際化過(guò)程是非常常見(jiàn)的一種情況，需要 Angular 的數(shù)據(jù)綁定去做應(yīng)用的本地化，盡管語(yǔ)言只在初始設(shè)置頁(yè)才會(huì)更改，而在運(yùn)行時(shí)是不會(huì)改變的。此情景下每一個(gè)字符串都被本地化到 view 中，同時(shí)也被寫(xiě)入到 scope 里，并且注冊(cè)一個(gè)對(duì)應(yīng)的 watcher 用于下次 $digest 輪詢時(shí)可能的更新。如果語(yǔ)言的確不太可能在運(yùn)行時(shí)改變，這樣的代價(jià)實(shí)在是太高了。
one-time binding 來(lái)拯救你們了！終于到了主角登場(chǎng)的時(shí)刻了。那么什么是 one-time bindings ？文檔里是這么說(shuō)的：
One-time expressions will stop recalculating once they are stable, which happens after the first digest…
第一次 digest 后，One-time 表達(dá)式一旦穩(wěn)定后就不會(huì)再更新。
上面提到的場(chǎng)景的確是 Angular 應(yīng)當(dāng)處理的問(wèn)題。Angular 1.3 中引入了一種新語(yǔ)法用于表示 interpolation 指令綁定的 one-time。只需要在表達(dá)式前加入 :: 雙引號(hào)即可。同樣是上面的例子，我們只需要把：
Hello {{name}}!
改為：
Hello {{::name}}!
這同樣適用于其他 Angular 中典型的表達(dá)式。例如在 ng-repeat 表達(dá)式中或者僅需要從內(nèi)部暴露出一個(gè)屬性值的指令（不會(huì)從外部改變），只需要在外部把它設(shè)置為 one-time 表達(dá)式：
下面是實(shí)際例子中的效果，已經(jīng)把上面例子中的 name 改成了 ::name表示 one-time binding，其他則代碼完全一樣。注意按鈕的作用是把 name 更新為 Christoph，不過(guò)再試試看：
plnkr
name不會(huì)再發(fā)生改變！
原文鏈接
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85347.html
摘要：通常寫(xiě)代碼時(shí)我們無(wú)需主動(dòng)調(diào)用或是因?yàn)樵谕獠繉?duì)我們的回調(diào)函數(shù)做了包裝。類似的不只是這些事件回調(diào)函數(shù)，還有等。常量依舊會(huì)重復(fù)檢查。會(huì)檢查中有沒(méi)有一個(gè)名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機(jī)制，由 $apply 或 $digest 觸發(fā)。 臟檢查的范圍是整個(gè)頁(yè)面，不受區(qū)域或組件劃分影響 使用盡量簡(jiǎn)單的綁定表達(dá)式提升臟檢查執(zhí)行速度 盡量減少頁(yè)面上綁定表達(dá)式的個(gè)數(shù)（單次綁定...
摘要：通常寫(xiě)代碼時(shí)我們無(wú)需主動(dòng)調(diào)用或是因?yàn)樵谕獠繉?duì)我們的回調(diào)函數(shù)做了包裝。類似的不只是這些事件回調(diào)函數(shù)，還有等。常量依舊會(huì)重復(fù)檢查。會(huì)檢查中有沒(méi)有一個(gè)名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機(jī)制，由 $apply 或 $digest 觸發(fā)。 臟檢查的范圍是整個(gè)頁(yè)面，不受區(qū)域或組件劃分影響 使用盡量簡(jiǎn)單的綁定表達(dá)式提升臟檢查執(zhí)行速度 盡量減少頁(yè)面上綁定表達(dá)式的個(gè)數(shù)（單次綁定...
摘要：表單驗(yàn)證使用場(chǎng)景在實(shí)際的開(kāi)發(fā)中我們可能會(huì)有這樣的情況。姓名不能為空姓名太短姓名太長(zhǎng)姓名不能為空姓名太短姓名太長(zhǎng)借助表單本身比之前的更簡(jiǎn)單了。結(jié)尾以上就是關(guān)于表單驗(yàn)證的全部?jī)?nèi)容。 前言 在之前的文章《angular表單驗(yàn)證》中主要介紹了一些關(guān)于angular表單驗(yàn)證的基礎(chǔ)知識(shí)。在此篇中將著重以擴(kuò)展angular表單驗(yàn)證的相關(guān)內(nèi)容和實(shí)際開(kāi)發(fā)中的應(yīng)用為主。 表單驗(yàn)證使用場(chǎng)景1 在實(shí)際的開(kāi)發(fā)...
摘要：因?yàn)樵诶锩媸腔谠瓦M(jìn)行繼承的。事實(shí)上注入后，即提供了一個(gè)，可以在這個(gè)上面綁定屬性和方法。當(dāng)使用語(yǔ)法的時(shí)候，事實(shí)上是綁定到了的對(duì)象上面。注意這個(gè)地方執(zhí)行順序是從子元素開(kāi)始再到父元素的。即在執(zhí)行階段前確保執(zhí)行完畢。 Controller As angular .module(app, []) .controller(DemoController, ...
摘要：，的事件回調(diào)函數(shù)中調(diào)用的操作方法。以為例調(diào)用關(guān)系模式實(shí)際就是將中的改名為，調(diào)用過(guò)程基本一致，最大的改良是間的雙向綁定。和間，有一個(gè)對(duì)象，可以操作修改，使用。 參考：MVC，MVP 和 MVVM 的圖示 - 阮一峰http://www.ruanyifeng.com/blo...Web開(kāi)發(fā)的MVVM模式http://www.cnblogs.com/dxy198...界面之下：還原真實(shí)的MV...
閱讀 1223·2019-08-30 12:44
閱讀 710·2019-08-29 13:03
閱讀 2642·2019-08-28 18:15
閱讀 2484·2019-08-26 10:41
閱讀 3167·2019-08-26 10:28
閱讀 3092·2019-08-23 16:54
閱讀 2065·2019-08-23 15:16
閱讀 893·2019-08-23 14:55
