AngularJS Data Binding

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

AngularJS Data Binding
Ticore Shih 2013/08/05
https://github.com/Ticore/ng-data-binding-sample

Data Binding 定義
• 來源資料變化，目的資料對應變化
• Observer design pattern
Subject
Observer 1
Update Observer 2
Observer 3

Data Binding 使用情境
• Frontend <-> Backend
• View <-> Model
MDV
UI Data Binding

Data Binding 組成
Source
model
Destination
model
Trigger Listener / Watcher
UI Template Expression

AngularJS Data Binding Example
<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"></head>
<body ng-app ng-init="txt='Hello...

Data Binding 概念
• 語意簡單明確
• 宣告式而非命令式
– 無順序、無副作用
• 依賴反轉

太難寫的東西沒資格稱為
「Data Binding」
Code-behind required
Complex directive, expression

Data Binding 各種作法
• Pre-compile
Flex, zk, backbase, ...
• Runtime compile
Angular.js, Knockout.js, Ember.js, ...
• Native ...

Data Binding Check Mode
Dirty Check
• 被動檢查
• Any Object, Function
• 通常語法較簡潔
• 容易產生無窮迴圈
• 影響範圍廣泛
Change Event
• 主動發出
• Bind...

Data Binding Expression Type
• Full function language
• Partial function language
• String interpolation
<p>txt : {{ txt }...

AngularJS Expression
• Against scope
• Forgiving
{{ a.b.c }}
• No control flow
• No declaration
• Filter pipeline
number, ...

AngularJS $digest Cycle
__________________ _____________________________________
/ Native / Javascript
| | | ___________...

AngularJS $digest Trigger
• Bootstrap
• $timeout
• $http done
• Dom event
– click, submit, change, link, mouse events
keyb...

AngularJS Watchers
var unwatch =
$scope.$watch(expr, listener, equality);
• Dirty check
– 不斷執行 Expression 直到結果一樣
• Object ...

$digest Loop 進入點
• $apply()
– 執行表示式，例外處裡
– scope : $rootScope
– $$phase : '$apply'
• $digest()
– scope : $scope
– $$phase ...

$apply() Pseudo-Code
function $apply(expr) {
try {
return $eval(expr); // '$apply' phase
} catch (e) {
$exceptionHandler(e...

Enter $digest Loop
• url change
if (!$rootScope.$$phase) {
$rootScope.$digest();
}
• http done
if (!$rootScope.$$phase) {
...

Expression Evaluation
$eval(expr, locals) vs. $evalAsync(expr)
– 均不會觸發 $digest loop
– 均同一次 event loop 執行
– 是否直接回傳結果
– Inje...

Data Binding Trick
• Multiple trigger
$scope.$watch(
"a + b + c + d",
function() {
......
}
);

Data Binding Trick
• Cascade binding
a b c d
/ /
ab cd
/
abcd

Data Binding Trick
• Register $digest
$scope.$watch(
function() {
......
}
);

Data Binding Performance
• Human are:
– Slow (> 50 ms)
– Limited (< 2000 pieces)
http://goo.gl/JeJNY
• GUI 30/60 FPS -> 33...

Data Binding 效能測試
• Chrome profiler
https://developers.google.com/chrome-developer-tools/docs/cpu-profiling
• Batarang too...

Data Binding 效能改善
• GUI 效果不要使用 Binding
• 謹慎使用 $timeout
• 輕量化 Expression
• 計算放在 Listener
• 減少 Watchers 數量

3rd-party Binding Directive
• One time data binding
– Bindonce
https://github.com/Pasvaz/bindonce
– $watch fighters
https:...

Pause Data Binding
• Unpause state
– 計算結果存入快取
• Pause state
– 回傳上次快取資料

Lazy Data Binding
減少評估與執行次數
– 延緩第一次執行 (bypass two $digest / expr)
– 給定時間範圍內最多執行一次
– 滿足最後一次 dirty check
– 限定範圍 $scope.$dige...

Data Binding Error
Error: 10 $digest() iterations reached.
Aborting!
改善方式
– $rootScopeProvider.digestTtl
– TTL 無效 -> 程式邏輯有...

Data Binding 範疇終點
• ngNonBindable
<p ng-non-bindable>
i : {{ i }}
</p>
• Terminal directive
function factory() {
return { ...

Thanks!

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

AngularJS performance & production ... by Nir Kaufman 41514 views

View on Slideshare

1 of 30 Ad

View on Slideshare

1 of 30 Ad