web-dev-qa-db-ja.com

AngularJSのステートフルフィルタリングとは何ですか？

「フィルター」セクションでAngularJS開発者ガイドを読んでいて（ https://docs.angularjs.org/guide/filter#stateful-filters ）、「ステートフルフィルター」に遭遇しました。

この説明は次のとおりです。

ステートフルなフィルターの作成は、Angularによって最適化できないため、パフォーマンスの問題につながることが多いため、お勧めできません。多くのステートフルフィルターは、非表示の状態をモデルとして公開し、それをフィルターの引数に変えるだけで、ステートレスフィルターに変換できます。

私はウェブ開発を始めたばかりなので、ステートフルフィルタリングとは何なのかわかりません。また、Angularドキュメントでも説明されていません:(通常のフィルタとステートフルフィルターは？

javascriptangularjsfilter
43
alamoot

「状態」とは、アプリケーション全体で設定される変数/プロパティ/などを指します。これらの値は、いつでも変更される可能性があります。ドキュメントは、フィルターが外部の「状態」に依存してはならないと言っています。フィルターが知る必要があるものはすべて、フィルター処理時に引数として渡される必要があります。フィルターは、フィルター処理を実行し、結果を返すために必要なすべてのものを持つ必要があります。ドキュメントのデモをご覧ください。ステートフル」フィルターの場合、フィルターはフィルター処理に使用するサービスに依存します。そのサービス値は_$digest_サイクル中に変更される可能性があるため、Angularが再度フィルターを実行して確実に実行されるように、フィルターに_$stateful_プロパティを設定する必要があります依存関係の状態は変わりません。これにより、フィルターの結果が変わります。

したがって、次のように、すべての「状態」を引数に含める必要があります。

_<p>{{myData | multiplyBy:multiplier}}</p>
_

次のようなフィルターを使用します。

_.filter('multiplyBy', function() {
  function filter(input, multiplier) {
    return input * multiplier;
  }
  return filter;
})
_

データまたは引数が変更されると、フィルターが再度実行されます。

statefulバージョンは次のようになります（お勧めしません！）：

_<p>{{myData | myFilter}}</p>
_

そして、フィルターは、外部ソースから必要な情報を取得します。

_.filter('myFilter', ['someDependency', function(someDependency) {
  function filter(input) {
    // let's just say `someDependency = {multiplier: 3}`
    return input * someDependency.multiplier;
  }
  filter.$stateful = true;
  return filter;
}])
_

そのサンプルフィルターでは、_someDependency.multiplier_は、フィルターの依存関係ではなく、フィルターへの引数として渡される必要があります（最初の例のように）。

問題をさらに明確にするには：foo(20)のような関数を呼び出して_40_の結果を取得した場合、プロセスを繰り返しても同じ結果が得られます。再度foo(20)を呼び出して_92_を取得した場合、かなり混乱しますよね？ fooがランダムな値を返すように作られた関数ではないと仮定すると、毎回異なる数値を返すことができる唯一の方法は、隠された状態（何かが渡されるのではなく、内部的に変化する）引数として）。同じ引数が与えられるたびに関数が同じ値を返すという考え方は、「べき等」と呼ばれます。

注：_$stateful_はAngular 1.で新しく追加されたようです

69
m59