Lassen Sie uns über unser Verständnis moderner Front-End-Frameworks sprechen

In diesem Kapitel geht es um das Verständnis moderner Front-End-Frameworks. Es hat einen gewissen Referenzwert. Ich hoffe, es wird Ihnen hilfreich sein.

Warum müssen sich Menschen jetzt für verschiedene Frameworks entscheiden?

Tatsächlich liegt der Grund, warum wir jetzt einen Rahmen wählen müssen, im Wesentlichen darin, dass sich die Bedürfnisse, mit denen wir konfrontiert sind, geändert haben. Jeder muss verstehen, dass wir, wenn wir nur eine Seite schreiben, die nur Informationen ohne interaktive Funktionen anzeigt, tatsächlich auch jetzt kein Framework auswählen müssen. Wir müssen nur ein paar Zeilen CSS und HTML schreiben, um die Aufgabe abzuschließen . Da die Anforderungen, mit denen wir konfrontiert sind, komplexer geworden sind, müssen unsere Anwendungen häufig einige Interaktionen zur Laufzeit durchführen.

Hier gibt es drei sehr wichtige Wörter, die ich fett markiert habe und die Laufzeit heißen. In der modernen Front-End-Entwicklung erfordern die von uns entwickelten Anwendungen häufig einige Interaktionen zur Laufzeit. Früher waren diese Interaktionen nur einfache Interaktionen wie Folien oder Dropdown-Menüs zum Wechseln von Registerkarten. Die Implementierung dieser Interaktionen mit jQuery ist kein Problem . Unser Ziel für das moderne Frontend ist es jedoch, das Web für PK nativer Anwendungen und PK mit Native zu nutzen.

Zu diesem Zeitpunkt werden wir feststellen, dass die Verwendung von jQuery zur Entwicklung von Anwendungen die Wartung unseres Codes erschwert. Warum wird die Wartung mit modernen Frameworks wie Vue, React usw. einfacher?

Der einzige Unterschied zwischen Vue und jQuery ist deklarativ und imperativ.

Wir können darüber nachdenken: Was ist der Zweck der Verwendung von jQuery zum Betreiben von DOM? Es dient dazu, die Ansicht lokal zu aktualisieren, also lokal neu zu rendern.

jQuery ist eine zwingende Methode zum Betreiben des DOM und eine zwingende Teilaktualisierungsansicht, während moderne Mainstream-Frameworks wie Vue, React, Angular usw. alle deklarativ sind und eine deklarative Teilaktualisierungsansicht darstellen.

Warum erleichtert die deklarative DOM-Manipulation die Wartung von Anwendungen?

Um dieses Problem zu verstehen, wollen wir zunächst kurz vorstellen, was ein Imperativ und was ein Deklarativ ist.

Imperativ

Imperativ, wie jQuery, machen wir einfach, was wir wollen, zum Beispiel den folgenden Code:

$('.box')
  .append(&#39;<p>Test</p>&#39;)
  .xxx()
  .yyy()
  .jjj()
  ...

Imperativ ist einfach, was wir wollen Rufen Sie die Methode auf und fertig. Es ist einfach, direkt und grob.

Stellen Sie sich eine sehr einfache Szene vor, z. B. einen Umschalteffekt. Klicken Sie auf eine Schaltfläche, um die Farben zu wechseln.

Schreiben Sie es im Imperativstil. Wir müssen es so schreiben. Wenn die aktuelle Farbe ist, lassen Sie sie in eine andere Farbe wechseln.

Wenn Sie sorgfältig darüber nachdenken, kann es tatsächlich in zwei Verhaltensweisen unterteilt werden: Das eine besteht darin, den Status zu beurteilen, und das andere darin, das DOM zu bedienen.

Was ist also deklarativ? ?

Deklarativ

Deklarativ besteht darin, die Zuordnungsbeziehung zwischen Status und Ansicht zu beschreiben und dann das DOM über eine solche Zuordnungsbeziehung zu betreiben Genauer gesagt: Verwenden Sie eine solche Zuordnungsbeziehung, um einen DOM-Knoten zu generieren und ihn in die Seite einzufügen. Zum Beispiel Vorlagen in Vue. Die Funktion der Vorlage besteht darin, die Zuordnungsbeziehung zwischen Status und DOM zu beschreiben.

Wir verwenden die Vorlage in Vue, um dasselbe Szenario zu implementieren. Nachdem wir die Vorlage zum Beschreiben der Zuordnungsbeziehung verwendet haben, müssen wir beim Klicken auf die Schaltfläche nur die Farbvariable ändern, um die Anforderung zu erfüllen.

Sehen Sie den Unterschied?

Denken Sie sorgfältig nach und nutzen Sie Vue, um die gleiche Anforderung zu erfüllen. Wenn Sie es aufschlüsseln, haben wir logischerweise nur ein Verhalten und nur einen Zustand. Und jQuery besteht aus zwei Verhaltensweisen: Zustand + DOM-Operation.

Warum kann der deklarative Ansatz die Komplexität der Pflege von Anwendungscode vereinfachen?

Weil es uns ermöglicht, uns nur auf die staatliche Instandhaltung zu konzentrieren. Wenn die Anwendung komplex wird, beziehen sich unser Denken und die Art und Weise, wie wir den Code verwalten, tatsächlich nur auf den Status, und wir müssen uns nicht mehr um alle DOM-Operationen kümmern Man kann sagen, dass die Komplexität des Codes Der Wartungsaufwand wird stark reduziert.

Wir müssen nicht mehr darauf achten, wie das DOM bedient wird, da das Framework dies automatisch für uns erledigt, wir müssen nur noch auf den Status achten.

Aber wenn die Anwendung besonders komplex ist, werden wir feststellen, dass es immer noch schwierig ist, selbst wenn wir uns nur auf die Zustandswartung konzentrieren. Daher sind technische Lösungen wie z als Vuex und Redux entstanden sind.

Was ist Rendering?

Nach der vorherigen Einführung werden Sie feststellen, dass das wichtigste Problem, das moderne Mainstream-Frameworks lösen müssen, immer noch darin besteht, dass die Lösungen zwischen verschiedenen Frameworks unterschiedlich sind Rendern?

Bei der Entwicklung des Front-Ends muss unsere Anwendung während der Ausführung kontinuierlich verschiedene Interaktionen durchführen. Moderne Mainstream-Frameworks ermöglichen es uns, uns auf die Statuserhaltung zu konzentrieren, was bedeutet, dass die Anwendung innerhalb der Anwendung ausgeführt wird Der Status wird sich weiterhin ändern.

Das zustandsgenerierte DOM wird in die Seite eingefügt und auf der Benutzeroberfläche angezeigt. Dieser Vorgang wird als Rendern bezeichnet.

Rendering-Verarbeitung durch moderne Front-End-Frameworks

Wenn die Anwendung ausgeführt wird, ändert sich der interne Status weiterhin. Die Benutzerseite Ein bestimmter lokaler Bereich muss ständig neu gerendert werden.

Wie rendere ich erneut?

Die einfachste und gröbste Lösung, die auch am häufigsten verwendet wird, wenn ich einige einfache Funktionen in Projekten schreibe, die kein Framework verwenden, besteht darin, den Status zum Generieren eines neuen DOM zu verwenden und dieses dann durch innerHTML zu ersetzen alter DOM.

Der kleine Funktionsblock, den ich geschrieben habe, stellt auf diese Weise kein Problem dar, da die Funktion nur wenige DOM-Tags umfasst. Wenn sich der Status ändert, müssen fast alle Tags meines Funktionsblocks geändert werden, auch wenn ich sie verwende innerHTML verschwendet nicht viel Leistung und liegt im akzeptablen Bereich.

Wenn der Frame durch innerHTML ersetzt wird, wird er nicht teilweise neu gerendert, sondern die gesamte Seite wird als Ganzes aktualisiert Rahmen teilweise erneut rendern?

Um dieses Problem zu lösen, sind einige technische Lösungen erforderlich. Es kann VirtualDOM sein, es muss jedoch nicht unbedingt VirtualDOM sein. Es kann auch der Dirty-Detection-Prozess in Angular sein, oder er kann feinkörnig sein Die Bindung wird wie Vue1.0 mithilfe einer feinkörnigen Bindung implementiert.

Was ist eine feinkörnige Bindung?

Feinkörnige Bindung bedeutet, dass ein bestimmter Zustand, wenn er gebunden ist, an eine bestimmte Beschriftung auf der Seite gebunden ist. Das heißt, wenn die Vorlage zehn Tags enthält, die eine bestimmte Variable verwenden, werden die Variablen an zehn bestimmte Tags gebunden.

Im Vergleich zu React und Angular ist die Granularität relativ grob. Ihre Änderungserkennung weiß tatsächlich nicht, welche Zustandsvariable spezifisch ist, sodass Sie erst nach dem Vergleich wissen können, welcher Teil der Ansicht ist muss erneuert werden.

Die feinkörnige Bindung von Vue weiß tatsächlich, welcher Status sich zum Zeitpunkt der Statusänderung geändert hat, und weiß auch, welche spezifischen Tags diesen Status verwenden. Dann können Sie den Zweck viel einfacher erreichen lokale Aktualisierung durch direktes Aktualisieren der spezifischen Tags, die an diesen Status gebunden sind.

Aber das ist tatsächlich mit einem gewissen Preis verbunden, da die Granularität zu fein ist und ein gewisser Aufwand für die Abhängigkeitsverfolgung entsteht. Daher begann Vue2.0 mit der Annahme einer Kompromisslösung, die darin bestand, die Bindung auf mittlere Granularität anzupassen.

Ein Zustand entspricht einer bestimmten Komponente anstelle einer bestimmten Bezeichnung. Dies hat den Vorteil, dass die Anzahl der Abhängigkeiten erheblich reduziert wird. Schließlich ist die Anzahl der Komponenten im DOM viel geringer. Dies erfordert jedoch einen weiteren Vorgang. Wenn sich der Status ändert, wird nur die Komponente benachrichtigt. Woher weiß die Komponente, welches DOM-Tag aktualisiert werden muss? ?

Die Antwort ist VirtualDOM.

Mit anderen Worten: Wenn die Granularität auf mittel eingestellt wird, ist ein weiterer Vorgang erforderlich, um VirtualDOM innerhalb der Komponente zum erneuten Rendern zu verwenden.

Vue verbessert die Leistung des Frameworks geschickt durch zwei technische Lösungen: Änderungserkennung + VirtualDOM.

Vue2.0 hat VirtualDOM also nicht eingeführt, weil VirtualDOM so gut ist, sondern weil VirtualDOM in Kombination mit der Änderungserkennung die Bindung auf mittlere Granularität anpassen kann, um das Overhead-Problem der Abhängigkeitsverfolgung zu lösen.

Bezüglich der Änderungserkennung habe ich einen speziellen Artikel geschrieben, um vorzustellen, wie Vue die Änderungserkennung implementiert. Portal.

Die Methode der Änderungserkennung hat also bis zu einem gewissen Grad bestimmt, wie das Framework gerendert wird.

Ich habe ein PPT über das Implementierungsprinzip von VirtualDOM geschrieben. Wenn Sie interessiert sind, können Sie sich das Portal ansehen.

Die andere ist die Vorlagenkompilierung. Tatsächlich habe ich zuvor nicht viel über die Vorlagenkompilierung gesagt. Die Funktion der Vorlage besteht darin, die Zuordnungsbeziehung zwischen dem Status und dem DOM zu beschreiben Diese Rendering-Funktion kann den in VirtualDOM bereitgestellten VNode abrufen. Wenn Sie das Prinzip von VirtualDOM zuvor gesehen haben, wissen Sie, dass der Unterschied zwischen VirtualDOM und dem VNode tatsächlich ist. Ich habe einen speziellen Artikel geschrieben, um das Implementierungsprinzip der Vorlagenkompilierung, Portal, vorzustellen.

Zusammenfassung

Ich persönlich finde, dass das aktuelle Frontend etwas ungestüm ist und jeden Tag auf etwas Neues achtet wird heute veröffentlicht, und morgen wird ein neues veröffentlicht. Ich bin mit Frameworks und dergleichen einverstanden, hoffe aber, dass ich das Wesentliche sehe, während ich neue Dinge verfolge. Das ultimative Ziel aller technischen Lösungen ist es, zuerst ein Problem zu lösen, und dann gibt es eine Lösung. Die Lösung ist möglicherweise nicht perfekt, und es gibt möglicherweise viele Lösungen. Welche Kompromisse und Kompromisse hat jeder von ihnen bei der Lösung des Problems eingegangen? Wir müssen die Phänomene durchschauen, um das Wesentliche zu erkennen und uns nicht von der Oberfläche verwirren zu lassen.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über unser Verständnis moderner Front-End-Frameworks sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!