One-time Binding & $digest

One$%me'Binding'&'$digest
∼ng#japan'2015∼
©"2014"LIG"INC."@frontainer

自己紹介
林優一!@frontainer
フロントエンドエンジニア
AngularJS関連の登壇歴
• AngularJSの今とこれから+,+フロントエ
ンドエンジニア座談会+」
• AngularJS+ディレクティブ・パターン
• 受託開発でのAngularJS+

One$%me'Bindingとは
バインディングを1度しか評価しないようにする機能
One$%me'bindingはAngularJS1.3から追加'（1.2以前の場合は「BindOnce」などのモジュールを使う）

使い方
{{::name}}
<div ng-repeat="user in ::users"></div>
ex)$demo1

例外
An#expression#that#starts#with#::#is#considered#a#one23me#
expression.#One23me#expressions#will#stop#recalcula3ng#once#they#
are#stable,#which#happens#a=er#the#ﬁrst#digest#if#the#expression#
result#is#a#non2undeﬁned#value#(see#value#stabiliza3on#algorithm#
below).
!!"AngularJS"Developer"Guide"!"Expressions

簡単に言うと・・・
• 値がundeﬁnedでなければ最初の$digestで値が保持される。
• 逆にいうとundeﬁnedである間は値が固定されない。
ex)$demo2

Watch数の違いをサンプルで見る
500件の簡単なユーザーデータを持つJSONをng)repeatでループして表示させる
[
{
"id": 1,
"name": "User1",
"value": 100
},
...
]

JavaScript
angular.module('app').controller('RootCtrl',[
'$scope',
'USERS',
function($scope,USERS) {
$scope.users = USERS;
}
]);

特に何もしない場合
<div ng-controller="RootCtrl">
<ul>
<li ng-repeat="user in users">
<div>{{user.id}} - {{user.name}}</div>
<div>{{user.value}}</div>
</li>
</ul>
</div>
ex)$demo3

配列に付けた場合
<ul>
<li ng-repeat="user in ::users">
<div>{{user.id}} - {{user.name}}</div>
<div>{{user.value}}</div>
</li>
</ul>
</div>
ex)$demo3)2

配列内のプロパティに付けた場合
<ul>
<li ng-repeat="user in users">
<div>{{::user.id}} - {{::user.name}}</div>
<div>{{::user.value}}</div>
</li>
</ul>
</div>
ex)$demo3)3

配列と配列内のプロパティに付けた場合
<ul>
<li ng-repeat="user in ::users">
<div>{{::user.id}} - {{::user.name}}</div>
<div>{{::user.value}}</div>
</li>
</ul>
</div>
ex)$demo3)4

One$%me'Bindingをしないと・・・
Scopeで他の値を書き換えた時にも影響を及ぼす。

$digestでのチェック回数
• demo1[特に何もしない場合]:*1503回
• demo*2[配列に付けた場合]:*1502回
• demo*3[配列内のプロパティに付けた場合]:*3回
• demo*4[配列と配列内のプロパティに付けた場合]:*2回
※!consoleに$digestループ実行回数が出力されます
ex)$demo4$demo4)2$demo4)3$demo4)4

Dirty&Checking
そこの値を変えなければ良いということではなく、watch対象の
値は変更されていないことをチェックされる
src/ng/rootScope.js.7262836
Object.observeの普及はいつになることやら

まとめ
• 双方向バインディングが必要でない場合は適切にOne%&me(
Bindingしていく
• Watch数をパフォーマンスチェック指標のひとつに
今回はChrome拡張の「Angular-watchers」を使って確認しました

ご静聴ありがとうございました
本日のサンプルはこちら
h"ps://github.com/frontainer/ligblog6sample
スライドはこちら
h"p://www.slideshare.net/frontainer

One-time Binding & $digest

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to One-time Binding & $digest

Similar to One-time Binding & $digest (20)

More from Hayashi Yuichi

More from Hayashi Yuichi (10)

Recently uploaded

Recently uploaded (8)

One-time Binding & $digest