Persönlich denke ich, dass Sie den Betriebsmechanismus von AngularJs gut verstehen müssen, damit Sie es vermeiden können, so weit wie möglich in die Grube zu fallen. In diesem Artikel werde ich eine klarere und detaillierte Analyse dessen durchführen, was AngularJs getan hat, nachdem sie auf der Grundlage der Online -Informationen und meines eigenen Verständnisses gestartet wurden.
Schauen wir uns zunächst an, was Angular Schritt für Schritt getan hat.
<! docType html> <html ng-App> <kopf> <script src = "Angular.js"> </script> </head> <body> <png-init = "name = 'world'"> Hallo {{name}! </p> </body> </html>Wenn Sie Ihren Browser verwenden, um auf Index.html zuzugreifen, macht der Browser nacheinander die folgenden Dinge:
Der gesamte Prozess kann durch dieses Bild dargestellt werden:
OK, durch das obige Beispiel können wir verstehen, wie AngularJs Schritt für Schritt eine Seite macht. Wie interagiert es also mit der Ereignisschleife des Browsers? Oder wie interagieren Sie mit Benutzern? Kurz gesagt ist es hauptsächlich in drei Phasen unterteilt:
1. Die Ereignisschleife des Browsers wartet darauf, dass das Ereignis ausgelöst wird, einschließlich Benutzerinteraktion, Timing -Ereignisse oder Netzwerkereignissen (z. B. Serverantworten usw.).
2. Sobald ein Ereignis ausgelöst ist, wird der JavaScript -Kontext eingegeben, und das DOM wird im Allgemeinen durch Rückruffunktionen geändert.
3. Nachdem die Rückruffunktion ausgeführt wurde, rendert der Browser die neue Seite nach dem neuen DOM.
Wie in der folgenden Abbildung gezeigt, besteht der Interaktionsprozess hauptsächlich aus mehreren Zyklen:
AngularJS modifiziert allgemeine JavaScript -Workflows und bietet einen eigenen Ereignisbearbeitungsmechanismus. Dies unterteilt den JavaScript -Kontext in zwei Teile, einer ist der native JavaScript -Kontext und der andere der AngularJS -Kontext. Nur Operationen im AngularJS-Kontext können Winkeldatenbindungen, Ausnahmebehandlung, Immobilienbeobachtung und andere Dienste genießen. Angular wird jedoch für Außenstehende nicht ignoriert (z. B. native JavaScript-Operationen, angepasste Ereignisrückrufe, Bibliotheken von Drittanbietern usw.). Sie können die von AngularJS bereitgestellte $ apply () -Funktion verwenden, um diese Außenseiter in den AngularJS -Kontext zu wickeln, damit Angular die Änderungen erfassen kann, die sie vorgenommen haben.
Schauen wir uns als nächstes einen Blick darauf an, wie diese Zyklen während des Interaktionsprozesses funktionieren?
1. Zunächst wird der Browser im Hörzustand sein. Sobald ein Ereignis ausgelöst ist, wird es einer Ereigniswarteschlange hinzugefügt, und die Ereignisse in der Ereigniswarteschlange werden einzeln ausgeführt.
2. Wenn das Ereignis in der Ereigniswarteschlange von $ apply () eingepackt ist, wird der Kontext von AngularJs eingegeben. Das fn () hier ist die Funktion, die wir im Kontext von AngularJs ausführen möchten.
3. AngularJs führt die FN () -Funktion aus. Normalerweise ändert diese Funktion einige Zustände der Anwendung.
4. Dann tritt AngularJs in die $ Digest -Schleife ein, die aus zwei kleinen Schleifen besteht. Eine Schleife wird verwendet, um die $ evalasync -Warteschlange zu verarbeiten (zum Planen einiger Vorgänge, die vor dem Rendern der Ansicht verarbeitet werden müssen, die normalerweise über SetTimeout (0) implementiert wird, die langsamer ist und möglicherweise Ansicht verursachen kann). Eine Schleife wird verwendet, um die $ Beobachtungsliste zu verarbeiten (eine Sammlung einiger Ausdrücke. Sobald eine Änderung eintritt, wird die $ Watch -Funktion aufgerufen). Die $ Digest -Schleife wird weiterhin iteriert, wenn sie weiß, dass die $ evalasync -Warteschlange leer ist und die $ Beobachtungsliste auch leer ist, dh das Modell wird sich nicht mehr ändern.
5. Sobald die $ Digest-Schleife von AngularJs endet, hinterlässt die gesamte Ausführung den Kontext von AngularJs und JavaScript, und dann wird der Browser die Ansicht nachgeändert, nachdem die Daten geändert wurden.
Lassen Sie es uns als nächstes in Kombination mit dem Code analysieren:
<! docType html> <html ng-App> <kopf> <script src = "Angular.js"> </script> </head> <body> <input ng-model = "name"> <p> Hallo {{name}! </p> </body> </html>Der einzige Unterschied zwischen diesem Code und dem vorherigen Code besteht darin, dass es eine Eingabe gibt, um Benutzereingaben zu empfangen. Wenn Sie mit einem Browser auf diese HTML-Datei zugreifen, verbindet die NG-Model-Direktive in der Eingabe das Schlüsseldown-Ereignis an die Eingabe und empfiehlt eine $ Watch für die Namensvariable, um die Benachrichtigung über die Änderung der variablen Wertschöpfung zu erhalten. Während der interaktiven Phase treten hauptsächlich die folgende Reihe von Ereignissen auf:
1. Wenn der Benutzer eine Taste auf der Tastatur drückt (z. B. a), wird das Tastendown -Ereignis auf der Eingabe ausgelöst.
2. Die Anweisung in der Eingabe erkennt die Änderung des Wertes in der Eingabe und Aufrufe $ anwenden ("name = 'a'"), um das Modell im AngularJS -Kontext zu aktualisieren.
3. AngularJs weist 'a' zu, um zu nennen;
V.
5. Beenden Sie den Kontext von AngularJs und beenden Sie dann das Schlüsseldown -Ereignis im Kontext von JavaScript;
6. Der Browser wird die Ansicht erneut verbessert.
Das obige ist eine Zusammenfassung des Arbeitsprinzips von AngularJs. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!