Heim > Artikel > Web-Frontend > Ü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()
Fehler: $digest bereits in BearbeitungAlso, 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?
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.
, 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 progressnicht 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.
Ü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!