Dieses Mal werde ich Ihnen eine detaillierte praktische Erklärung des Vue Family Bucket-Projekts geben. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue Family Bucket zur Umsetzung des Projekts? Werfen wir einen Blick darauf.
Aus Front-End-Sicht kann man sagen, dass Vue derzeit das idealste Front-End-MVVM-Framework ist, und der Einstieg ist einfach Vue-Familien-Bucket (Vue+Vue-Router+Vuex) Der Prozess der Rekonstruktion eines jQuery+Template-Projekts und was ich dabei gelernt habe.
Erste Schritte
Die offizielle Dokumentation von Vue ist das beste Tutorial zum Erlernen von Vue. Da der Autor des Frameworks wahrscheinlich einen Design-Hintergrund hat und keinen Back-End-Hintergrund hat, können wir hier nur verschiedene abstrakte Konzepte auf die verständlichste Weise erklären Stellen Sie kurz die Konzepte von Vue, Vue-Router und Vuex vor. Für eine umfassende Studie wird empfohlen, die offizielle Dokumentation zu lesen.
Vue
Die Kernfunktion von Vue ist die bidirektionale Bindung, mit der schnittstellengesteuerte Datenänderungen und datengesteuerte Schnittstellenänderungen automatisch realisiert werden können, wodurch die Entwicklungskosten für Front-End-reiche interaktive Anwendungen erheblich gesenkt werden können. Es gibt mehr als ein ähnliches Framework wie Vue, aber die Implementierung von Vue bietet gewisse Leistungsvorteile durch die Nutzung der nativen Funktionen von ES5.
Vue-Router
Vue-Router ist die offizielle Route, mit der die Zuordnungsbeziehung zwischen URLs und Komponenten organisiert und automatisch auf Änderungen in den URLs der Komponenten reagiert wird, sodass sich Entwickler nur auf die Komponentenentwicklung konzentrieren müssen und das Routing Ihnen bei der Lösung verwandter Probleme hilft. Triviale Fragen.
Vuex
Vuex bietet ein zentralisiertes Datenverwaltungsmodell für den Umgang mit komplexen Datenflusssituationen. Beispielsweise teilen mehrere Komponenten Daten, arbeiten jedoch unabhängig voneinander, was dazu führen kann, dass die synchronisierten Daten nicht synchron sind oder aufgrund von Objektobjekt verweist auf dieselbe Instanz im Speicher, was dazu führt, dass andere Komponenten verunreinigt werden, sobald die Originaldaten manipuliert werden. Zu diesem Zeitpunkt ist ein besser organisierter Datenbetriebsmodus erforderlich, nämlich Vuex.
Technische Auswahl
Vergleich mit jQuery
Nachdem ich die Grundkonzepte von Vue verstanden habe, werde ich sie auf jeden Fall unbewusst mit dem jQuery-Technologie-Stack vergleichen und mich fragen, ob diese Dinge für mein Unternehmen wirklich notwendig sind. Können die von MVVM gelösten Probleme zunächst mit jQuery gelöst werden? Die Antwort lautet „Ja“. Erinnern Sie sich, dass Sie beim Absenden des Formulars jQuery verwendet haben, um Werte nacheinander aus den Eingaben abzurufen? Dies sind schnittstellengesteuerte Daten. Wenn Sie asynchrone interaktive Funktionen ausgeführt haben, sollten Sie Erfahrung mit der Verwendung von jQuery haben, um Ajax-Daten in verschiedene Elemente in der Schnittstelle einzugeben. Obwohl dies möglich ist, ist es etwas umständlich. Selbst wenn Sie ein Formularüberprüfungs-Plug-in und eine Front-End-Vorlagen-Engine verwenden, müssen Sie die Überprüfungsmethode und die Rendering-Methode auf jedem laufenden Knoten manuell aufrufen eine Website-Seite zu erstellen, aber wenn die Anforderungen bis zu einem gewissen Grad komplex sind, wird dies eine große Belastung sein. Dann gibt es Routing, bei dem es darum geht, die Schnittstellenumschaltung und -wartung durch den Betrieb von URLs zu erreichen. Dies hat eigentlich nichts mit dem Technologie-Stack zu tun Projekte, die auf jQuery basieren, stellen lediglich eine Route neu dar. Es ist nur so, dass Single-Page-Anwendungen im jQuery-Zeitalter selten erstellt werden. Vuex basiert vollständig auf der Erweiterung der bidirektionalen Bindung, was dem Hinzufügen eines Brokers zwischen den Daten und der Komponente entspricht. Die Komponente kann die Daten nicht direkt verarbeiten, sondern nur Betriebsanforderungen an den Broker übermitteln, und der Broker führt sie aus Um verschiedene unvorhersehbare Probleme zu lösen, die durch zu viele Personen und zu viele Hände verursacht wurden, und um die Daten aus der Anwendung zu verschieben, wurde speziell ein Speicher eingerichtet, um das Problem der Datenkontamination zwischen Komponenten zu beseitigen. Es sollte gesagt werden, dass jQuery diesen Bedarf nicht hat, da jQuery die Daten vollständig manuell verarbeitet und es überhaupt keine unerwarteten Situationen gibt.Anwendbare Szenarien
Nach dem Vergleich mit jQuery sind die anwendbaren Szenarien von Vue offensichtlich. Aus Entwicklungssicht sind Projekte mit komplexeren Interaktionen am besten geeignet, und Inhaltswebsites sind am wenigsten geeignet Auf der Website können sie auch teilweise verwendet werden, beispielsweise auf einer Warenkorbseite. Dies alles muss natürlich auf der Annahme basieren, dass es nicht mit IE8 kompatibel ist. Ich bin darüber etwas verwirrt, weil ich gesehen habe, dass einige 2C-Sites Vue verwenden.Projektanalyse
Projekthintergrund
Das Refactoring-Projekt ist dieses Mal ein Front-End-Komponentenmanagementsystem, das für ein früheres Unternehmen entwickelt wurde. Ich habe mich für die Umgestaltung dieses Projekts entschieden, weil ich mit den Anforderungen vertraut bin. Es handelt sich um eine typische Single-Page-Anwendung mit mäßiger Komplexität und ist für die Verwendung besser geeignet als praktische Übung.
Der Hintergrund des Projekts ist, dass bei Outsourcing-Website-Erstellungsunternehmen im Designprozess eine große Anzahl wiederverwendbarer Komponenten anfällt. Oft müssen Designer die Komponenten nur noch feinabstimmen, um die Seite zusammenzusetzen und an das Frontend zu liefern Theoretisch können diese Komponenten auch im Frontend wiederverwendet werden, aber tatsächlich muss das Frontend jedes Mal die gesamte Seite neu implementiert werden, was viel Arbeitskraft verschwendet.
Funktionale Anforderungen
Die Idee dieses Projekts besteht darin, alle Komponenten zu entwickeln und in eine einheitliche Plattform für die Verwaltung einzugeben. Designer können auf der Plattform Komponenten auswählen und in Echtzeit eine Vorschau der Komponenten anzeigen und anpassen Während des gesamten Prozesses generiert die Plattform ein Anpassungsergebnis. Solange der Code an das Front-End übergeben wird, können Sie diese Codezeichenfolge verwenden, um die vom Designer geänderte Komponente auf der Plattform zu reproduzieren Kopieren Sie auch den HTML/CSS/JS-Code der Komponente mit einem Klick und wenden Sie ihn schnell auf das Projekt an. Die Front-End-Entwicklungskosten für den Komponententeil liegen nahe bei Null. Die Plattform muss die folgenden Funktionen implementieren:
Komponenten verwalten, Klassifizierung, Suche, Sortierung unterstützen
Komponenten anzeigen, Online-Vorschau/Bearbeitung von Komponenten unterstützen
Komponentenübergabe, Komponentengenerierung unterstützen Code und Reproduktion der Komponente
Funktionsanalyse
Die erste Version wurde mit jQuery+template implementiert. Der Vorteil besteht darin, dass es einfach ist, alles zu tun, was erforderlich ist geht dabei oft mit Veränderungen einher.
Komponenten werden einheitlich in einem widgets/-Ordner abgelegt, der als Komponentenbibliothek bezeichnet wird. Da es sich um ein reines Front-End-Projekt ohne Dateioperationsfunktionen handelt, basiert das Lesen von Komponenten auf einer statischen JSON-Datei Komponentenbibliothek, die Komponenten enthält, wie Kategorien, Tags, Namen, Daten usw., die Datenstruktur ist ungefähr so:
[{
"title": "导航类",
"list": [{
"widget": "bread-1",
"title": "图标面包屑",
"tag": "面包屑/图标",
"author": "UI",
"date": "2015-06-04"
},
...]
},
...]Komponenten werden in der Komponentenbibliothek in Form von spalten-/nummerierten Sekundärordnern gespeichert, und es wird vereinbart, das Speicherverzeichnis als Komponentencode zu verwenden. Beispielsweise bedeutet Komponente bread-1, dass die Speicheradresse der Komponente widgets/bread/ ist. 1/ Ordner.
Natürlich muss auch die interne Dateistruktur der Komponente vereinbart werden, und zwar wie folgt:
widgets |-bread |-1 |-album.jpg //缩略图 |-config.json //配置文件 |-script.js //脚本模板 |-style.css //样式模板 `-temp.htm //界面模板
Mit diesen Konventionen kann das Programm die Informationen aller Komponenten über Verzeichnisdateien abrufen und auch die Erfassung, Anzeige und den Abruf von Komponenten realisieren.
Das Wichtigste in der Komponente ist die Datei config.json, die die konfigurierbaren Elemente der Komponente und ihre Standardwerte enthält. Die Plattform liest diese Konfigurationsdatei, wenn sie die Komponente anzeigt, und generiert hier ein Konfigurationsfenster Sie können alle Variablen in der Komponente Schnittstelle, Stil und Skript definieren. Die Konfigurationsdatei könnte wie folgt aussehen:
{
"cssConfig": {
"fontSize": {
"name": "字号",
"value": "12px",
"type": "text"
},
...
},
"jsConfig": {
...
},
"showConfig": {
"viewWidth": {
"name": "栅格宽度",
"value": 12,
"type": "number"
},
...
}
}Die drei Zweige cssConfig, showConfig und jsConfig in der Konfigurationsdatei sind die Sammlung aller Variablen, die in der Komponente geändert werden können. Wenn Sie diese Variablen auf die Komponente anwenden möchten, müssen Sie die Front-End-Vorlagen-Engine verwenden. Daher werden die drei Hauptkomponenten der Komponente mithilfe der Vorlagensyntax entwickelt, und nach dem Parsen durch die Vorlagen-Engine kann der tatsächlich konfigurierte HTML/CSS/JS-Inhalt abgerufen werden. Die Stilvorlage sieht beispielsweise so aus:
.widget-bread-1 {
font-size: ${fontSize.value};
color: ${textColor.value};
}
.widget-bread-1 a {
color: ${textColor.value};
}
.widget-bread-1 a:hover{
color:${hoverColor.value};
}
.widget-bread-1 .ion {
font-size: ${iconSize.value};
margin: 0 ${iconMargin.value};
}Nachdem Sie den eigentlichen Code der Komponente erhalten haben, fügen Sie einfach das Ergebnis in die Seite ein und aktualisieren Sie es rechtzeitig. Da js modular eingeführt wird, wird nur der Modulinhalt ersetzt Das Modul wird nicht überlastet. Nachdem das Modul umbenannt wurde, wird das gesamte Modul ersetzt, sodass der Name des js-Moduls zufällig ist.
Hier liegt ein Problem vor, das mehrere Male auf der Seite verwendet werden muss, sodass der js-Selektor dieser Komponente mit Hilfe des zufälligen Namens des js-Moduls in Konflikt geraten kann id wird während der Komponentenentwicklung verwendet. Die Plattform weist automatisch einen zufälligen String zu, der innerhalb der Komponenteninstanz gleich ist und sich auf diese Weise unterscheidet, solange ${id} gilt Wenn es als ID oder Klasse des übergeordneten Knotens der Komponente verwendet wird, wird der Selektorkonflikt gelöst. Es kann auch als CSS--Namespace der Komponente verwendet werden, sodass mögliche CSS-Namenskonflikte unsichtbar gelöst werden können.
Dies sind die Kernfunktionen des Projekts.
Darüber hinaus wird localStorage als Speichermethode zum Implementieren von Datenstatistiken für die eigenständige Version verwendet. Es kann die Komponentennutzungsdatensätze des aktuellen Browsers und die Konfiguration jeder Verwendung erfassen. Dies ist jedoch hauptsächlich der Betrieb des lokalen Speichers Wird auch für die Entwicklung des Projekts selbst verwendet, und Komponentenvorlagen werden nach dem ersten Laden im Cache gespeichert. Die Caching-Strategien für diese Inhalte sollten unterschiedlich sein , Projektvorlagen sollten manuell aktualisiert werden, und Komponentenvorlagen müssen entsprechend der Situation bestimmt werden. Wenn zu viele Inhalte gespeichert sind, ist es unrealistisch, sie alle während der Bereinigung zu löschen Die Methode hier besteht darin, den LocalStorage-Vorgang zu kapseln und die Speichermethode vor dem Schlüssel hinzuzufügen. Beim Löschen eines speziellen Präfixes müssen Sie nur den lokal gespeicherten Schlüssel durchlaufen und feststellen, ob er übereinstimmt Das Präfix muss wissen, ob es in der Anwendung gespeichert ist. Die entsprechende Methode zum Abrufen des Werts muss das Präfix auch umgekehrt zum Schlüssel hinzufügen und dann den Wert abrufen.
Darüber hinaus unterstützt localStorage nur den Zugriff auf Zeichenfolgen. Die Kapselungsmethode unterstützt jedoch auch die automatische Konvertierung, wenn ein Objekt gefunden wird zu einem Objekt wird automatisch übertragen, da der Benutzer manchmal tatsächlich eine Objektzeichenfolge speichern und sie beim Herausnehmen zurückerhalten möchte. Um dieses Problem zu lösen, muss die Speichermethode geändert werden Erkennt, dass es sich bei dem Wert um ein Objekt handelt, wird er in eine Zeichenfolge umgewandelt und anschließend mit einer vorangestellten Zeichenfolge versehen. Die Wertmethode stellt die folgende Zeichenfolge erst dann wieder her, wenn diese Identifikation erkannt wird. Diese Methode kann jedoch die Anforderungen erfüllen Da dieses Präfix festgelegt ist, ist es theoretisch immer möglich, auf einen Lottogewinner zu stoßen. Ich weiß nicht, ob es andere bessere Lösungen für dieses Problem gibt.
Dies sind die Hauptfunktionspunkte des Projekts.
Refactoring
Eine Rekonstruktion
Das erste, was mir während des Refactoring-Prozesses auffiel, waren die verschiedenen Annehmlichkeiten, die ich ursprünglich mit dem Framework erreichen wollte, aber jetzt habe ich es getan kann dies direkt in der Vorlage tun. Bindungen und verschiedene andere syntaktische Zucker.
Das Wichtigste ist natürlich die bidirektionale Bindung. Dadurch können die Schnittstelle und die Daten automatisch verknüpft werden, sodass die Benutzer das Gefühl haben, dass das Programm über ein gewisses Maß an Autonomie verfügt Bei normalem Betrieb müssen Entwickler jeden Schritt im Voraus planen, da dies weniger kostenlos erscheint als jQuery. Nehmen Sie als Beispiel das Bewegen von Ziegeln. jQuery ist wie ein besonders flexibler Kran, der Ziegelsteine mit Leichtigkeit heben und auf elegante Weise bewegen kann. Sie sagen ihm, dass Sie Ziegelsteine von einem bestimmten Ort bewegen möchten Was während des Vorgangs passiert, hängt davon ab, wie damit umgegangen wird. Die Steine können durch Drücken der Taste automatisch verschoben werden.
Beide Methoden haben ihre eigenen Vor- und Nachteile. Wenn der Kran gut gefahren wird, kann er sehr flexibel sein und es ist leicht, Gruben auf der Straße zu vermeiden Der Nachteil besteht darin, dass Sie die Position auf der Straße im Voraus festlegen, Inspektionen vor Ort durchführen, alle anderen Autos planen und alle Situationen klar erklären müssen, da das Auto sonst umkippt oder abstürzt. Wenn Sie von jQuery zu Vue wechseln, werden Sie definitiv dieses Gefühl der Zurückhaltung spüren, das Sie dazu zwingt, „zu planen, bevor Sie handeln“. Sie können nicht darüber sprechen, bevor Sie ins Auto steigen.
Ein großer Teil der Arbeit während der Rekonstruktionsphase besteht darin, Vue-Instanzen einzurichten, in allen Ecken von js verstreute Daten zu Daten zu sammeln, den Prozess der Verarbeitung von Daten Stück für Stück in Methoden zu konzentrieren und den Datenfilterungsprozess auf Berechnungen zu konzentrieren In diesem Ganzen Im Prozess können Sie jedes Implementierungsdetail klar überprüfen und darüber nachdenken, ob jede Implementierungsmethode sinnvoll ist. Tatsächlich besteht die Zusammenfassung darin, den ursprünglichen Prozess des Fahrens eines Krans einzeln in Fernbedienungstasten zusammenzufassen Beispiel Es wird unser letztes Projekt, das automatisch ausgeführt werden kann.
Nach der Rekonstruktion hat sich die Codemenge im logischen Teil durch die Verwendung verschiedener Funktionen von Vue verringert. Da es kein Routing gibt, besteht weiterhin das Problem, dass der Status der Aktualisierungsseite verloren geht existiert, da Vuex nicht verwendet wird. Wenn Sie auf eine Datenverschmutzungsgrube stoßen, können Sie diese nur mithilfe von Deep Copy lösen. Das komponentenbasierte Entwicklungsmodell führt zu einer stärkeren Fragmentierung dieser Probleme.
Zweite Rekonstruktion
Das Ziel der zweiten Rekonstruktion besteht darin, Routing, Vuex, Code-Organisation und Dingo Cloud-Backend zu verbessern.
Obwohl ich die Erfahrung des ersten Refactorings habe, bin ich zu Beginn des zweiten Refactorings immer noch etwas verwirrt. Welches sollte zuerst implementiert werden, Routing oder Vuex? Nachdem ich darüber nachgedacht habe, ist die Aufgabe des Routings „Abreißen“ und die Aufgabe von Vuex „Ändern“. Ich habe das Gefühl, dass der Arbeitsaufwand für die Demontage nach der Änderung geringer sein wird, daher verwende ich zuerst Vuex.
Das Konzept von Vuex ist aus dem Nichts zu verstehen, aber sobald Sie es verwenden, können Sie es im Gegensatz zum Routing ohne Unterscheidungsszenarien verwenden. Nach der Einführung von Vuex besteht das Problem der Datenverschmutzung ist natürlich gelöst, und Vuex bringt action => mutation => Sobald der Prozess akzeptiert ist, werden die Dinge wirklich einfacher. Der Prozess der Einführung von Vuex besteht im Wesentlichen darin, Daten in den Speicher zu übertragen und die Datenoperationen in Aktionen, Getter und Mutationen aufzuteilen. Gleichzeitig gibt es keine synchronen Datenoperationen mehr benötigt, wodurch der Code erstellt wurde. Die Menge wurde etwas reduziert.
Danach begann ich mit der Einführung des Routings. Ich war mir zunächst nicht sicher, wie ich die Ansichten aufteilen sollte. Die Frage ist, ob die Hauptschnittstelle unterteilt werden muss kann sehr fein unterteilt werden, aber basierend auf den tatsächlichen Anwendungsszenarien wird festgestellt, dass Schnittstellenwechsel relativ häufig sind und das häufige Laden und Entladen von Komponenten viel kostet. Darüber hinaus erfordert die Aufteilung eng gekoppelter Komponenten in verschiedene Ansichten die Aufzeichnung vieler Statusinformationen , was den Gewinn nicht wert ist. Am Ende haben wir aufgegeben und die Hauptansicht nicht geändert. Da die Zugriffsüberlappung der drei Ansichten nicht hoch ist, ist es selbstverständlich, die Komponente asynchron zu laden und die Komponente nur zu laden, wenn auf sie zugegriffen wird. Vue selbst unterstützt asynchrone Komponenten, sodass dies sehr einfach wird, sofern dies möglich ist Geben Sie ein Versprechen zurück, Sie können Komponenten auf beliebige Weise erhalten.
Als nächstes müssen wir auf die Wild Dog Cloud zugreifen, um eine echte Benutzerverwaltung und Datenstatistik zu erreichen. Die Wild Dog Cloud kann eine Reihe von Funktionen wie Benutzerauthentifizierung und Datenspeicherung bereitstellen. Dadurch kann eine vollständige WEB-Anwendung nur mit js entwickelt werden . Auf diese Weise müssen alle vorherigen Vorgänge auf localStorage in Vorgänge in der Wild Dog Cloud geändert werden, und die Daten werden zuverlässiger, wenn sie die Cloud erreichen.
Zu diesem Zeitpunkt ist das zweite Refactoring abgeschlossen. Der gesamte Geschäftscode wird jedoch voraussichtlich nicht viel geringer sein. Nach vielen Aufteilungen wurden jedoch drei Framework-Dateien hinzugefügt Die Anzahl der Dateien ist von den ursprünglichen drei oder zwei js-Dateien gesunken. Es sind ein Dutzend js geworden, und Seajs wird für die Modularisierung verwendet, weil persönlich Webpack hat immer noch eine abwartende Haltung und ich habe noch nicht das Gefühl, dass es notwendig ist, es zu verwenden. Der Schlüssel liegt darin, dass der auf Webpack basierende Code mit vielen privaten Dingen vermischt wird, wodurch Ihr Code nicht nativ wird Und ich glaube nicht, dass es ohne es laufen kann, und in Multi-Page-Szenarien hat Seajs in Kombination mit lokalem Caching natürlich den gleichen Unterschied und Vue. Sie sind im Wesentlichen nicht dasselbe. Der Schlüssel liegt im Verwendungsszenario.
Postskriptum
Nach zwei Refactoring-Praktiken und Fallstricken habe ich ein tieferes Verständnis des Vue-Frameworks. Wenn Vue flexibel und frei verwendet werden soll, gibt es eine Mindestanforderung an die Projektarchitekturfähigkeiten. Wenn Vue in die unterste Ebene eingeführt werden soll. Die Grundlagen Es gibt auch eine Mindestanforderung an die Planungsfähigkeiten von Anlagenbauern, die im jQuery-Technologie-Stack nicht vorhanden sind. Der Prozess der Verwendung von Vue ist auch ein Prozess, bei dem diese Einschränkungen akzeptiert werden. Sie können Entwickler bei der Einrichtung ihrer eigenen Regelsysteme unterstützen . Das ist eine gute Sache und der allgemeine Trend. Denn wahre Freiheit gibt es nur innerhalb von Regeln.
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:
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Projektpraxis der Vue-Familie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
