アングラルjs不要なウォッチを削除します.

8676 ワード

angglarjs $ウォッチ javascript

私たちのweb pageでは、特にモバイルデバイスでは、多くのanglar$watchが性能問題を引き起こす可能性があります.この記事は追加の$watchを除去する方法を説明します.アプリケーションの性能を向上させます.
$ウォッチはもう使わないなら、私達はそれをリリースしたほうがいいです.アングラーの中で私達は自由に選択できます.いつドルウォッチを米ドルウォッチのリストから削除しますか?
例を見てみましょう.

app = angular.module('app', []);app.controller('MainCtrl', function($scope) {$scope.updated = 0;$scope.stop = function() {textWatch();};var textWatch = $scope.$watch('text', function(newVal, oldVal) {if (newVal === oldVal) { return; }$scope.updated++;});});

<body ng-controller="MainCtrl"><input type="text" ng-model="text"/> `updated` times updated.<button ng-click="stop()">Stop countbutton>body>

$watch関数は$watchバインディングを解除するunbind関数を返します.したがって、私たちはwatchを変更する必要がなくなりました.この関数を使ってatchをリリースすることができます.
静的データからなるページ
会議セッションの予約ページを作成したいと思います.ページは次のような構造です.

app.controller('MainCtrl', function($scope) {$scope.sessions = [...];$scope.likeSession = function(session) {// Like the session}});

<ul><li ng-repeat="session in sessions"><div class="info">`session`.`name` - `session`.`room` - `session`.`hour` - `session`.`speaker`div><div class="likes">`session`.`likes` likes! <button ng-click="likeSession(session)">Like it!button>div>li>ul>

大きな予約だと仮定して、一日に30のsessionsがあります.ここでいくつのドルウォッチが生まれますか?ここでは各セッションには5つの結合があり、追加のng-repeatがあります.これは151個のwatchを生成します.何か問題がありますか?ユーザーが「like」をsessionする度に、angglarはnameが変更されているかどうかを確認します(他の属性も同じです).
問題は例外の「like」を除いて、すべてのデータは静的なデータです.これはちょっと資源を浪費しているのではないですか?私達は100%私達のデータが変わらないことを保証できます.なのになぜ私達はアングラーに変更を確認させますか?
解決策は簡単です.私たちは永遠に変わらない$ウォッチを除去します.Watchは第一に非常に重要で、静的な情報生産でDOM構造を更新しましたが、その後、永久に変更されない定数を傍受しました.これは明らかに大きな浪費です.
私を信じたらどう解決できますか?幸いなことに、これは私達の前にもこの問題を聞きました.一連の命令を作成してこれを実現しました.
Bindonce
Bindonceは一連のバインディングですが、watchのコマンドセットを持っていません.これは完璧に私たちのニーズに合っています.
Bindonceで私達のviewを再実現しましょう.

<ul><li bindonce ng-repeat="session in sessions"><div class="info"><span bo-text="session.name">span> -<span bo-text="session.room">span> -<span bo-text="session.hour">span> -<span bo-text="session.speaker">span>div><div class="likes">`session`.`likes` likes! <button ng-click="likeSession(session)">Like it!button>div>li>ul>

例を動作させるためには、私たちのアプリケーションにビエンスを導入しなければなりません.

app = angular.module('app', ['pasvaz.bindonce']);

ここではangglar表現をbo-textコマンドに変えました.このコマンドは私達のモデルを結びつけて、DOMを更新することを知っています.そしてバインディングを外します.これでviewを表示することができますが、必要でないバインディングを除去しました.
この例では、各sessionは一つのwatchバインディングしかないので、ここでは31個のバインディングで151個のバインディングを置換している.私たちは正確にビッグオンスを使うと、私たちのアプリケーションのために多くのドルウォッチバインディングを減らすことができます.
締め括りをつける
私たちの性能が避けられない最適化が必要な時、bindonceは$watchの性能のボトルネックから脱出するのを助けることができます.bindonceにはまだ多くのコマンドがあります.ここから検索できます.https://github.com/Pasvaz/bindonce#attribute-usage

JavaScript学習--day 01