Mastering $ Watch in AngularJs

Kernpunkte

• Die $watch -Funktion in AngularJS ist ein leistungsstarkes Werkzeug zur Beobachtung von Änderungen der Variablenwerte oder -ausdrücke. Wenn eine Änderung erkannt wird, löst sie eine Rückruffunktion aus, die jedes Mal ausgeführt wird, wenn sich die überwachte Variable ändert.
• $watch Verwenden Sie den Gleichstellungsoperator von JavaScript (===) zum Vergleich. Wenn sich der neue Wert vom alten Wert unterscheidet, wird die Rückruffunktion ausgelöst. Es ist jedoch zu beachten, dass $watch standardmäßig nur die Referenzgleichheit überprüft, was bedeutet, dass die Rückruffunktion nur dann ausgelöst wird, wenn der überwachten Variablen ein neuer Wert zugewiesen wird.
• AngularJs liefert auch $watchGroup und $watchCollection als bequeme Verknüpfungen für das Einrichten mehrerer Monitore oder Überwachung von Arrays oder Objekten mit derselben Rückruffunktion. Diese Methoden führen jedoch nur eine flache Überwachung durch und reagieren jedoch nur auf Referenzänderungen.
• Verwenden von $watch, insbesondere bei mehreren Variablen, kann die Leistung beeinflussen, da Änderungen in allen überwachten Variablen für jeden Zusammenfassungszyklus überprüft werden müssen. Entwickler sollten in Betracht ziehen, je nach Situation $watchGroup oder $watchCollection zu verwenden oder die Anzahl der überwachten Variablen zu begrenzen, um die Leistung zu verbessern.

Dieser Artikel wurde von Mark Brown überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, um SitePoint -Inhalte in den Besten zu bringen!

AngularJS bietet viele verschiedene Optionen, um den Publish-Subscribe-Modus über drei verschiedene "Uhren" -Methoden zu verwenden. Jede Methode nimmt optionale Parameter an, um ihr Verhalten zu ändern.

Die offizielle Dokumentation über $watch ist alles andere als erschöpfend: Schließlich ist dies ein Problem, das AngularJS V1 als Ganzes stört. Sogar Online -Ressourcen, die erklären, wie man vorgeht, werden bestenfalls fragmentiert.

Letztendlich ist es für Entwickler schwierig, den richtigen Ansatz für eine bestimmte Situation zu wählen. Dies gilt insbesondere für Anfänger in AngularJs! Die Ergebnisse können überraschend oder unvorhersehbar sein, was zwangsläufig zu Fehlern führt.

In diesem Artikel werde ich annehmen, dass Sie mit dem AngularJS -Konzept vertraut sind. Wenn Sie das Gefühl haben, dass Sie es überprüfen müssen, müssen Sie möglicherweise über $scope, Bindungen und $apply und $digest lesen.

Überprüfen Sie Ihr Verständnis

Wie ist beispielsweise der beste Weg, um das erste Element eines Arrays zu überwachen? Angenommen, wir deklarieren ein Array in unserem Bereich, $scope.letters = ['A','B','C'];

• Wenn wir einem Array Elemente hinzufügen, wird $scope.$watch('letters', function () {...}); seine Rückruffunktion auslösen?
• Wenn wir sein erstes Element ändern, wird es dann feuern?
Wo ist
• $scope.$watch('letters[0]', function () {...});? Wird es genauso funktionieren oder ist es besser?
• oben ist das Array -Element der ursprüngliche Wert: Was ist, wenn wir das erste Element durch denselben Wert ersetzen?
• nehmen Sie jetzt an, dass das Array Objekte enthält: Was passiert?
Was ist der Unterschied zwischen
• $watch, $watchCollection und $watchGroup?

Wenn Sie von all diesen Fragen verwirrt sind, lesen Sie bitte weiter. Mein Ziel ist es, Sie durch den Prozess zu führen, indem Sie dies mit einigen Beispielen so klar wie möglich erklären.

$scope.$watch

Beginnen wir mit $scope.$watch. Hier ist der Kern aller Uhrenfunktionen: Jede andere Methode, die wir sehen werden, ist nur eine bequeme Abkürzung zu $watch.

Verwenden $watch

Der Vorteil von Angular besteht darin, dass Sie explizit denselben Mechanismus verwenden können, um komplexe Operationen auszuführen, die durch Datenänderungen im Controller ausgelöst werden. Sie können beispielsweise einen Monitor für bestimmte Daten einrichten, die als Antwort auf:

geändert werden können

1. Timeout
2. ui
3. komplexe asynchrone Berechnungen, die von Web Worker
durchgeführt wurden
4. ajax call

Sie können nur einen Hörer einrichten, um alle Datenänderungen umzugehen, unabhängig von der Ursache.

Um dies zu tun, müssen Sie sich selbst $scope.$watch anrufen.

Praktische Operation

Schauen wir uns den Code von $rootscope.watch() an.

Dies ist seine Signatur: function(watchExp, listener, objectEquality, prettyPrintExpression).

im Detail, seine vier Parameter:

1. watchExp überwachte Expression. Es kann eine Funktion oder eine Zeichenfolge sein und in jedem Verdauungszyklus bewertet.

   Ein wichtiger Aspekt, der hier beachtet wird, ist, dass Wenn der Ausdruck als Funktion bewertet wird, muss die Funktion idempotent sein. Mit anderen Worten, für denselben Eingabebereich sollte es immer dieselbe Ausgabe zurückgeben. Wenn dies nicht der Fall ist, wird Angular angenommen, dass die überwachten Daten geändert wurden. Dies bedeutet wiederum, dass es weiterhin Unterschiede erkennen und den Hörer in jeder Iteration des Verdauungszyklus aufrufen wird.

2. listener Eine Rückruffunktion, die beim ersten Einrichten des Monitors abgefeuert wird, und dann jedes Mal, wenn eine Änderung des watchExp -Werges während des Zusammenfassungszyklus erkannt wird. Der anfängliche Anruf bei der Einstellung soll den Anfangswert für den Ausdruck speichern.

3. objectEquality Der Monitor führt nur dann einen Tiefenvergleich durch, wenn dieser Wert wahr ist. Andernfalls führt es flache Vergleiche durch, d. H. Nur Vergleichsreferenzen.

   Nehmen wir Array als Beispiel: $scope.fruit = ["banana", "apple"];

   bedeutet, dass nur die Neuzuweisung des Feldes objectEquality == false den Hörer aufgerufen wird. fruit

   Wir müssen auch überprüfen, wie tief die „tiefe“ ist: Wir werden dies später besprechen.

4. prettyPrintExpression Wenn bestanden, wird der Überwachungsausdruck außer Kraft gesetzt. Dieser Parameter soll nicht in normalen Aufrufen zu $watch() verwendet werden.

   Vorsicht: Wie Sie sich selbst sehen können, sind unerwartete Ergebnisse anfällig für unerwartete Ergebnisse, wenn der vierte Parameter versehentlich übergeben wird.

Jetzt werden wir einige der Fragen in der Einführung beantworten. Bitte überprüfen Sie die Beispiele dieses Abschnitts:

codePen Beispiel

Sie können sich gerne mit ihnen vertraut machen.

Überwachungsarray

Sie müssen also das Array im Bereich des Geltungsbereichs überwachen, um Änderungen vorzunehmen, aber was bedeutet "ändert sich"?

Angenommen, Ihr Controller sieht so aus:

app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);

Eine Option besteht darin, einen Anruf wie diesen zu verwenden:

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});

haben im obigen Rückruf newValue und oldValue selbsterklärende Bedeutungen und werden jedes Mal aktualisiert, wenn der Zyklus $digest es nennt. Die Bedeutung von scope ist ebenfalls intuitiv, da sie Verweise auf den aktuellen Bereich enthält.

Aber der Schlüssel ist: Wann wird dieser Hörer angerufen? Tatsächlich können Sie Elemente in einem Array hinzufügen, löschen, ersetzen, ohne dass etwas passiert. Dies liegt daran, dass letters standardmäßig $watch vorausgeht, dass Sie nur Gleichstellung $scope.letters Referenz -Gleichstellung wünschen, sodass die Rückruffunktion nur dann ausgelöst wird, wenn Sie

einen neuen Wert zuweisen.

true Wenn Sie Maßnahmen zu Änderungen an jedem Element des Arrays ergreifen müssen, müssen Sie watch als dritter Parameter an objectEquality übergeben (d. H. Als Wert des oben beschriebenen optionalen Parameters).

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
}, true);

Überwachungsobjekt

Für Objekte ändert sich die Situation nicht: Wenn objectEquality falsch ist, überwachen Sie nur eine Neuzuweisung in diese Umfangsvariable, und wenn wahr, wird die Rückruffunktion jedes Mal ausgelöst, wenn das Element im Objekt geändert wird.

Das erste Element des Überwachungsarrays

Es ist erwähnenswert, dass durch die Überwachung des Arrays mit objectEquality === true, wenn die Rückruffunktion ausgelöst wird, newValue und oldValue die alten und neuen Werte des gesamten Arrays sind. Sie müssen sie also miteinander vergleichen, um zu verstehen, was sich tatsächlich ändert.

Angenommen, Sie interessieren sich nur für Änderungen des ersten Elements (oder des vierten Elements-das gleiche Prinzip) im Array. Da Angular ausgezeichnet ist, können Sie dies tun: Sie können es auf natürliche Weise in dem Ausdruck ausdrücken, der an $watch als erstes Argument übergeben wird:

$scope.$watch('letters[4]', function (newValue, oldValue, scope) {
    //...
}, true);

Was passiert, wenn das Array nur 2 Elemente hat? Kein Problem, Ihre Rückruffunktion wird nicht abgefeuert, es sei denn, Sie fügen ein viertes Element hinzu. OK OK, technisch wird es ausgelöst, wenn Sie den Monitor einrichten, und dann nur, wenn Sie das vierte Element hinzufügen.

Wenn Sie oldValue aufzeichnen, werden Sie feststellen, dass es in beiden Fällen undefiniert ist. Vergleichen Sie dies mit dem, was passiert, wenn Sie vorhandene Elemente überwachen: Beim Einrichten haben Sie immer noch oldValue == undefined. Also kann $watch nicht verarbeitet werden!

Eine interessantere Frage jetzt: Müssen wir hier objectEquality === true bestehen?

kurze Antwort: Entschuldigung, es gibt keine kurze Antwort.

Es hängt wirklich von:

ab

• In diesem Beispiel benötigen wir, da wir am ursprünglichen Wert arbeiten, keine Tiefenvergleiche, sodass wir objectEquality weglassen können.
• Aber, nehmen wir an, wir haben beispielsweise eine Matrix $scope.board = [[1, 2, 3], [4, 5, 6]]; Dann möchten wir vielleicht eine Warnung erhalten, wenn eine Aufgabe wie $scope.board[0][1] = 7 sie ändert.

Felder der Überwachungsobjekte

Vielleicht nützlicher, als jedes Element in einem Array zu überwachen, können wir jedes Feld in einem Objekt überwachen. Aber das ist nicht überraschend, oder? Schließlich ist ein Array in JavaScript ein -Objekt.

app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);

Wie tief ist die Tiefe?

Zu diesem Zeitpunkt müssen wir auch ein letztes, aber entscheidendes Detail klären: Was passiert, wenn wir ein komplexes verschachteltes Objekt überwachen müssen, bei dem jedes Feld ein nicht primitiver Wert ist? Zum Beispiel ein Baum oder ein Diagramm oder nur einige JSON -Daten.

Schauen wir es uns an!

Zunächst brauchen wir ein Objekt, um zu überwachen:

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});

Lassen Sie uns den Monitor für das gesamte Objekt einrichten: Ich denke, bisher ist klar, dass in diesem Fall objectEquality auf true festgelegt werden muss.

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
}, true);

Die Frage lautet: Wenn Aufträge wie $scope.b.bb[1].bb2a = 7; passieren, wird Angular so freundlich sein, uns wissen zu lassen?

Die Antwort lautet: Ja, zum Glück wird es (siehe in der vorherigen Codepen -Demo).

Andere Methoden

$scope.$watchGroup

$watchGroup() Ist es wirklich ein anderer Ansatz? Die Antwort lautet nein, es ist nicht so.

$watchGroup() ist eine bequeme Verknüpfung, mit der Sie mehrere Monitore mit derselben Rückruffunktion einrichten und ein Array von watchExpressions übergeben können.

Jeder bestandene Ausdruck wird mit der Standard -Methode $scope.$watch() überwacht.

$scope.$watch('letters[4]', function (newValue, oldValue, scope) {
    //...
}, true);

Es ist erwähnenswert, dass die Verwendung von $watchGroup, newValues und oldValues die Liste der Werte des Ausdrucks, einschließlich der Werte, die sich geändert haben Die Reihenfolge von ihnen im ersten Parameter ist die Reihenfolge der Übergabe im Array gleich.

Wenn Sie die Dokumentation für diese Methode überprüft haben, können Sie feststellen, dass die Option objectEquality nicht übernimmt. Dies liegt daran, dass es flache Ausdrücke überwacht und nur auf Verweise reagiert.

Wenn Sie die folgende $watchGroup() -Demo verwenden, werden Sie möglicherweise von einigen Feinheiten überrascht sein. Zum Beispiel wird unshift zumindest bis zu einem gewissen Grad der Hörer aufgerufen: Dies liegt daran, dass bei der Übergabe der Expressionsliste an $watchGroup alle einen Ausdruck auslöst, der zur Ausführungs -Rückruffunktion führt.

codePen Beispiel

Beachten Sie auch, dass Änderungen an einem Unterfeld von

keine Aktualisierungen erstellen. Aktualisierungen werden nur dann generiert, wenn dem Feld B selbst ein neuer Wert zugewiesen wird. $scope.obj.b

$scope.$watchCollection

Dies ist eine weitere bequeme Abkürzung, um Arrays oder Objekte zu überwachen. Für Arrays wird der Hörer aufgerufen, wenn ein Element ersetzt, gelöscht oder hinzugefügt wird. Bei Objekten, wenn Eigenschaften geändert werden. Auch hier erlaubt

nicht $watchCollection(), daher überwacht es nur flach Elemente/Felder und reagiert nicht auf Änderungen in ihren Unterfeldern. objectEquality

codePen Beispiel

Schlussfolgerung

hoffe, dass diese Beispiele Ihnen helfen, die Kraft dieser Winkelfunktion zu entdecken und zu verstehen, wie wichtig es ist, die richtigen Optionen zu verwenden.

Fühlen Sie sich frei, CodePen zu kopieren und diese Methoden in verschiedenen Kontexten zu verwenden, und vergessen Sie nicht, Ihr Feedback im Kommentarbereich zu hinterlassen!

Wenn Sie sich einige der Konzepte, die wir in diesem Artikel besprochen haben

AngularJS Scope

1. Verstehe Angular's
und
2. $apply() $digest() aufkommende Muster in der JavaScript -Ereignisverarbeitung
Prototyperitanz im AngularJS Scope
4. Dokumente von
5. usw. $watch

FAQs (FAQ) $watch In AngularJS

$watch Was ist der Hauptzweck bei AngularJs?

Die $watch -Funktion in AngularJs wird hauptsächlich verwendet, um Änderungen des Wertes einer Variablen oder einer Expression zu beobachten. Es ist Teil von AngularJS Scoped -Objekt, um Änderungen des Wertes einer Variablen oder eines Ausdrucks zu überwachen. Wenn eine Änderung erkannt wird, löst die Funktion $watch eine Rückruffunktion aus, die jedes Mal ausgeführt wird, wenn sich die überwachte Variable ändert.

$watch Wie funktioniert es in AngularJs?

Die $watch -Funktion in AngularJs funktioniert, indem die alten und neuen Werte der überwachten Variablen oder der überwachten Expression verglichen werden. Es verwendet den Gleichstellungsoperator von JavaScript (===) zum Vergleich. Wenn sich der neue Wert vom alten Wert unterscheidet, löst die $watch -Funktion die Rückruffunktion aus.

Wie benutze ich $watch in AngularJs?

Um $watch in AngularJS zu verwenden, müssen Sie die $watch -Methode im Bereichsobjekt aufrufen und zwei Parameter übergeben: den Namen der zu überwachenden Variablen oder des Ausdrucks, und erfolgt, wenn die Variable, die der Rückruf überwacht wird Funktionen bei der Änderung ausführen. Hier ist ein Beispiel:

app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);

Was ist der Unterschied zwischen

$watch und $apply in AngularJs?

Die

-Funktion in $watch in angularJS wird verwendet, um Änderungen in Variablen oder Ausdrücken zu beobachten, während die $apply -Funktion verwendet wird entsprechend. Die $apply -Funktion wird normalerweise verwendet, wenn Modelländerungen außerhalb des AngularJS -Kontexts wie im DOM -Ereignishandler oder in der setTimeout -Funktion vornehmen.

Kann ich mehrere Variablen in AngularJs mit $watch überwachen?

Ja, Sie können $watch verwenden, um mehrere Variablen in AngularJs zu überwachen. Sie können dies tun, indem Sie ein Array von variablen Namen an die $watch -Funktion übergeben. Denken Sie jedoch daran, dass die Überwachung mehrerer Variablen die Leistung beeinflussen kann, da die $watch -Funktion auf Änderungen in allen überwachten Variablen in jedem Digest -Zyklus prüfen muss.

Wie höre ich die Überwachung von Variablen in $watch in AngularJs auf?

Wenn Sie die $watch -Funktion in AngularJS aufrufen, wird eine Abmeldungsfunktion zurückgegeben. Sie können diese Funktion aufrufen, um die Überwachung von Variablen zu beenden. Hier ist ein Beispiel:

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});

Was ist $watchGroup in AngularJs?

Die $watchGroup -Funktion in AngularJS wird verwendet, um einen Satz von Ausdrücken zu überwachen. Es funktioniert wie die $watch -Funktion, löst jedoch die Rückruffunktion pro Digest -Zyklus aus, auch wenn sich mehrere überwachte Ausdrücke ändern. Dies kann die Leistung bei der Überwachung mehrerer Ausdrücke verbessern.

Was ist $watchCollection in AngularJs?

Die $watchCollection -Funktion in AngularJS wird verwendet, um die Attribute eines Objekts oder Elemente eines Arrays zu überwachen. Es löst die Rückruffunktion so lange aus, wie sich jedes Attribut oder Element ändert, aber im Gegensatz zu $watch überwacht es nicht zutiefst Objekte oder Arrays, was die Leistung verbessern kann.

Kann ich $watch in der AngularJS -Richtlinie verwenden?

Ja, Sie können in der AngularJS -Direktive $watch verwenden. Tatsächlich ist es üblich, $watch in Anweisungen zu verwenden, um auf Änderungen in Attributen oder Umfangsvariablen von Richtlinien zu reagieren.

Was sind die Leistungsüberlegungen in AngularJs mit $watch?

Verwenden von $watch in AngularJs kann die Leistung beeinflussen, insbesondere wenn viele Variablen oder Ausdrücke überwacht werden. Dies liegt daran, dass die $watch -Funktion die Änderungen aller überwachten Variablen in jedem Verdauungszyklus überprüfen muss. Um die Leistung zu verbessern, sollten Sie $watchGroup oder $watchCollection gemäß der Situation verwenden oder die Anzahl der überwachten Variablen einschränken.

Das obige ist der detaillierte Inhalt vonMastering $ Watch in AngularJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!