web-dev-qa-db-ja.com

AngularJSは、変数がいつ変更されるかをどのように認識しますか？ AngularJSのダーティチェックはどのように機能しますか？

AngularJSがどのように機能するかをもう少し理解するために、私は記事を読んでいました。

私が理解していなかった用語の1つはDirty Checking。

正確には何ですか？オブザーバーパターンのように見えますが、明らかに優れているようです。

これを理解してください。

編集：それはまた、数年前にNgEuropeで このビデオ から swiip を見るためにそれについてもっと学びたい人々にとって有用であり得る。

javascriptangularjsobserver-pattern
52
mfrachet

このリンク から：

Angularは、いわゆるダイジェストサイクルの概念を定義します。このサイクルはループと見なすことができ、その間Angularはすべての$ scopesによって監視されているすべての変数に変更があるかどうかをチェックします。この変数が監視対象としてマークされている場合、Angular=ループの各反復でmyVarの変更を監視するように明示的に指示しています。

この「digest」は、「ダーティチェック」とも呼ばれます。これは、ある意味で、変更のスコープスキャンであるためです。観測可能なパターンよりも良いのか悪いのかは言えません。それはあなたのニーズ次第です。

いくつかのリンク：

54
lante

角度ダーティチェックメカニズムのワークフロー。

enter image description here

ダーティチェックは、非常に基本的な概念に要約される単純なプロセスです。アプリ全体でまだ同期されていない値が変更されたかどうかをチェックします。

Angularアプリは、現在の時計の値を追跡します。Angular値が変更された場合、アプリは新しい値を記録し、$ watchリストに進みます。

記事全体をここでチェックしてください

19
fluffyBatman

ダーティチェックとは？

変更を検出するためにすべてのウォッチをチェックするプロセスは、ダーティチェックと呼ばれます。 2つのシナリオがあります

最初の–

  1. リストから時計を取得する
  2. アイテムが変更されたかどうかを確認します
  3. アイテムに変更がない場合
  4. アクションは実行されません。監視リストの次の項目に移動します

秒–

  1. リストから時計を取得する
  2. アイテムが変更されたかどうかを確認します
  3. アイテムに変更がある場合
  4. DOMを更新する必要があり、ダイジェストループに戻る

2番目のケースでは、ループ全体で変更が見つからなくなるまでループが継続します。そして、完了すると、必要に応じてDOMが更新されます。

7
Sanjay Dwivedi

前の回答を変更するだけです...

Angularの概念は、「ダイジェストサイクル」です。ループと見なすことができます。その中でAngularは、すべての$ scopes（internally $ watch（）および$ apply（）関数が監視するすべての変数に変更があるかどうかをチェックします$ scope）で定義された各変数と結合されます。

コントローラで$ scope.myVarが定義されている場合（つまり、この変数 'myVar'が監視対象としてマークされていることを意味します）、明示的にAngularで 'myVar'の変更を監視しますループの各反復：したがって、 'myVar'の値が変更されると、$ watch（）が$ apply（）に気づいて実行し、変更をDOMに適用するたびに。

この「Digest」は「dirty checking」とも呼ばれます。これは、ある意味でスコープの変更をスキャンするためです。監視対象の変数はすべて単一のループ（ダイジェストサイクル）にあるため、変数の値を変更すると、DOMの他の監視対象変数の値を強制的に再割り当てします。

PROS：これが方法ですAngularは双方向データバインディングを実現します。

CONS：単一のページに監視変数が多い場合（> 2000–3000）、ページの読み込み中に遅延が発生する場合があります（ただし、単一の監視変数ページ、それは悪いページデザインです：p）。

他の短所があり、回避策もあります：D

4
Deepanjan Ghosh

このブログ投稿 のダーティチェックに関する素晴らしい記事を読みました。これもありました SO answer

TLDR;バージョン

$ digestサイクルが開始されると、ウォッチャーはスコープモデルの変更をチェックし、変更がある場合（変更はout-of-Angular-domainから生じる可能性もあります）、対応するリスナー関数が実行されます。これは再び$ digestループを実行し、スコープモデルが変更されたかどうかを確認します（リスナー関数はスコープモデルを変更することもできます）。

全体的に、リスナーがモデルを変更しなかったり、最大ループカウント10に達するまで、$ digestサイクルは2回実行されます。

2
Twin

ダーティチェックは、$ scope変数の変更をすべてチェックし、DOMに更新します。これはangular jsによって行われ、独自のダーティチェックを実装することもできます。

1
AbhishekIIIT