Detaillierte Erläuterung der Methode $apply() in angleJS_AngularJS

Für mich, einen absoluten Neuling im Frontend, weiß ich noch wenig über Javascript. Wenn ich direkt mit Angular JS beginnen möchte, stoße ich auf großen Widerstand. Ich glaube jedoch, dass selbst menschenfeindliche Designs kein großes Problem darstellen werden, solange wir hart arbeiten.

Okay, kein Unsinn mehr. Um zu verstehen, was Angular JS ist, habe ich mit Scope begonnen. Was ist Scope? Ausleihe einer Passage aus dem offiziellen Dokument:

Code kopieren Der Code lautet wie folgt:

„Bereich ist ein Objekt, das auf das Anwendungsmodell verweist. Es ist ein Ausführungskontext für Ausdrücke. Bereiche sind in einer hierarchischen Struktur angeordnet, die die DOM-Struktur der Anwendung nachahmt. Bereiche können Ausdrücke überwachen und Ereignisse weitergeben.“

Nachdem ich dies gelesen habe, habe ich in Analogie zu anderen Programmiersprachen das Gefühl, dass der Bereich wie der Bereich des Datenmodells ist und den Kontext für die Ausführung von Ausdrücken bereitstellt. Lassen Sie es uns zunächst so verstehen.

Merkmale des Geltungsbereichs

Als nächstes wollen wir sehen, welche Funktionen Scope hat?

Scope stellt die Methode $watch zur Überwachung von Modelländerungen bereit.
Scope stellt die Methode $apply zur Weitergabe von Modelländerungen bereit.
Der Bereich kann vererbt werden, um verschiedene Anwendungskomponenten und Eigenschaftenzugriffsberechtigungen zu isolieren.
Der Bereich bietet Kontext für die Auswertung von Ausdrücken.

In Bezug auf diese vier Funktionen sind der erste, dritte und vierte Punkt nicht schwer zu verstehen, da ich zuvor ActionScript, C und Java studiert habe, aber der zweite Punkt fühlt sich etwas unklar an. Ganz nach dem Prinzip, nach Antworten zu fragen, habe ich einige Dinge trotzdem über Google gefunden. Erfahrene Veteranen tippen bitte auf die Steine!

Origin Javascript

Zunächst einmal scheint Scope.apply() auf den ersten Blick eine gewöhnliche Methode zum Aktualisieren von Bindungen zu sein. Aber denken Sie noch ein wenig darüber nach: Warum brauchen wir es? Wann wird es normalerweise verwendet? Um diese beiden Probleme zu verstehen, müssen wir mit Javascript beginnen. In Javascript-Code wird es in einer bestimmten Reihenfolge ausgeführt. Wenn ein Codefragment an der Reihe ist, führt der Browser nur das aktuelle Fragment aus und führt keine weiteren Aktionen aus. Manchmal bleiben einige Webseiten, die nicht sehr gut gemacht sind, hängen, nachdem sie auf etwas geklickt haben. Die Art und Weise, wie Javascript funktioniert, ist einer der Gründe für dieses Phänomen! Unten haben wir einen Code, um es zu fühlen:

Code kopieren Der Code lautet wie folgt:

var button = document.getElementById('clickMe');
FunktionstasteClicked () {
warning('auf die Schaltfläche wurde geklickt');
}
button.addEventListener('click', buttonClicked);
Funktion timerComplete () {
Alert('Timer abgeschlossen');
}
setTimeout(timerComplete, 5000);

Suchen Sie beim Laden von Javascript-Code zunächst nach einer Schaltfläche mit der ID „clickMe“, fügen Sie dann einen Listener hinzu und legen Sie dann ein Timeout fest. Warten Sie 5 Sekunden und ein Dialogfeld wird angezeigt. Wenn Sie die Seite aktualisieren und sofort auf die Schaltfläche „ClickMe“ klicken, wird ein Dialogfeld angezeigt. Wenn Sie nicht auf „OK“ klicken, kann die Funktion „timerComplete“ nie ausgeführt werden.

So aktualisieren Sie Bindungen

Okay, nachdem wir über einige scheinbar irrelevante Dinge gesprochen haben, kehren wir zum Thema zurück. Woher weiß Angular JS, wann sich Daten ändern und die Seite aktualisiert werden muss? Der Code muss wissen, wann die Daten geändert wurden, aber es gibt derzeit keine Möglichkeit, direkt zu benachrichtigen, dass sich die Daten eines Objekts geändert haben (obwohl ECMAScript 5 versucht, dieses Problem zu lösen, befindet es sich noch im experimentellen Stadium). Zu den derzeit eher Mainstream-Strategien gehören die folgenden zwei Lösungen. Eine besteht darin, ein spezielles Objekt zu verwenden, sodass alle Daten nur durch Aufrufen der Methode des Objekts festgelegt werden können, anstatt sie direkt über die Eigenschaft anzugeben. Auf diese Weise können alle Änderungen aufgezeichnet werden und Sie wissen, wann die Seite aktualisiert werden muss. Der Nachteil dabei ist, dass wir ein spezielles Objekt erben müssen. Die Zuweisung kann nur über object.set('key', 'value') statt über object.key=value erfolgen. In Frameworks wie EmberJS und KnockoutJS geschieht dies (obwohl ich noch nie damit in Berührung gekommen bin – peinlich). Die andere Methode ist die von Angular JS übernommene Methode, die nach der Ausführung jeder Javascript-Code-Ausführungssequenz prüft, ob Datenänderungen vorliegen. Dies erscheint ineffizient und kann sogar die Leistung ernsthaft beeinträchtigen. Angular JS verwendet jedoch einige clevere Methoden, um dieses Problem zu lösen (es wurde noch nicht untersucht und ist noch nicht klar). Dies hat den Vorteil, dass wir jedes beliebige Objekt beliebig verwenden können, es keine Einschränkungen bei der Zuweisungsmethode gibt und wir auch Änderungen in den Daten erkennen können.
Bei dieser von Angular JS übernommenen Lösung geht es uns darum, wann sich die Daten ändern, und hier kommt „scope.apply()“ zum Einsatz. Die Überprüfung, ob sich die gebundenen Daten geändert haben, wird tatsächlich von Scope.digest () durchgeführt. Wir rufen diese Methode jedoch fast nie direkt auf, sondern rufen die Methode Scope.apply () auf, da in Scope die Methode .apply () aufgerufen wird Scope.digest()-Methode. Die Methode „scope.apply()“ nimmt eine Funktion oder einen Ausdruck, führt sie aus und ruft schließlich die Methode „scope.digest()“ auf, um Bindungen oder Watcher zu aktualisieren.

Wann sollte $apply() verwendet werden?

Es ist immer noch die gleiche Frage: Wann müssen wir die apply()-Methode aufrufen? Die Situation ist sehr selten. Tatsächlich ist fast unser gesamter Code in Scope.apply () eingeschlossen, z. B. ng-click, Controller-Initialisierung, http-Rückruffunktion usw. In diesen Fällen müssen wir es nicht selbst aufrufen. Tatsächlich können wir es nicht selbst aufrufen, da sonst der Aufruf der apply()-Methode innerhalb der apply()-Methode einen Fehler auslöst. Wir müssen es wirklich verwenden, wenn wir den Code in einer neuen Ausführungssequenz ausführen müssen, und genau dann, wenn diese neue Ausführungssequenz nicht durch die Angular-JS-Bibliotheksmethode erstellt wird, müssen wir zu diesem Zeitpunkt den Bereich für den Code verwenden. apply() umschlossen. Lassen Sie uns dies anhand eines Beispiels erklären:

Code kopieren Der Code lautet wie folgt:

{{message}}

Code kopieren Der Code lautet wie folgt:

functionStrg($scope) {
$scope.message = „2000 ms auf Aktualisierung warten“; setTimeout(function () {
​ ​$scope.message="Timeout aufgerufen!";
// AngularJS ist sich der Aktualisierung auf $scope
nicht bewusst }, 2000);
}

Nachdem der obige Code ausgeführt wurde, wird auf der Seite Folgendes angezeigt: Warten 2000 ms auf Aktualisierung. Anscheinend wird die Datenaktualisierung von Angular JS nicht bemerkt.

Als nächstes modifizieren wir den Javascript-Code leicht und umschließen ihn mit „scope.apply()“.

Code kopieren Der Code lautet wie folgt:

functionStrg($scope) {
$scope.message = „2000 ms auf Aktualisierung warten“; setTimeout(function () {
​ ​$scope.$apply(function () {
​ ​ ​$scope.message="Timeout aufgerufen!";
});
}, 2000);
}

Der Unterschied besteht dieses Mal darin, dass auf der Seite zunächst Folgendes angezeigt wird: Warten 2000 ms auf Aktualisierung. Nach 2 Sekunden Wartezeit ändert sich der Inhalt in: Timeout aufgerufen!. Offensichtlich wird die Datenaktualisierung von Angular JS bemerkt.
HINWEIS: Wir sollten dies nicht tun, sondern die von Angular JS bereitgestellte Timeout-Methode verwenden, damit sie automatisch mit der Apply-Methode umschlossen wird.

Wissenschaft ist ein zweischneidiges Schwert
Schauen wir uns abschließend noch einmal die Methoden „scope.apply()“ und „scope.apply(function)“ an! Obwohl Angular JS viel für uns getan hat, haben wir auch einige Chancen verpasst. Sie können es auf einen Blick anhand des folgenden Pseudocodes erkennen:

Code kopieren Der Code lautet wie folgt:

function$apply(expr) {
versuche es mit {
​​return$eval(expr);
} Catch(e) {
​​$ExceptionHandler(e);
} endlich {
​​$root.$digest();
}
}

Es werden alle Ausnahmen abgefangen und nicht erneut ausgelöst. Schließlich wird die Methode $digest() aufgerufen.

Um es zusammenzufassen

Die Methode $apply() kann Angular-JS-Ausdrücke außerhalb des Angular-Frameworks ausführen, z. B. DOM-Ereignisse, setTimeout, XHR oder andere Bibliotheken von Drittanbietern. Das ist erst der Anfang, das Wasser ist noch sehr tief, jeder ist herzlich willkommen, gemeinsam tief zu tauchen!