|
|
Veröffentlicht am 30.12.2024, 11:02:42
|
|
|
|
Kürzlich hat Angular eine unabhängige "erfahrungsorientierte" Entwicklungsfunktion namens Zone.js veröffentlicht. Obwohl die Funktion noch experimentell ist, arbeitet das Angular-Team schon lange an dieser wichtigen Innovation. Responsive Primitives werden für Entwickler immer wichtiger, was darauf hindeutet, dass Angular in eine neue Ära eintritt. WinkelabhängigkeitenDie Vorteile von Signals und Rxjs sind noch ausgeprägter, da sie die Notwendigkeit eliminieren, ständig auf Änderungen zu achten, von denen Zone.js abhängig sind.und agierte während der Entwicklung als Vermittler.
Angular wird auch in Zukunft ein mutiger und kraftvoller Rahmen sein und eine neue Transformation einleiten.
Zunächst einmal soll mein Artikel niemandem etwas beibringen. Ich hoffe, meine Leser haben nicht das Gefühl, so aktiv zu sein. Ich versuche, meine Erfahrungen und Erkenntnisse so oft wie möglich zu teilen und mich für Diskussionen zu öffnen. Es ist wichtig, gemeinsam zu diskutieren, Ideen auszutauschen und kritisch zu bewerten. Es darf nicht vergessen werden, dass es immer noch einige Verwirrung darüber gibt, wie genau sie funktionieren, besonders da die in diesem Artikel diskutierten Technologien noch erlebt werden, und ich würde sagen, dass selbst der Mechanismus zur Veränderungserkennung im Kernteam von Angular Verwirrung führen kann.
Was ist Zone.js und was bewirkt es?
Zone.js ist eine kleine Bibliothek, die 2010 von Brian Ford unter dem Namen "Zones" entwickelt wurde, um asynchrone Arbeit in JavaScript zu verwalten. Inspiriert von Sprachen wie Erlang und Dart, zielt es darauf ab, strukturierte Nebenläufigkeit in die Single-Thread-Umgebung von JavaScript zu bringen. Das Angular-Team gewann an Schwung, als es Zonen als Mechanismus zur Veränderungserkennung in Angular 2 übernahm, und das Angular-Team begann, diese in Form von Zone.js beizutragen, was eine breitere Community-Beteiligung und weitere Entwicklung ermöglichte. Heute, obwohl es weiterhin eng mit Angular verbunden ist, kann Zone.js als ein mächtiges Werkzeug zur Überwachung und zum Eingreifen asynchroner Aufgaben angesehen werden, das Leistungsanalysen, Fehlerbehandlungsfähigkeiten und viele fragwürdige Funktionen ermöglicht.
Warum also hat Angular Zone.js aufgegeben?
Indem wir die Fähigkeit der KI nutzen, unsere imaginären Bilder mühelos in Zeichnungen zu verwandeln, nutzten wir die Metapher des "Schwamm unter dem Bett", um ein Bild zu schaffen, das das Verständnis erleichtert.
Stellen Sie sich das Bett auf dem obigen Bild vor, das nicht auf dem Boden steht, sondern auf einem großen Schwamm. Zone.js ist wie ein Schwamm in einer Angular-Applikation. Dieser Schwamm sorgt dafür, dass das Bett auf einer bequemen, stützenden Basis steht und dem Schläfer relativen Komfort bietet. Der Schwamm absorbiert jede Bewegung des Bettes und verhindert, dass sich die Bewegung im Bett nach außen reflektiert.
Monkey-Patches in Zone.js alle asynchronen APIs im Browser abhören, wie z. B. Events, Commitments, Observables, setTimeout, setInterval usw.
Indem sie diese anhört, kann die Angular-Anwendung Änderungen erkennen und somit die Benutzeroberfläche aktualisieren; tatsächlich ermöglicht Zone.js – ähnlich wie ein Schwamm-Unterstützungsbett – auch den reibungslosen Ablauf der Angular-Anwendung. In diesem Fall können Leistungsprobleme auftreten, die wir bei sehr großen Projekten nicht spüren.
Andererseits scheint diese komplexe Struktur uns daran zu hindern, bestimmte spezifische Veränderungen im Laufe der Zeit wahrzunehmen. Jede vorherige Eigenschaft und Entwicklung, zusammen mit ihrer eigenen inneren Entwicklung und wechselnden Bedürfnissen, wird plötzlich zu einem Hindernis für die nächste und Entwicklung.
Wenn wir den Schwamm unter uns hervorziehen, sehen wir, dass sich die natürliche Bewegungsfreiheit zeigt, da das Bett direkten Kontakt mit dem Boden hat. Wenn der komfortbegrenzende Effekt des Schwamms zu verschleißen beginnt, bedeutet das, dass sich die Bewegung auf dem Bett nun direkt auf den Boden reflektiert.
Eine solche Metapher könnte bedeuten, dass der Schwamm eine Komfortzone bietet und einen relativ angenehmeren Schlaf ermöglicht. Zone.js wie dieser Schwamm bietet er eine ernsthafte Komfortzone, die es uns erlaubt, jede Veränderung auf der Oberfläche zu spüren. Im Laufe der Zeit kann diese komplexe Struktur jedoch verhindern, dass wir bestimmte Veränderungen wahrnehmen. Schmerzen im unteren Rücken können auftreten, wenn wir den Schwamm unter uns hervorziehen, und diese Schmerzen und Beschwerden deuten darauf hin, dass wir von künstlichem zu natürlichem Boden abgestiegen sind, und obwohl diese Übergangserfahrung etwas schmerzhaft sein kann, letztlich mit geradem unteren Rücken, angenehmerem Schlaf und besserer Durchblutung sowie einer gesünderen körperlichen und geistigen Schärfe. Wenn wir auf zonenfrei umsteigen, also Rücken- und Gelenkschmerzen durch das Schlafen in einem Bett ohne Schwamm, ist das ein gutes Zeichen dafür, dass wir von künstlichem zu natürlichem Boden wechseln. Obwohl diese Übergangserfahrung etwas schmerzhaft ist, verschwindet auch der Übergangsschmerz, wenn unser unterer Rücken beginnt, sich in seinen ursprünglichen natürlichen Zustand umzuwandeln und so eine bessere Durchblutung zu ermöglichen; Das Übergangsbeispiel hier entspricht dem experimentellen Zoneless, das wir in Angular v18 gehört haben.
Zone.js wird als zusätzliche Last angenommen, da es Asektron-Operationen verfolgt und diese an Winkelerkennungsmechanismen wie Aufrufe, Ereignisse, Fehler usw. weiterleitet. Heute, was Angulars Leistung betrifft, können wir die zusätzliche Last hier nicht sehen oder überhaupt spüren. Zone.js könnte weiterentwickelt und einige Debugging-Probleme gelöst werden, aber die Grundlage hier ist Angulars Fahrplan. Wir sehen, dass Angulars eigene, intern entwickelte Signal-Primitive reagieren Zone.js nun Angulars Zukunftspläne behindern. Während die Signals-Struktur in Bezug auf Erkennungsmechanismen sehr nützlich ist und auch leistungsbedingt, einfach zu bedienen und leistungsstark ist, ist Zone.js nicht mehr notwendig, aber es ist keine Bibliothek, die über Nacht aufgegeben werden kann.
Wir verstehen, dass Angular seine Träume nicht einschränken will, sondern vielmehr eine flexiblere und zuverlässigere Anwendung mit einem autarkeren Rahmen aufbauen möchte, indem Zwischenprozesse so weit wie möglich eliminiert werden. Wir sehen, wie Angular sich in einen praktischeren Zustand bewegt und versucht, die Gelegenheit zu nutzen, in Zukunft wieder in den Aufwärtstrend einzusteigen. Leider können wir laut der aktuellen StateofJS-Umfrage nicht sagen, dass sich ein solcher Trend befindet, aber wir sehen auch, dass Angular für alle möglichen Innovationen offen ist.
Wie wechsle ich in Angular 18 in den Zoneless-Modus?
Angular 18 hat einen Schritt, der es uns erlaubt, in den zonenfreien Modus zu wechseln und den Schwamm loszuwerden. Wie unten gezeigt, können wir dieses Erlebnis nun mit dem No-Zonen-Change-Erkennungsmechanismus in der Bootstrap-Phase bereitstellen.
Mit der oben genannten Funktion im Provider können wir nun mit dem Befehl npm deinstall zone.js die im Polyfills-Array unten definierten zone.js aus dem angular.json entfernen.
Jetzt können wir Angular Zoneless verwenden!
Was sind die Vorteile von Zoneless?
Zoneless bietet ein schlankeres Ökosystem für unsere Anwendungen, indem unnötige Abhöroperationen eliminiert werden. Das bedeutet schnelleres Rendern, höhere Leistung, schnellere Seitenlade, kleinere Paketgrößen und einfacheres Debugging.
Mach einen klassischen Test, bei dem du einen Zähler hinzufügst, indem du auf einen Button klickst, und du möchtest diese Zahl erhöhen, wenn du auf den Button klickst. In diesem Fall sehen wir, dass der geänderte Wert gerendert wird, wenn jede Funktion ausgelöst wird, und dieser Wert ändert sich im HTML. Da es bereits eine Funktion ist und wir sie direkt auslösen, wird sie hier gerendert. Aber was passiert, wenn sich dieser Wert durch äußere Einflüsse ändert und wir eine Wertänderung sehen wollen, ohne dass wir sie manuell auslösen? Wenn es einen Zone.js gibt, hört er ständig auf alle Änderungen und benachrichtigt Angular in unserem Namen. Da es jedoch derzeit keinen solchen Mechanismus gibt, müssen wir entweder den Veränderungserkennungsmechanismus nach einer asynchronen Operation auslösen oder direkt Signals oder RxJS verwenden, damit die Veränderung direkt durch diese Reaktivität erkannt werden kann.
Das Verschwinden von Sponge lehrt uns, dass nicht nur Zone.js verschwindet, sondern auch die "Komfortzone".
Wenn wir Zone.js als Modul mit rohem JavaScript verwenden, sieht es so aus.
In Angular müssen wir uns nicht mit diesen Situationen auseinandersetzen; Mit ngZone funktionieren diese Operationen bereits in Verbindung mit dem Erkennungsmechanismus.
Zum Beispiel müssen wir im Fall von direktem DOM, Ereignishörern, Observables und Commitments, HTTP-Anfragen und synchronen Steuerungsflüssen den Mechanismus zur Änderungserkennung für asynchrone Operationen manuell auslösen.
Da Signale oder R xjs Änderungen automatisch erkennen, ist es nicht notwendig, den Änderungserkennungsmechanismus auszulösen.
Signalbeispiel:
Schreiben wir nun eine Anwendung, um die Mechanismen zur Erkennung von Zonenlosen und Winkeländerungen zu testen und zu sehen, wie sie funktionieren.
Nachdem das oben definierte Intervall als Standard gestartet ist, sehen wir, dass es zu funktionieren beginnt, aber der DOM wird nicht aktualisiert und die Änderungen werden nicht widergespiegelt. Wenn wir das Startintervall des Signals verwenden, sehen wir, dass es funktioniert, ohne den Änderungserkennungsmechanismus von Angular auszulösen. Wie Sie sehen, bemerkt Angular beim Beginn des Klickereignisses und des Signalintervalls die Veränderung, erfasst die Änderung sofort in unserem Standardintervall und gibt sie dann wieder frei.
Wenn wir den Wert einer Variablen an die Elternkomponente senden, stellen wir fest, dass er sowohl im Push- als auch im Standardfall unterschiedlich wahrgenommen wird.
Wenn wir die Eingabe links binden, wird die Änderung reflektiert, wenn kein Bereich vorhanden ist, und ebenso sehen wir, dass die Änderung nach dem Klicken aufgrund des Versprechens angezeigt wird.
Hier sehen wir, dass nach einem HTTP-Aufruf ohne Änderung zu erkennen die Änderungen nicht mehr reflektiert werden, sondern nur, wenn wir sie manuell auslösen. Natürlich reflektiert Signals Neulinge leicht auf den gewünschten Bildschirm. Ein Teil des Codes lautet wie folgt:
app.component.ts
change-detection-demo.component.ts
Die App wurde auf Stacklibitz veröffentlicht, und du kannst dir die restlichen Tests ansehen. Man kann die Ergebnisse in der Benutzeroberfläche auch per Code verfolgen.
Stackblitz:Der Hyperlink-Login ist sichtbar.
GitHub:Der Hyperlink-Login ist sichtbar.
Unten gibt es auch eine Beispielanwendung, die zeigt, wie Angulars Veränderungserkennungsmechanismus funktioniert, und du kannst ihn auch dort ausprobieren.
Der Hyperlink-Login ist sichtbar.
Dinge, die man beim Wechsel zum regionsfreien Modus beachten sollte
Es ist wichtig zu beachten, dass, wie der Name schon sagt, ExperimentalZonelessChangeDetection weiterhin experimentell ist.
Bei einigen Tests bemerkten wir einige Merkwürdigkeiten im Mechanismus zur Veränderungserkennung. Wenn zum Beispiel einige Änderungen nicht manuell ausgelöst werden, sehen wir keine Änderungen im DOM und der Zustand wird nicht aktualisiert. Wenn jedoch ein anderes Signal oder eine Reaktionsvariable außerhalb des Änderungserkennungsmechanismus funktioniert und das DOM auffrischt, können wir feststellen, dass auch der zuvor nicht erfrischte Zustand aktualisiert wird.
Wenn Sie diese Funktion in einem bestehenden Projekt implementieren möchten, sollten Sie alle Aktionen und das Anwendungsverhalten sorgfältig testen. Insbesondere Bibliotheken von Drittanbietern können auf Zone.js angewiesen sein, was zu einigen Fehlern und Renderingproblemen führen kann.
Original:Der Hyperlink-Login ist sichtbar. |
Vorhergehend:[KI] (1) Open-Source-Rankings großer ModelleNächster:.NET/C# verwendet FastDeploy, um OCR-Modelle zur Texterkennung zu bereitstellen
|
Vermieter|
Veröffentlicht am 30.12.2024, 11:04:13
|
