One-time Binding & $digest

One$%me'Binding'&'$digest～ng#japan'2015～

©"2014"LIG"INC."@frontainer

自己紹介

林　優一!@frontainerフロントエンドエンジニア

AngularJS関連の登壇歴• AngularJSの今とこれから+,+フロントエンドエンジニア座談会+」

• AngularJS+ディレクティブ・パターン

• 受託開発でのAngularJS+


https://github.com/frontainer

http://event.shoeisha.jp/devsumi/20150219/session/660/





http://www.slideshare.net/frontainer/2angularjs

http://www.slideshare.net/frontainer/2angularjs

http://www.slideshare.net/frontainer/angularjs-1angularjs-lig

http://www.slideshare.net/frontainer/angularjs-1angularjs-lig

One$%me'Bindingとはバインディングを1度しか評価しないようにする機能

One$%me'bindingはAngularJS1.3から追加'（1.2以前の場合は「BindOnce」などのモジュールを使う）


https://github.com/Pasvaz/bindonce

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

ex)$demo1


http://frontainer.com/ligblog-sample/angular-one-time-binding/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#first#digest#if#the#expression#result#is#a#non2undefined#value#(see#value#stabiliza3on#algorithm#below).

!!"AngularJS"Developer"Guide"!"Expressions


https://docs.angularjs.org/guide/expression

簡単に言うと・・・• 値がundefinedでなければ最初の$digestで値が保持される。

• 逆にいうとundefinedである間は値が固定されない。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




配列に付けた場合

<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)2


http://frontainer.com/ligblog-sample/angular-one-time-binding/demo3-2/


配列内のプロパティに付けた場合

<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)3




配列と配列内のプロパティに付けた場合

<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)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©"2014"LIG"INC."@frontainer






Dirty&Checking

そこの値を変えなければ良いということではなく、watch対象の値は変更されていないことをチェックされるsrc/ng/rootScope.js.7262836

Object.observeの普及はいつになることやら


https://github.com/angular/angular.js/blob/master/src/ng/rootScope.js#L726-L836

まとめ• 双方向バインディングが必要でない場合は適切にOne%&me(

Bindingしていく

• Watch数をパフォーマンスチェック指標のひとつに

今回はChrome拡張の「Angular-watchers」を使って確認しました


https://chrome.google.com/webstore/detail/angular-watchers/nlmjblobloedpmkmmckeehnbfalnjnjk

ご静聴ありがとうございました本日のサンプルはこちら

h"ps://github.com/frontainer/ligblog6sample

スライドはこちら

h"p://www.slideshare.net/frontainer


https://github.com/frontainer/ligblog-sample

http://www.slideshare.net/frontainer

Technology

One-time Binding & $digest