成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular 1.3 one-time binding介紹

antyiwei / 1537人閱讀

摘要：本片文章是這個(gè)系列的第一篇，將介紹這其中最重要的一個(gè)新特性。正是為解決此問題而生的。在介紹之前，先理解一下數(shù)據(jù)綁定和的的概念。中引入了一種新語法用于表示指令綁定的。注意按鈕的作用是把更新為，不過再試試看不會(huì)再發(fā)生改變原文鏈接

Angular 1.3 版本終于放出，在更新了許多新特性的同時(shí)也修復(fù)了許多bug并且?guī)硇阅芴嵘?。為了幫助自己也幫助別人更早理解這些新特性，接下來將會(huì)有一個(gè)系列文章去介紹這些主要的新特性和改進(jìn)。本片文章是這個(gè)系列的第一篇，將介紹這其中最重要的一個(gè)新特性：one-time bindng。

唉，先別急！我記得Angular的數(shù)據(jù)綁定是自動(dòng)保持UI同步更新的??？沒錯(cuò)，這個(gè)特點(diǎn)非常重要，但不一定所有地方都需要。這種數(shù)據(jù)綁定的方式需要框架時(shí)刻監(jiān)視著所有綁定過的數(shù)據(jù)，這種方式真的很消耗性能。one-time binding 正是為解決此問題而生的。在介紹 one-time binding 之前，先理解一下數(shù)據(jù)綁定和watcher的的概念。

理解數(shù)據(jù)綁定和watchers

為了實(shí)現(xiàn)數(shù)據(jù)綁定，Angular 使用了 $watch API去觀察 scope 上的數(shù)據(jù)的改動(dòng)。其中 scope 具體是什么如何形成的取決于你的代碼。如果你沒有手動(dòng)創(chuàng)建一個(gè) child scope ，例如通過 ngController 指令去創(chuàng)建，那么你可能是在和 $rootScope 打交道，這個(gè) $rootScope 是指當(dāng)前應(yīng)用的一般通過 ngApp 指令創(chuàng)建的根 scope。

和 scope 打交道并觀察其中的變化一般總是要用到所謂的 watcher 。Watchers 通過 DOM 中的 directives 注冊。比方說通過直接 interpolation 指令去同步 scope 模型的值：

Hello {{name}}!

這個(gè) interpolation 指令注冊了一個(gè)用于 $rootScope 上 name 屬性的 watcher，從而可以更新綁定了這個(gè)屬性值的DOM。

我們可以在 socpe 上通過標(biāo)識(shí)符直接定義一個(gè)屬性并同時(shí)給它賦值，這樣它就可以直接在DOM中顯示：

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

我們剛剛通過 interpolation 指令在 view 上綁定了一了一個(gè) model 值，如果改變它的值，view 也會(huì)同時(shí)自動(dòng)更新?？梢酝ㄟ^添加一個(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 上注冊過的 watchers，并檢查 model 是否經(jīng)過改動(dòng)，然后直到 model 穩(wěn)定調(diào)用并且沒有更多的 listeners 被點(diǎn)燃，對應(yīng)的 listeners 被調(diào)用。
以下是以上描述的代碼效果展示：
plnkr

太多watcher的問題

現(xiàn)在我們已經(jīng)對 Angular 中的數(shù)據(jù)綁定機(jī)制有了一個(gè)大致的了解，那么可能想到為什么會(huì)需要 one-time binding 這樣的特性呢？

鑒于使用 watcher 來實(shí)現(xiàn)數(shù)據(jù)綁定的本質(zhì)，我們可能會(huì)遇到有太多 watcher 時(shí)較差性能的問題。正如我們所了解的那樣，watch expressions 和他們對應(yīng)的 callback listeners 都是是注冊在 scope 上的，基于此 Angular 可以在 $digest 輪詢的時(shí)候處理它們也就保持了相應(yīng)的 view 更行。簡單地說，越多 watchers 被注冊，Angular 要處理的也就越多。

現(xiàn)在想象一種有許多動(dòng)態(tài)值在 view 中的場景。比如國際化過程是非常常見的一種情況，需要 Angular 的數(shù)據(jù)綁定去做應(yīng)用的本地化，盡管語言只在初始設(shè)置頁才會(huì)更改，而在運(yùn)行時(shí)是不會(huì)改變的。此情景下每一個(gè)字符串都被本地化到 view 中，同時(shí)也被寫入到 scope 里，并且注冊一個(gè)對應(yīng)的 watcher 用于下次 $digest 輪詢時(shí)可能的更新。如果語言的確不太可能在運(yùn)行時(shí)改變，這樣的代價(jià)實(shí)在是太高了。

one-time binding 來拯救你們了！

終于到了主角登場的時(shí)刻了。那么什么是 one-time bindings ？文檔里是這么說的：

  
One-time expressions will stop recalculating once they are stable, which happens after the first digest…

  第一次 digest 后，One-time 表達(dá)式一旦穩(wěn)定后就不會(huì)再更新。

上面提到的場景的確是 Angular 應(yīng)當(dāng)處理的問題。Angular 1.3 中引入了一種新語法用于表示 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，不過再試試看：
plnkr
name不會(huì)再發(fā)生改變！

原文鏈接

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85347.html

相關(guān)文章

  • Angular 1 深度解析：臟數(shù)據(jù)檢查與 angular 性能優(yōu)化

    摘要：通常寫代碼時(shí)我們無需主動(dòng)調(diào)用或是因?yàn)樵谕獠繉ξ覀兊幕卣{(diào)函數(shù)做了包裝。類似的不只是這些事件回調(diào)函數(shù)，還有等。常量依舊會(huì)重復(fù)檢查。會(huì)檢查中有沒有一個(gè)名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機(jī)制，由 $apply 或 $digest 觸發(fā)。 臟檢查的范圍是整個(gè)頁面，不受區(qū)域或組件劃分影響 使用盡量簡單的綁定表達(dá)式提升臟檢查執(zhí)行速度 盡量減少頁面上綁定表達(dá)式的個(gè)數(shù)（單次綁定...

    fasss 評論0 收藏0

  • Angular 1 深度解析：臟數(shù)據(jù)檢查與 angular 性能優(yōu)化

    摘要：通常寫代碼時(shí)我們無需主動(dòng)調(diào)用或是因?yàn)樵谕獠繉ξ覀兊幕卣{(diào)函數(shù)做了包裝。類似的不只是這些事件回調(diào)函數(shù)，還有等。常量依舊會(huì)重復(fù)檢查。會(huì)檢查中有沒有一個(gè)名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機(jī)制，由 $apply 或 $digest 觸發(fā)。 臟檢查的范圍是整個(gè)頁面，不受區(qū)域或組件劃分影響 使用盡量簡單的綁定表達(dá)式提升臟檢查執(zhí)行速度 盡量減少頁面上綁定表達(dá)式的個(gè)數(shù)（單次綁定...

    VioletJack 評論0 收藏0

  • angular表單驗(yàn)證2

    摘要：表單驗(yàn)證使用場景在實(shí)際的開發(fā)中我們可能會(huì)有這樣的情況。姓名不能為空姓名太短姓名太長姓名不能為空姓名太短姓名太長借助表單本身比之前的更簡單了。結(jié)尾以上就是關(guān)于表單驗(yàn)證的全部內(nèi)容。 前言 在之前的文章《angular表單驗(yàn)證》中主要介紹了一些關(guān)于angular表單驗(yàn)證的基礎(chǔ)知識(shí)。在此篇中將著重以擴(kuò)展angular表單驗(yàn)證的相關(guān)內(nèi)容和實(shí)際開發(fā)中的應(yīng)用為主。 表單驗(yàn)證使用場景1 在實(shí)際的開發(fā)...

    darkbug 評論0 收藏0

  • Controller As in Angularjs

    摘要：因?yàn)樵诶锩媸腔谠瓦M(jìn)行繼承的。事實(shí)上注入后，即提供了一個(gè)，可以在這個(gè)上面綁定屬性和方法。當(dāng)使用語法的時(shí)候，事實(shí)上是綁定到了的對象上面。注意這個(gè)地方執(zhí)行順序是從子元素開始再到父元素的。即在執(zhí)行階段前確保執(zhí)行完畢。 Controller As angular .module(app, []) .controller(DemoController, ...

    mo0n1andin 評論0 收藏0

  • MVC MVP MVVM

    摘要：，的事件回調(diào)函數(shù)中調(diào)用的操作方法。以為例調(diào)用關(guān)系模式實(shí)際就是將中的改名為，調(diào)用過程基本一致，最大的改良是間的雙向綁定。和間，有一個(gè)對象，可以操作修改，使用。 參考：MVC，MVP 和 MVVM 的圖示 - 阮一峰http://www.ruanyifeng.com/blo...Web開發(fā)的MVVM模式http://www.cnblogs.com/dxy198...界面之下：還原真實(shí)的MV...

    wushuiyong 評論0 收藏0

發(fā)表評論

0條評論

antyiwei

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<