フレームワークでデータバインディングはどのように機能しますAngularJSか？
彼らのサイトで技術的な詳細を見つけられませんでした。データがビューからモデルに伝播されるときにどのように機能するかは、多かれ少なかれ明確です。しかし、AngularJSはセッターとゲッターなしでモデルプロパティの変更をどのように追跡しますか？
この作業を行う可能性のあるJavaScriptウォッチャーがあることがわかりました。ただし、 InternetExplorer6およびInternetExplorer7ではサポートされていません。では、AngularJSは、たとえば次のように変更し、この変更をビューに反映したことをどのように認識しますか？
myobject.myproperty="new value";
AngularJSは値を記憶し、それを前の値と比較します。これは基本的なダーティチェックです。値に変更がある場合は、変更イベントが発生します。
$apply()非AngularJSワールドからAngularJSワールドに移行するときに呼び出すメソッドは、を呼び出します$digest()。ダイジェストは単なる古いダーティチェックです。すべてのブラウザで動作し、完全に予測可能です。
ダーティチェック（AngularJS）と変更リスナー（KnockoutJSおよびBackbone.js）を対比するために：ダーティチェックは単純で非効率に見えるかもしれませんが（後で説明します）、常に意味的に正しいことがわかります。一方、変更リスナーには多くの奇妙なコーナーケースがあり、より意味的に正しくするために依存関係の追跡などが必要です。KnockoutJSの依存関係の追跡は、AngularJSにはない問題に対する巧妙な機能です。
したがって、ダーティチェックは非効率的であるため、時間がかかるように見える場合があります。ここで、理論的な議論だけでなく実数を調べる必要がありますが、最初にいくつかの制約を定義しましょう。
人間は：
遅い— 50ミリ秒より速いものは人間には知覚できないため、「インスタント」と見なすことができます。
制限付き—1ページに約2000個を超える情報を人間に表示することはできません。それ以上のものは本当に悪いUIであり、人間はとにかくこれを処理することはできません。
だから本当の質問はこれです：あなたは50ミリ秒でブラウザ上で何回の比較をすることができますか？多くの要因が関係してくるため、これは答えるのが難しい質問ですが、ここにテストケースがあります：http：//jsperf.com/angularjs-digest/6これは10,000人のウォッチャーを作成します。最新のブラウザでは、これには6ミリ秒弱かかります。Internet Explorer 8では、約40ミリ秒かかります。ご覧のとおり、これは最近の低速ブラウザでも問題にはなりません。注意点があります：比較は制限時間に収まるように単純である必要があります...残念ながら、遅い比較をAngularJSに追加するのは簡単すぎるため、自分が何であるかわからない場合は遅いアプリケーションを簡単に構築できますやっている。しかし、遅い比較であるかを示すインストルメンテーションモジュールを提供することで答えが得られることを望んでいます。
ビデオゲームとGPUは、特に一貫性があるため、ダーティチェックアプローチを使用していることがわかりました。モニターのリフレッシュレート（通常は50〜60 Hz、または16.6〜20ミリ秒ごと）を超える限り、それを超えるパフォーマンスは無駄になるため、FPSを高くするよりも、より多くのものを描画する方が適切です。
Miskoは、データバインディングがどのように機能するかについてすでに優れた説明をしましたが、データバインディングのパフォーマンスの問題についての私の見解を追加したいと思います。
Miskoが述べたように、約2000のバインディングで問題が発生し始めますが、とにかく1ページに2000を超える情報を含めるべきではありません。これは真実かもしれませんが、すべてのデータバインディングがユーザーに表示されるわけではありません。双方向バインディングを使用してあらゆる種類のウィジェットまたはデータグリッドの構築を開始すると、UXが悪くなることなく、簡単に2000バインディングに到達できます。
たとえば、テキストを入力して使用可能なオプションをフィルタリングできるコンボボックスについて考えてみます。この種のコントロールには最大150個のアイテムがあり、それでも非常に使いやすくなっています。追加機能がある場合（たとえば、現在選択されているオプションの特定のクラス）、オプションごとに3〜5個のバインディングを取得し始めます。これらのウィジェットのうち3つをページに配置すると（たとえば、1つは国を選択し、もう1つはその国の都市を選択し、3つ目はホテルを選択します）、すでに1000から2000の範囲のバインディングになっています。
または、企業のWebアプリケーションのデータグリッドについて考えてみます。1ページあたり50行は不合理ではなく、各行に10〜20列が含まれる可能性があります。これをng-repeatsで構築する場合、および/またはいくつかのバインディングを使用するいくつかのセルに情報がある場合、このグリッドだけで2000のバインディングに近づく可能性があります。
AngularJSを使用する場合、これは大きな問題であることがわかります。これまでに見つけた唯一の解決策は、ngOnceを使用する代わりに、双方向バインディングを使用せずにウィジェットを作成するか、ウォッチャーや同様のトリックを登録解除するか、作成することです。 jQueryとDOM操作を使用してDOMを構築するディレクティブ。これは、そもそもAngularを使用する目的に反していると思います。
これを処理する他の方法についての提案を聞きたいのですが、それなら私自身の質問を書くべきかもしれません。これをコメントに入れたかったのですが、長すぎることがわかりました...
TL; DR
データバインディングは、複雑なページでパフォーマンスの問題を引き起こす可能性があります。
$scopeオブジェクトをダーティチェックすることによってAngulararrayは、オブジェクト内の単純なウォッチャーを維持し$scopeます。いずれかを調べると、呼び出さ$scopeれたが含まれていることがわかります。array$$watchers
各ウォッチャーは、objectとりわけ含まれています
attribute名前か、もっと複雑なものかもしれません。$scopeをダーティとしてマークします。AngularJSでウォッチャーを定義する方法はたくさんあります。
明示的にオンにすることが$watchできattributeます$scope。
$scope.$watch('person.username', validateUnique);
テンプレートに補間を配置でき{{}}ます（現在のウォッチャーが作成されます$scope）。
<p>username: {{person.username}}</p>
ng-modelウォッチャーを定義するなどのディレクティブを要求できます。
<input ng-model="person.username" />
$digestウォッチャーを最後の値と照合します通常のチャネル（ng-model、ng-repeatなど）を介してAngularJSと対話すると、ディレクティブによってダイジェストサイクルがトリガーされます。
ダイジェストサイクルは、そのすべての子の深さ優先探索$scopeです。それぞれについて$scope object、その反復を繰り返し、$$watchers arrayすべての式を評価します。新しい式の値が最後の既知の値と異なる場合、ウォッチャーの関数が呼び出されます。この関数は、DOMの一部を再コンパイルし、の値を再計算し$scope、トリガーしAJAX request、必要なことは何でも行うことができます。
すべてのスコープがトラバースされ、すべてのウォッチ式が評価され、最後の値と照合されます。
$scopeは汚れていますウォッチャーがトリガーされると、アプリは何かが変更されたことを認識し、$scopeがダーティとしてマークされます。
ウォッチャー関数は、親上$scopeまたは親上の他の属性を変更できます$scope。1つの$watcher関数がトリガーされた場合、他$scopeの関数がまだクリーンであることを保証できないため、ダイジェストサイクル全体を再度実行します。
これは、AngularJSには双方向のバインディングがあるため、データを$scopeツリーに戻すことができるためです。$scopeすでに消化されている高い方の値を変更する場合があります。おそらく、の値を変更します$rootScope。
$digestが汚れている場合は、$digestサイクル全体を再度実行します$digestダイジェストサイクルがクリーンになるか（すべての$watch式が前のサイクルと同じ値になる）、またはダイジェスト制限に達するまで、サイクルを継続的にループします。デフォルトでは、この制限は10に設定されています。
ダイジェスト制限に達すると、AngularJSはコンソールでエラーを発生させます：
10 $digest() iterations reached. Aborting!
ご覧のとおり、AngularJSアプリで何かが変更されるたびに、AngularJSは$scope階層内のすべてのウォッチャーをチェックして応答方法を確認します。開発者にとって、これは生産性の大きな恩恵です。配線コードをほとんど記述する必要がないため、AngularJSは値が変更されたかどうかを認識し、アプリの残りの部分を変更と一致させます。
マシンの観点からは、これは非常に非効率的であり、ウォッチャーを作成しすぎるとアプリの速度が低下します。Miskoは、古いブラウザでアプリが遅く感じる前に、約4000人のウォッチャーの数字を引用しています。
この制限は、たとえばng-repeat大きなものを超えた場合に簡単に到達できます。JSON arrayワンタイムバインディングなどの機能を使用して、ウォッチャーを作成せずにテンプレートをコンパイルすることで、これを軽減できます。
ユーザーがアプリを操作するたびに、アプリ内のすべてのウォッチャーが少なくとも1回評価されます。AngularJSアプリを最適化することの大きな部分は、$scopeツリー内のウォッチャーの数を減らすことです。これを行う簡単な方法の1つは、1回のバインディングを使用することです。
めったに変更されないデータがある場合は、次のように::構文を使用して1回だけバインドできます。
<p>{{::person.username}}</p>
また
<p ng-bind="::person.username"></p>
バインディングは、含まれているテンプレートがレンダリングされ、データがにロードされたときにのみトリガーされ$scopeます。
ng-repeatこれは、アイテムが多い場合に特に重要です。
<div ng-repeat="person in people track by username">
{{::person.username}}
</div>
これが私の基本的な理解です。間違っているかもしれません！
$watchアイテムは、関数（監視対象を返す）をメソッドに渡すことによって監視されます。$apply監視対象アイテムへの変更は、メソッドによってラップされたコードのブロック内で行う必要があります。$applyメソッド$digestが呼び出され、各ウォッチを調べて、前回の$digest実行以降に変更されたかどうかを確認します。$apply通常の開発では、HTMLのデータバインディング構文により、AngularJSコンパイラーにウォッチを作成するように指示され、コントローラーメソッドは既に内部で実行されています。したがって、アプリケーション開発者にとっては、すべて透過的です。
私はしばらくこれを自分で疑問に思いました。セッターがいない場合、オブジェクトAngularJSの変更にどのように通知しますか？$scopeそれらをポーリングしますか？
実際に行うことは次のとおりです。モデルを変更する「通常の」場所は、の内臓からすでに呼び出されているため、コードの実行後AngularJSに自動的に呼び出されます。$applyコントローラに、ng-clickある要素に接続されたメソッドがあるとします。そのメソッドの呼び出しを一緒に配線するため、適切な場所でAngularJSを実行する機会があります。$apply同様に、ビューに直接表示される式の場合、それらはによって実行されるAngularJSため、$apply。
ドキュメントが、の外部の$applyコードを手動で呼び出す必要があることについて説明している場合、実行時に呼び出しスタック内のコード自体に由来しないコードについて説明しています。AngularJSAngularJS
写真で説明する：
スコープ内の参照は、テンプレート内の参照とは正確には異なります。2つのオブジェクトをデータバインドする場合、最初のオブジェクトをリッスンし、もう一方を変更する3番目のオブジェクトが必要です。
ここで、を変更するときは、 data-ref3<input>にタッチします。そして、古典的なデータバインドメカニズムはdata- ref4を変更します。では、他の式はどのように動くのでしょうか？{{data}}
AngularはすべてのバインディングのoldValueとを維持します。newValueそして、Angularイベントが発生するたびに、有名な$digest()ループがウォッチリストをチェックして、何かが変更されたかどうかを確認します。これらのAngularイベントはng-click、、、完了しています...がと異なる限り、はループしng-changeます。$http$digest()oldValuenewValue
前の図では、data-ref1とdata-ref2が変更されていることがわかります。
卵と鶏肉に少し似ています。誰が開始するかはわかりませんが、ほとんどの場合、期待どおりに機能することを願っています。
もう1つのポイントは、単純なバインディングがメモリとCPUに与える影響を簡単に理解できることです。うまくいけば、デスクトップはこれを処理するのに十分太いです。携帯電話はそれほど強力ではありません。
Scope明らかに、それに接続されているオブジェクトに変更があるかどうかの定期的なチェックはありません。スコープにアタッチされているすべてのオブジェクトが監視されるわけではありません。スコープは通常、$$watchersを維持します。が呼び出された場合にScopeのみ、これを繰り返します。$$watchers$digest
Angularは、これらのそれぞれの$$watchersにウォッチャーを追加します
- {{expression}} —テンプレート（および式がある他の場所）で、またはng-modelを定義するとき。
- $scope。$watch（'expression / function'）— JavaScriptでは、Angularが監視するスコープオブジェクトをアタッチするだけです。
$ watch関数は、次の3つのパラメーターを取ります。
1つ目は、オブジェクトを返すだけのウォッチャー関数です。または、式を追加するだけです。
2つ目は、オブジェクトに変更があったときに呼び出されるリスナー関数です。DOMの変更などすべてがこの関数に実装されます。
3つ目は、ブール値を受け取るオプションのパラメーターです。真の場合、Angular Deepはオブジェクトを監視し、falseの場合、Angularはオブジェクトを参照監視します。$watchの大まかな実装は次のようになります
Scope.prototype.$watch = function(watchFn, listenerFn) {
var watcher = {
watchFn: watchFn,
listenerFn: listenerFn || function() { },
last: initWatchVal // initWatchVal is typically undefined
};
this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers
};
Angularにはダイジェストサイクルと呼ばれる興味深いものがあります。$digestサイクルは$scope。$digest（）の呼び出しの結果として開始されます。ng-clickディレクティブを使用してハンドラー関数の$scopeモデルを変更するとします。その場合、AngularJSは$ digest（）を呼び出すことで$ digestサイクルを自動的にトリガーします。ng-clickに加えて、モデルを変更できる組み込みのディレクティブ/サービスがいくつかあります（ng-model、$ timeoutなど）。 $digestサイクルを自動的にトリガーします。$digestの大まかな実装は次のようになります。
Scope.prototype.$digest = function() {
var dirty;
do {
dirty = this.$$digestOnce();
} while (dirty);
}
Scope.prototype.$$digestOnce = function() {
var self = this;
var newValue, oldValue, dirty;
_.forEach(this.$$watchers, function(watcher) {
newValue = watcher.watchFn(self);
oldValue = watcher.last; // It just remembers the last value for dirty checking
if (newValue !== oldValue) { //Dirty checking of References
// For Deep checking the object , code of Value
// based checking of Object should be implemented here
watcher.last = newValue;
watcher.listenerFn(newValue,
(oldValue === initWatchVal ? newValue : oldValue),
self);
dirty = true;
}
});
return dirty;
};
JavaScriptのsetTimeout（）関数を使用してスコープモデルを更新する場合、Angularには何を変更する可能性があるかを知る方法がありません。この場合、$ apply（）を手動で呼び出すのは私たちの責任であり、これにより$digestサイクルがトリガーされます。同様に、DOMイベントリスナーを設定し、ハンドラー関数内の一部のモデルを変更するディレクティブがある場合は、$ apply（）を呼び出して、変更が有効になるようにする必要があります。$ applyの大きなアイデアは、Angularを認識しないコードを実行できることです。そのコードは、スコープの内容を変更する可能性があります。そのコードを$applyでラップすると、$ digest（）の呼び出しが処理されます。$ apply（）の大まかな実装。
Scope.prototype.$apply = function(expr) {
try {
return this.$eval(expr); //Evaluating code in the context of Scope
} finally {
this.$digest();
}
};
AngularJSは、 $ watch（）、$ digest（）、$ apply（）の3つの強力な関数を使用してデータバインディングメカニズムを処理します 。ほとんどの場合、AngularJSは$scope。$watch（）と$scope。$digest（）を呼び出しますが、場合によっては、これらの関数を手動で呼び出して新しい値で更新する必要があります。
$ watch（）：-
この関数は、$scopeの変数の変化を監視するために使用されます。これは、式、リスナー、および等価オブジェクトの3つのパラメーターを受け入れます。ここで、リスナーと等価オブジェクトはオプションのパラメーターです。
$ digest（） -
この関数は、$scopeオブジェクト内のすべてのウォッチとその子$scopeオブジェクト
（存在する場合）を繰り返し処理します。$ digest（）がウォッチを反復処理するとき、式の値が変更されたかどうかをチェックします。値が変更された場合、AngularJSは新しい値と古い値でリスナーを呼び出します。$ digest（）関数は、AngularJSが必要と判断したときに呼び出されます。たとえば、ボタンをクリックした後、またはAJAX呼び出しの後。AngularJSが$digest（）関数を呼び出さない場合があります。その場合、あなたはそれを自分で呼ぶ必要があります。
$ apply（） -
Angularは、AngularJSコンテキスト内にあるモデルの変更のみを自動的に魔法のように更新します。Angularコンテキスト外のモデル（ブラウザーのDOMイベント、setTimeout、XHR、サードパーティライブラリなど）で変更を行う場合は、$ apply（）を手動で呼び出して変更をAngularに通知する必要があります。$ apply（）関数の呼び出しが終了すると、AngularJSは内部で$ digest（）を呼び出すため、すべてのデータバインディングが更新されます。
たまたま、人のデータモデルをフォームにリンクする必要がありました。私が行ったのは、データをフォームに直接マッピングすることでした。
たとえば、モデルに次のようなものがある場合：
$scope.model.people.name
フォームの制御入力：
<input type="text" name="namePeople" model="model.people.name">
そうすれば、オブジェクトコントローラの値を変更すると、これがビューに自動的に反映されます。
私がモデルを渡した例は、サーバーデータから更新され、郵便番号を要求し、そのビューに関連付けられたコロニーと都市のリストをロードに基づいて要求し、デフォルトでユーザーに最初の値を設定する場合です。そして、これは私が非常にうまく機能しました。実際にはangularJS、モデルを更新するのに数秒かかることがあります。これを行うには、データを表示しながらスピナーを配置できます。
一方向のデータバインディングは、値がデータモデルから取得され、HTML要素に挿入されるアプローチです。ビューからモデルを更新する方法はありません。これは、従来のテンプレートシステムで使用されます。これらのシステムは、データを一方向にのみバインドします。
Angularアプリのデータバインディングは、モデルコンポーネントとビューコンポーネント間のデータの自動同期です。
データバインディングを使用すると、モデルをアプリケーションの信頼できる唯一の情報源として扱うことができます。ビューは常にモデルの投影です。モデルが変更された場合、ビューは変更を反映し、その逆も同様です。
これは、入力フィールドを使用したAngularJSとのデータバインディングの例です。後で説明します
HTMLコード
<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
<input type="text" ng-model="watchInput" Placeholder="type something"/>
<p>{{watchInput}}</p>
</div>
AngularJSコード
myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
//Your Controller code goes here
}]);
上記の例でわかるように、AngularJSはng-model、HTML要素、特にinputフィールドで何が起こるかをリッスンして監視するために使用します。何かが起こったら、何かをしなさい。私たちの場合、ng-modelは口ひげ表記を使用して、私たちのビューにバインドされています{{}}。入力フィールド内に入力されたものはすべて、画面に即座に表示されます。これが、AngularJSを最も単純な形式で使用するデータバインディングの美しさです。
お役に立てれば。
AngularJsは双方向のデータバインディングをサポートしています。
データにアクセスできることを意味します[表示]->[コントローラーとコントローラー]->[表示]
例の場合
1）
// If $scope have some value in Controller.
$scope.name = "Peter";
// HTML
<div> {{ name }} </div>
O / P
Peter
ng-modelLikeでデータをバインドできます：
-2）
<input ng-model="name" />
<div> {{ name }} </div>
上記の例では、ユーザーが入力するものは何でも、<div>タグで表示されます。
htmlからコントローラーに入力をバインドしたい場合：
-3）
<form name="myForm" ng-submit="registration()">
<label> Name </lbel>
<input ng-model="name" />
</form>
nameここで、コントローラーの入力を使用する場合は、
$scope.name = {};
$scope.registration = function() {
console.log("You will get the name here ", $scope.name);
};
ng-modelビューをバインドし、式でレンダリングします{{ }}。
ng-modelビューでユーザーに表示され、ユーザーが操作するデータです。
そのため、AngularJsでデータをバインドするのは簡単です。
Angular.jsは、ビューで作成するすべてのモデルのウォッチャーを作成します。モデルが変更されるたびに、「ng-dirty」クラスがモデルに追加されるため、ウォッチャーは、クラス「ng-dirty」を持つすべてのモデルを監視し、コントローラーで値を更新します。その逆も同様です。
データバインディング：
データバインディングとは何ですか？
ユーザーがビューのデータを変更するたびに、スコープモデルでその変更の更新が発生します。その逆も同様です。
どうしてそれは可能ですか？
簡単な答え： ダイジェストサイクルの助けを借りて。
説明： Angular jsは、スコープモデルにウォッチャーを設定します。これにより、モデルに変更があった場合にリスナー関数が起動されます。
$scope.$watch('modelVar' , function(newValue,oldValue){
//新しい値でコードを更新します
}）;
では、ウォッチャー関数はいつどのように呼び出されますか？
ウォッチャー関数は、ダイジェストサイクルの一部として呼び出されます。
ダイジェストサイクルは、ng-model、ng-bind、$ timeout、ng-clickなどの組み込みディレクティブ/サービスの一部として自動的にトリガーされるように呼び出されます。これにより、ダイジェストサイクルをトリガーできます。
ダイジェストサイクル機能：
$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope
すなわち$rootScope.$apply()
注：$ apply（）は$rootScope。$digest（）と同じです。これは、ダーティチェックがルートまたはトップまたは親スコープからAngularjsアプリケーションのすべての子$scopeまで開始されることを意味します。
上記の機能は、アプリケーションがangular jsアプリケーションであることを確認するだけで、前述のバージョンのブラウザーIEでも機能します。つまり、scriptタグで参照されているangularjsフレームワークスクリプトファイルを使用しています。
ありがとうございました。