AngularJS-Dirty-Checking-Mechanismus und die wunderbare Verwendung von $timeout

In diesem Artikel wird hauptsächlich die detaillierte Erklärung vonAngularJSDirty-Check-Mechanismus und die wunderbare Verwendung von $timeout vorgestellt. „Dirty-Check“ ist einer der Kernmechanismen in Angular -way-Bindung und MVVM-Modus. Interessierte können sich über

|| Browser-Ereignisschleife und Angulars MVW

informieren „ist einer der Kernmechanismen in Angular First und eine wichtige Grundlage für die Realisierung der bidirektionalen Bindung und des MVVM-Modus.

Angular konvertiert die bidirektionale Bindung in eine Reihe von Überwachungsausdrücken und prüft dann rekursiv, ob sich die Ergebnisse dieser Überwachungsausdrücke geändert haben. Wenn ja, führen Sie den entsprechenden Watcher aus Funktion. Wenn sich der Wert des Modells nicht mehr ändert, werden keine weiteren Watcher-Funktionen ausgelöst und ein vollständiger Digest-Zyklus endet.

Da wir schnell NodeJS-Programme mit derselben Sprache und demselben Ereignismodell entwickeln können, ohne unser Programmierdenken zu ändern, wurde NodeJS schnell populär,

JavaScript Full-Stack Es wird auch immer beliebter immer beliebter.

Wir hören oft, dass Angular ein MV*-Framework ist. Dies liegt daran, dass Angular das Ereignismodell des Browsers erweitert und einen eigenen Kontext erstellt.

||Die $watch-Funktion in Angular

Der watch-Ausdruck ist sehr flexibel: Es kann eine Funktion oder ein Eigenschaftsname auf $scope sein kann auch ein Ausdruck in der Form

string sein. Der Attributname oder Ausdruck auf $scope wird schließlich vom $parse-Dienst in eine entsprechende Funktion geparst, um den Attributwert zu erhalten.

Alle Watcher-Funktionen werden durch die Unshift-Funktion zur späteren Verwendung durch $digest in den Kopf des Scope.$$watchers-Arrays eingefügt.

Schließlich gibt die $watch-Funktion eine Anti-Registrierungsfunktion zurück. Sobald wir sie aufrufen, können wir den gerade registrierten Watcher entfernen.

Es ist zu beachten, dass Angular die Funktion angle.equals() standardmäßig nicht für tiefe Vergleiche verwendet, da der ===-Vergleich schneller ist und daher Arrays oder Objekte vergleicht überprüft wird, ist die Referenz. Dies führt dazu, dass zwei Ausdrücke mit genau demselben Inhalt als unterschiedlich beurteilt werden. Wenn ein detaillierter Vergleich erforderlich ist, muss der dritte optionale Parameter objectEquality explizit auf true gesetzt werden, z. B. $watch('someExp', function(){...}, true).

Angular bietet außerdem die Methoden $watchGroup und $watchCollection, um Arrays oder eine Gruppe von Eigenschaften zu überwachen.

||Die $digest-Funktion in Angular

Wie bereits erwähnt, erweitert Angular die Ereignisschleife des Browsers.

Wenn das von der Ereignisanweisung in der Ansicht weitergeleitete Ereignis akzeptiert wird, wird der Kontext von Angular geändert, um auf solche Ereignisse zu reagieren, und die $digest-Schleife wird ausgelöst.

$digest-Schleife besteht eigentlich aus zwei

while-Schleifen. Dies sind: die asynchrone Operationswarteschlange, die $evalAsync verarbeitet, und die Watchers-Warteschlange, die $watch verarbeitet.

Wenn die $digest-Schleife auftritt, durchläuft sie alle Watcher-Funktionen, die im aktuellen $scope und allen seinen untergeordneten $scopes registriert sind.

Das Durchlaufen aller Watcher-Funktionen wird als Dirty Check bezeichnet. Wenn sich nach der Durchführung einer Dirty-Check-Runde der von einem Beobachter überwachte Wert geändert hat, wird eine weitere Dirty-Check-Runde durchgeführt, bis alle Watcher-Funktionen melden, dass sich die von ihnen überwachten Werte nicht mehr geändert haben.

Wenn die $digest-Schleife endet, werden die Ergebnisse der Modelländerung im DOM aktualisiert. Dies ermöglicht das Zusammenführen mehrerer Updates und verhindert häufige DOM-Eigenschaften.

Es ist zu beachten, dass vor dem Ende des $digest-Zyklus, wenn mehr als 10 Runden von Dirty Checks überschritten werden, eine Ausnahme ausgelöst wird, um zu verhindern, dass die Dirty Checks auf unbestimmte Zeit fortgesetzt werden.

Wann wird es in diesen Angular-Kontext eintreten und den „Dirty-Check-Mechanismus“ auslösen? Diese Frage ist sehr wichtig und auch problematisch.

Jedes Ereignis, das in den Angular-Kontext eintritt, führt eine $digest-Schleife aus. Für die von ngModel überwachte interaktive Formularsteuerung wird bei jeder Zeicheneingabe eine Schleife ausgelöst, um die $watcher-Funktion zu überprüfen, damit die Ansicht rechtzeitig aktualisiert werden kann. Nach Angular 1.3 können Sie ngModelOptions zur Konfiguration verwenden, um die Standardauslösemethode zu ändern.

||$apply

$digest in Angular ist eine

interne Funktion, die nicht direkt im normalen Anwendungscode verwendet werden sollte Nenn es. Wenn Sie es aktiv auslösen möchten, müssen Sie die Funktion „scope.$apply“ aufrufen, eine gemeinsame öffentliche Schnittstelle, die den „Dirty-Checking-Mechanismus“ von Angular auslöst.

Es ist zu beachten, dass Angular nur die ihm bekannten verhaltensauslösenden Methoden verwalten kann, aber nicht alle Angular-Betriebsszenarien abdecken kann. Aus diesem Grund können wir beim Kapseln des jQuery-Plug-ins eines Drittanbieters die Ansicht nicht automatisch aktualisieren, sondern müssen $scope.$apply manuell aufrufen.

Bei der Integration des JQuery-Plug-Ins treten manchmal Digest-in-Progress-Fehler auf. Wenn der Fehler nach der Beseitigung immer noch nicht behoben werden kann, können Sie erwägen, ihn mit $timeout zu beheben.

Die wunderbare Verwendung von $timeout

Wenn die an die Schnittstelle gebundenen Variablen in der verzögerten Aufgabe geändert werden, löst window.setTimeout keinen „Dirty Check“ zur Aktualisierung der UI-Schnittstelle aus. Sie denken vielleicht: Das Hinzufügen von $scope.$apply wird das Problem lösen. Ja, dies kann das Problem der Aktualisierung der Benutzeroberfläche lösen, aber Sie könnten auf ein anderes Problem stoßen:

Fehler: $digest bereits in Bearbeitung

Wie ist das? An? Oh, Angular führt intern „Dirty Checking“ durch. Ein kluger Programmierer hat geschickt den folgenden Code geschrieben, um dieses Problem zu lösen:

function safeApply(scope, fn){ 
  (scope.
phase||scope.$root.
phase) ? fn() : scope.$apply(fn); 
}

Im Code, bei der Ausführung Vor dem Wenn Sie die Funktion „Dirty Checking“ anwenden, wird zunächst geprüft, ob Angular intern eine „Dirty Checking“ durchführt. Andernfalls führt $Apply die Funktion direkt aus, wenn keine Dirty Checking gestartet wird. Haha, eine „perfekte“ Lösung, nicht wahr?

Bitte beachten Sie, dass der Autor oben das Wort „perfekt“ in Anführungszeichen gesetzt hat. Angular verfügt über einen für uns integrierten $timeout-Dienst, der durch Angular-Umschließen von nativem Javascript window.setTimeout implementiert wird.

$timeout hat viele wunderbare Verwendungsmöglichkeiten, aber stellen Sie sicher, dass die Implementierung der Apply-Funktion mit $timeout nicht unsere erste Lösung ist. Die erste Lösung sollte immer noch die Verwendung von Angular sein -in Anweisungen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder Script House unterstützt.

Das obige ist der detaillierte Inhalt vonAngularJS-Dirty-Checking-Mechanismus und die wunderbare Verwendung von $timeout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!