7

コントローラーを作成するときは、次の$scopeように常に関数をオブジェクトに追加します。

function DummyController($scope) {

  $scope.importantFunction = function () { /*...*/ };

  $scope.lessImportantFunction = function () { /*...*/ };

  $scope.bussinessLogicFunction = function () { /*...*/ };

  $scope.utilityFunction = function () { /*...*/ };

}

もちろん、ビジネス ロジックが適切なコンポーネント (DI 経由で注入) またはサービスにあることを確認して、コントローラーを適切にカプセル化したままにしています。そのため、コントローラーは UI とバックエンドの間の調整に重点を置いています。

ただし、ご覧のとおり、さまざまな種類の関数がまだたくさんあります。読みやすさが向上するため、私はそれらをもっと保持するのが好きです。

質問 $scope オブジェクトに多くの関数をアタッチすることは良い習慣ですか? パフォーマンスのオーバーヘッドはありますか? $scopeこれは特別な種類のオブジェクトであり、Angular のダイジェスト サイクルで常に評価されていることを私は知っています。

(注: 私は別のアプローチを探しているわけではありません。Angular の内部構造を知っている人々のよく考えられた分析を探しています。)

どうも！

アップデート：

Anders からの回答は非常に優れており、従うべきいくつかの道筋を示しています。今日、Angular Js のデバッグとパフォーマンス監視のための chrome 拡張機能であるこの美しさに出くわしました。すべてのスコープと割り当てられた変数が、いくつかの興味深いパフォーマンス グラフと共に表示されます。Angular 開発者の必需品です。

4

1 に答える 1

16

アップデート：

  1. すべての関数と変数をスコープに追加する必要がありますか？

    いいえ、テンプレートで関数と変数にアクセスする必要がある場合にのみ、スコープに関数と変数を追加する必要があります。コントローラ関数でのみアクセスされる変数は、スコープ上にあるべきではなく、コントローラ関数に対してローカルである必要があります。

  2. スコープに多くの関数を追加すると、パフォーマンスに影響しますか？

    一般的にはありません。のように実行されるスコープ上の関数は、ng-click="myFunction()"パフォーマンスに目立った影響を与えるべきではありません。ただし、関数が次のよう{{myFunction()}}に実行されると、AngularはUIを更新できるように戻り値が変更されたかどうかを知る必要があるため、ダイジェストごとに実行されます。

  3. スコープに多くの変数を追加すると、パフォーマンスに影響しますか？

    Angularがダーティチェックを行う場所で使用すると、パフォーマンスに影響を与える可能性があります。これらのケースは、、などで使用する場合のように印刷する場合{{myVariable}}です。のようなディレクティブはダーティチェックを実行しないため、速度が低下することはありません。Angularの背後にいる人たちは、1ページで2000を超える式を使用しないことをお勧めします。これは、その後、パフォーマンスが低下し始めるため、再描画/ダーティチェックが必要になります。2000の限界は、Angularでのパフォーマンスの調査中に彼らが見つけたものです。ng-model="myVariable"ng-show="myVariable"ng-click

    スコープにプロパティを追加したからといって、Angularがそのプロパティに対してダーティチェックを実行するわけではないことに注意してください。ダーティチェックを実行するには、テンプレートで使用する必要があります（ただし、ng-clickでは使用しないでください）。

  4. Angularアプリで最大のパフォーマンスが必要な場合、何に注意する必要がありますか？

    前述のように、バインドされたテンプレート式の数を2000未満に保つようにしてください。また、スコープにウォッチを実装する場合は、ウォッチの式が非常に高速に実行されることを確認してください。これはあなたがそれをすべきではない方法の例です：

    $scope.items = [];
for (var i = 0; i < 1000; i++) {
    $scope.items.push({prop1: 'val1', prop2: 'val2', prop3: 'val3'});
}

$scope.$watch('items', function() {

}, true);

    $ watchに3番目の引数としてを追加することで、ダイジェストサイクルごとtrueにループして、千個のアイテムのプロパティが変更されたかどうかを確認するようにAngularに指示します。これは、時間とメモリの両方でコストがかかります。$scope.items

    代わりにすべきことは次のとおりです。

    $scope.items = [];
for (var i = 0; i < 1000; i++) {
    $scope.items.push({prop1: 'val1', prop2: 'val2', prop3: 'val3'});
}

$scope.$watch('items.length', function() {

});

    つまり、$scope.items.length変更された場合にのみチェックします。その式は非常に高速に実行されます。

元の投稿：

質問が「オブジェクトよりも関数をテンプレートに公開する方が良いか」という場合は、はい、できる限り関数を使用する必要があります。このようにして、ロジックをテンプレートにブリードさせるのではなく、コントローラー内にカプセル化します。この例を見てください：

<div ng-show="shouldShow">Toggled div</div>
<button ng-click="shouldShow = !shouldShow">Toggle<button>

ここで、テンプレートには何が起こっているかについて少し知識が多すぎます。代わりに、これは次のように解決する必要があります。

// controller
var shouldShow = false;
scope.toggle = function() {
    shouldShow = !shouldShow;
}
scope.shouldShow = function() {
    return shouldShow;
}

<!-- template -->
<div ng-show="shouldShow()">Toggled div</div>
<button ng-click="toggle()">Toggle<button>

このようにすることで、テンプレートに触れることなくコントローラーのロジックを拡張するのは簡単です。現在の要件は、ボタンを押したときにdivを切り替えることだけかもしれませんが、明日の要件は、それが発生したときにアプリケーションの他の部分を更新することかもしれません。また、代わりに関数を使用する場合は、テンプレートを変更せずに、関数内にそのロジックを簡単に追加できます。

スコープ上の関数には、プロパティを使用するよりも少しオーバーヘッドがありますが、そのオーバーヘッドは、その日が来たときにアプリの速度を低下させるものではない可能性があります。したがって、意味のあるときに関数を使用してください。

ただし、コントローラーをできるだけ小さくするようにしてください。それらが大量の機能/機能を含むように成長した場合は、おそらくコントローラーを再利用可能なディレクティブに分割する必要があります。

于 2013-02-22T08:21:07.513 に答える