Über $apply und die optimierte Verwendung in Angularjs

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zu $apply und seiner optimierten Verwendung in Angularjs ein. Freunde, die ihn benötigen, können sich ihn gemeinsam ansehen

Vorwort

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

Heute werden wir über den kleinen Star $apply in Angularjs sprechen. Wenn unsere Daten aktualisiert werden, die Ansichtsebene jedoch nicht reagiert, können wir immer jemanden sagen hören: „Verwenden Sie Anwenden“. Dann fügen wir, ohne es zu wissen,

nach dem Zuweisungscode hinzu und sind dann angenehm überrascht, es herauszufinden. Oh, wirklich aktualisiert. $scope.$apply()

Aber manchmal kommt der Compiler rücksichtslos zu Ihnen zurück

Fehler: $digest bereits in Bearbeitung

Also, Was sind die Ursachen dieser Phänomene? Was genau macht $apply? Hör mir zu, wie ich langsam komme.

1. Die Rolle von $apply

Die Funktion $apply() kann Ausdrücke im Angular-Kontext von außerhalb erstellen Angular Framework Interne Ausführung.

Das Obige ist ein Satz aus dem maßgeblichen AngularJs-Tutorial. Was bedeutet es?

Zunächst müssen Sie sich darüber im Klaren sein, dass das Ändern des Modells in nativen JS- oder Drittanbieter-Frameworks möglicherweise keine Ansichtsaktualisierungen wie setTimeout- und jquery-Plug-Ins auslöst. Warum? Da sie außerhalb des Angularjs-Kontexts liegen, kann Angularjs keine Datenänderungen überwachen. Siehe Beispiele.

1.setTimeout

html:

<p>{{name}}</p>

js:

$scope.name="张三";
setTimeout(function(){
$scope.name = '李四';
//$scope.$apply()
},500)

Zuallererst ist der Name gleich Zhang San. Nach 500 ms habe ich ihn Li Si zugewiesen, aber die Seite hat sich nicht geändert, es ist immer noch Zhang San.

Wenn wir jedoch loslassen

, wird es normal sein, dass Zhang San erfolgreich zu Li Si wird. $scope.$apply()

2. Plug-ins von Drittanbietern

html:

<p>Date: <input type="text" id="datepicker"></p>
<p>
<header>所选日期</header>
{{selectedDate}}
</p>

js:

$scope.selectedDate = '';
$( function() {
 $( "#datepicker" ).datepicker({
 onClose: function( selectedDate ) {
 $scope.selectedDate = selectedDate;
 // $scope.$apply();
 }
 });
} );

Dies ist das Datepicker-Plug-in von jquery. Wenn wir das Datum auswählen, sollte das folgende Datum erscheinen, aber jetzt ist es nicht mehr da. In diesem Fall müssen Sie sich auf $apply() verlassen, um die Ansicht zu aktualisieren.

In beiden oben genannten Fällen können Datenänderungen nicht überwacht werden, da sie nicht im Angularjs-Kontext stehen. Und was genau hat $apply getan, damit die Daten normal aktualisiert werden?

Tatsächlich entspricht $apply einem Trigger. Seine Funktion besteht darin, die Digest-Schleife auszulösen, um die Ansicht zu aktualisieren.

Digest ist der Kern von Angularjs, der die magische Datenbindung implementiert. Jedes ausgelöste Ereignis löst definitiv den Digest-Zyklus aus. Beispielsweise lösen unsere numerischen ng-Ereignisse, Click und Change, tatsächlich den Digest-Zyklus aus.

Wir haben also tatsächlich den Digest-Zyklus manuell ausgelöst. Was den Digest-Zyklus betrifft, werde ich ihn hier nicht zu sehr vorstellen. Wer mehr darüber erfahren möchte, kann Bücher oder Baidu lesen.

2. Bessere Nutzung der Digest-Schleife

In Angularjs gibt es neben $apply auch andere Methoden, die eine Digest-Schleife auslösen können Es kann auch eine Schleife ausgelöst werden. Und $apply ist oft die schlechteste Wahl. Nachfolgend werden einige bessere Optionen empfohlen.

1.$digest

ist schneller als $apply, da es nur die Werte des aktuellen Bereichs und des untergeordneten Bereichs für den übergeordneten Bereich aktualisiert Die Domänenzeit wird ignoriert. Und $apply muss auch den übergeordneten Bereich auswerten, was die Leistung stark beeinträchtigt. $scope.$digest()

2.$timeout

Verwenden Sie $timeout, um Ihr Set zu ersetzen. Timeout ist ein integrierter Dienst von Angularjs, der natürlich besser für Angularjs geeignet ist Umfeld. Es löst implizit den Digest-Zyklus aus und verzögert die Ausführung und löst den Digest-Zyklus im nächsten Moment aus, nachdem der vorherige Digest-Zyklus abgeschlossen ist, sodass der oben erwähnte

$digest already in progress

nicht auftritt

Wir haben den setTime-Code in $timeout eingefügt

$timeout(function(){
$scope.name = '李四';
},500)

Das wird normal funktionieren, es gibt nichts Ärgerliches.

3.$evalAsync

Diese Methode sollte am meisten empfohlen werden. Wenn gerade ein Digest-Zyklus ausgeführt wird, wird der Vorgang, der den Digest-Zyklus verursacht hat, zur Ausführung in den aktuellen Digest-Zyklus verschoben. Mit $timeout wird gewartet, bis der aktuelle Digest-Zyklus abgeschlossen ist, bevor der Digest-Zyklus erneut ausgeführt wird. Dadurch wird evalAsync schneller ausgeführt und weist eine bessere Leistung auf. Wir können es so nennen: $timeout, also

$scope.$evalAsync(
   function( $scope ) {
   console.log( "$evalAsync" );
   }
  );

Das Obige ist alles, was ich heute sagen möchte. In Angularjs sind noch viele Geheimnisse und bessere Verwendungsmethoden verborgen. Ich hoffe, Sie können sie eingehend studieren und bessere Artikel teilen.

Das Folgende ist der ausführbare Code, den Sie erkunden können: https://codepen.io/hanwolfxue/pen/yEZbYQ

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für alle hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Über die grundlegende Verwendung integrierter Anweisungen in Angular4

So leeren Sie den Browser-Cache in AngularJs

Das obige ist der detaillierte Inhalt vonÜber $apply und die optimierte Verwendung in Angularjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!