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