Front-End-Framework-Management

Dieses Mal werde ich Ihnen das Front-End-Framework-Management vorstellen. Was sind die Vorsichtsmaßnahmen für das Front-End-Framework-Management?

Die drei beliebtesten Frontend-Frameworks sind heute Angular2+, Vue und React. Sie alle nutzen die Ideen der Komponentisierung und

Modularisierung, um die Front-End-Entwicklung stärker zu standardisieren.

Aber auch die Mängel liegen auf der Hand. Neben unvollständiger Dokumentation, fehlenden Fällen und hohen Lernkosten ist auch die Zustandsverwaltung zwischen Komponenten ein großes Problem. Komponentisierung ist eine gute Sache, aber wenn der Datenfluss zwischen Komponenten nicht ordnungsgemäß gehandhabt wird, führt dies zu negativen Auswirkungen wie Projektverwirrung und Schwierigkeiten bei der Wartung.

Lassen Sie uns zunächst darüber sprechen, warum eine Statusverwaltung erforderlich ist:

Zum Beispiel verweisen zwei Listen auf dieselbe Datenquelle und der Benutzer nimmt Änderungen an einer der Listen und an der anderen Liste vor Auch die Daten ändern sich entsprechend. Die Lösung bei der Verwendung von angle1 ist sehr einfach: Verwenden Sie einfach $rootScope. Bei den drei Hauptframeworks gibt es jedoch kein Konzept für $rootScope. Was soll ich tun, wenn ich eine synchrone Datenaktualisierung erreichen möchte?

Manche Leute sagen vielleicht, dass dies einfach ist. Wenn der Benutzer Änderungen an der ersten Tabelle vornimmt, senden wir eine Nachricht an die zweite Tabelle und lassen diese die entsprechenden Daten ändern. Was aber, wenn es 10 oder 20 Tische gibt? Werden Sie die Mitteilungen einzeln abgeben? Wenn auch andere Komponenten diese Datenquelle nutzen, werden sie dann auch über Updates benachrichtigt?

Diese Lösung kann also machbar sein, wenn das Projekt einfach ist, aber wenn das Projekt komplex wird, werden Probleme sofort aufgedeckt. Um zu verhindern, dass zukünftige Projekte gekippt werden, sollten wir dennoch von Anfang an darüber nachdenken.

Das Konzept des Zustandsmanagements besteht darin, mit komplexen Datenflüssen umzugehen.

Die drei Hauptframeworks implementieren Zustandsverwaltungsmethoden:

Vue: Vuex

React: Redux (dva.js)

Angular2+: Redux ( ngrx)

Obwohl die drei Hauptrahmen unterschiedliche Lösungen für die Umsetzung des Staatsmanagements bieten, sind die zugrunde liegenden Ideen dieselben. Hier ist eine grobe Einführung:

Um ein Statusmanagement zu erreichen,

fügte das Projekt mehrere neue Module hinzu: Reduzierer, Effekte, Dienste und Modelle. Wenn es sich um Angular2+ handelt, gibt es auch Aktionens. Lassen Sie uns zunächst über die Funktionen dieser Module sprechen:

Modelle: Datenmodell. Speichert die Daten selbst und Methoden zum Ändern der Daten. In Angular2+ speichern Modelle Entitäten. Wer sich mit Backend beschäftigt hat, sollte damit vertraut sein. Es ist eine Aussage über Daten.

Reduzierer: Verantwortlich für Synchronisierungsvorgänge. Beispielsweise werden die angeforderten Formulardaten im Datenmodell gespeichert, der Benutzer fügt ein bestimmtes Datenelement hinzu bzw. löscht es und die Originaldaten werden geändert.

Dienste: Eine Kapselung der Aktion des Anforderns von Daten, im Allgemeinen einschließlich Methoden zum Abrufen von Daten. Wie getList(), getUsers().

Auswirkungen: Verantwortlich für asynchrone Vorgänge. Rufen Sie beispielsweise nach Erhalt der Anforderungsaktion des Benutzers den Dienst auf, um Daten vom Server anzufordern. Wenn dies erfolgreich ist, werden Reduzierer aufgerufen, um die Daten zu speichern. Wenn dies fehlschlägt, wird eine andere Aktion ausgeführt.

Angular2+ abstrahiert auch eine Ebene von Aktionen, die eine Kapselung verschiedener Aktionen darstellt. Beispielsweise werden Daten geladen, die Daten wurden erfolgreich geladen, der Benutzer löscht die Daten usw. Enthält den Datentyp und die Nutzlast (Daten, die zum Ändern der Daten verwendet werden).

Ein Benutzervorgang, z. B.

Suche

nach dem entsprechenden Produkt. Wenn der Benutzer die Bestätigungstaste drückt, kann der gesamte Vorgang ausgeführt werden zusammengefasst werden als:Der Benutzer gibt eine Anweisung aus –> ruft Reduzierer auf, um den Status zu ändern, und die entsprechende Komponente wechselt in den Ladezustand –> erfolgreich, ruft Reducer auf, um die Daten zu speichern und beendet den Ladevorgang -> Rendering Gehen Sie zu

Ansicht

. Wenn Reduzierer aufgerufen werden, um Daten zu aktualisieren, werden alle an das Modell gebundenen Ansichten synchron aktualisiert und jede Verarbeitungslogik wird ziemlich klar. Obwohl die Projektkomplexität zunehmen wird, wird die Wartung auf jeden Fall viel komfortabler sein.

Wenn Sie Schwierigkeiten haben, es zu verstehen, können Sie mit diesen beiden Fällen beginnen:

vuex-Zähler + Listenanzeige: http://www.cnblogs.com/axel10/p/8536688. html

dva.js Zähler + Listenanzeige: http://www.cnblogs.com/axel10/p/8503782.html

Am besten geeignet für den Einstieg ist Vue, dann React (mit dva.js) und am schwierigsten ist Angular2+. Angular2+ umfasst Rxjs und TypeScript und es gibt viele Wissenspunkte. Egal, ob es schwierig ist oder nicht, denken Sie immer daran, vom Flacheren zum Tieferen zu beginnen, und träumen Sie nicht davon, in einem Schritt den Himmel zu erreichen. Wenn Sie mit Angular1 noch nicht einmal vertraut sind, verwenden Sie Angular1 bitte zuerst gut, verstehen Sie die MVC-Ideen gut und beschäftigen Sie sich dann mit den drei Hauptframeworks. Andernfalls werden Sie wahrscheinlich mit doppeltem Aufwand die Hälfte des Ergebnisses erzielen und viel verschwenden Zeit.

Wenn Sie als Front-End-Ingenieur über die entsprechenden Voraussetzungen verfügen, wird empfohlen, eine Back-End-Sprache wie Java oder C# zu lernen, was beim Verständnis des Front-End-Frameworks eine große Hilfe sein wird.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Welche Klassen definieren Komponenten in React

Vue.js Formulareingabebindung

Das obige ist der detaillierte Inhalt vonFront-End-Framework-Management. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!