Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses
|
Hintergrund <br />Studenten, die am Front-End arbeiten, wissen, dass es unübersichtlich wird, wenn zu viele Seiten vorhanden sind. Deshalb müssen wir den Entwicklungsprozess vereinheitlichen. Die Qualität des Entwicklungsprozesses wirkt sich direkt auf die Effizienz der Seitenentwicklung und indirekt auf die Spieldauer aus. Ziel des Entwicklungsprozesses <br />Seiten können schnell fertiggestellt werden. Durch die Komponentenbildung wird die Wiederverwendung von Code sichergestellt, um Doppelarbeit zu vermeiden. Stellen Sie sicher, dass die Seite nach der Online-Schaltung effizient ausgeführt werden kann. Umfang des Entwicklungsprozesses <br />Standards zur Dateispeicherung. Die Organisationsstruktur und Codierungsstandards des Codes. Veröffentlichungsstrategie. Die erforderlichen Entwicklungstools zur Unterstützung des gesamten Prozesses. Jedes Team verfügt über eigene Entwicklungsvorgaben. Tatsächlich gibt es nicht die beste Prozessspezifikation, sondern nur die am besten geeignete. Im Folgenden wird eine Reihe allgemeiner Entwicklungsprozessspezifikationen vorgestellt, die auf der Grundlage der Entwicklungsprozesse mehrerer Teams zusammengefasst und optimiert werden. Ordnerspezifikation <br />Angenommen, der Projektordner ist p/. Dieser Ordner enthält: p/assets/ speichert Entwicklungstools p/dev/ speichert Projektdateien im Entwicklungsstatus p/dpl/ speichert die gemeinsame Komponentenbibliothek des Projekts p/release/ speichert freigegebene Projektdateien (die Dateien hier sind alle komprimiert) Die Struktur in p/dev/ ist : p/dev/website1/public/ Von der gesamten Site gemeinsam genutzte Projekte (von der gesamten Site gemeinsam genutzte Dateien speichern) p/dev/website1/project1/ Projekt 1 p/dev/website1/project2/ Projekt 2 .... Die Struktur innerhalb jedes Projekts ist: p/dev/website1/projekt1/seite1.html p/dev/website1/project1/assets/page1.js /dev/website1/project1/assets/page1.css p/dev/website1/projekt1/assets/bilder/ p/dev/website1/project1/include/page1.inc Die Struktur innerhalb von p/dpl/ ist : p/dpl/system/ System-JS-Modul p/dpl/controls/ UI-Modul p/dpl/widgets/ Geschäftskomponenten Die Struktur der einzelnen Ordner ist wie folgt: p/dpl/system/kategorie1/komponente1.html p/dpl/system/category1/assets/component1.js p/dpl/system/kategorie1/assets/komponente1.css p/dpl/system/kategorie1/assets/bilder/ Die Struktur innerhalb von p/release/ ist: Abhängig von der Online-Dateispezifikation kann es auch dasselbe wie p/dev/ sein. Komponentenbasierte Entwicklungsimplementierung 1. Von der gesamten Site verwendetes JS und CSS Das von der gesamten Site verwendete JS und CSS werden durch Auswahl einiger Komponenten aus p/dpl/ mithilfe von Tools synthetisiert. Fügen Sie es in p/dev/website1/public/assets/common.js (oder .css) ein. 2. JS und CSS, die nicht von der gesamten Site gemeinsam genutzt werden Mit dem folgenden Code kann eine Komponente in eine Webseite geladen werden: ?using("System.Kategorie1.Komponente1"); var comp1 = neue Komponente1(); Unter diesen wird System.Category1.Component1 auf p/dpl/system/category1/assets/component1.js (oder .css) abgebildet. Im Entwicklungszustand werden Komponenten durch die Verwendung synchron geladen. Nach der Veröffentlichung der Seite wird using durch den Quellcode der entsprechenden Komponente ersetzt, ohne dass ein dynamisches Laden erforderlich ist. 3. Asynchrones Laden von JS und CSS Der Prozess selbst bietet nicht die Funktion zum asynchronen Laden von Komponenten. Im Projekt kann jeder Modullader eines Drittanbieters verwendet werden, um das asynchrone Laden zu implementieren. 4. Wiederverwendung von HTML <br />Schreiben Sie include("include/topbar.inc") in die HTML-Datei, um das entsprechende HTML-Fragment in die Seite einzubetten. Seitenveröffentlichung <br />Bei der Seitenveröffentlichung geht es hauptsächlich um Folgendes: Inline-Includes und Usings usw. zur Reduzierung der Seitenaufrufe. Komprimieren Sie JS und CSS. Ändern Sie den Dateispeicherort erneut, um ihn den tatsächlichen Projektanforderungen anzupassen (Sie müssen beispielsweise JS und CSS extrahieren und HTML filtern). |
<<: Beispielcode zur Implementierung eines reinen CSS-Popup-Menüs mit Transform
>>: So stellen Sie Kafka in Docker bereit
Artikel empfehlen
Der Unterschied zwischen MySQL-Datenbankhost 127.0.0.1 und localhost
Viele meiner Freunde haben möglicherweise ein Pro...
Eine kurze Einführung in JavaScript-Arrays
Inhaltsverzeichnis Einführung in Arrays Array-Lit...
Was Sie über die Transaktionsisolierung von msyql wissen müssen
Was ist eine Transaktion? Eine Transaktion ist ei...
Implementierung des Hochladens großer Dateien und des durch Haltepunkte fortsetzbaren Hochladens in Vue
Inhaltsverzeichnis 2 Lösungen für den Dateiupload...
Detaillierte Erläuterung der Vue-Projektverpackung
Inhaltsverzeichnis 1. Zugehörige Konfiguration Fa...
Detaillierte Erklärung des Skript-Debugging-Mechanismus in Bash
Ausführen des Skripts im Debugmodus Sie können da...
Installation von mysql5.7 und Implementierungsprozess der langfristigen kostenlosen Nutzung von Navicate
(I) Installation von mysql5.7: ❀ Details: Die Ins...
Detaillierte Erläuterung des Lernens von CSS-Zählerattributen
Das CSS-Zählerattribut wird von fast allen Browse...
Detaillierte Erläuterung des MySQL-Trigger-Trigger-Beispiels
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...
Detaillierte Erklärung zur Verwendung von MySQL, wobei
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
Zusammenfassung der allgemeinen APIs und erweiterten APIs von Vue
Inhaltsverzeichnis nächstesTick Mixins $forceUpda...
IE6-Schriftart kann nicht definiert werden: Die Größe von 13 Pixeln ist ungültig. IE6 zeigt automatisch eine größere Schriftartlösung an.
Als ich vor einigen Tagen ein Modul einer Webseite...
Eine kurze Diskussion über das Prinzip der bidirektionalen Datenbindung von React
Inhaltsverzeichnis Was ist bidirektionale Datenbi...
Prozessdiagramm für die Ideenbereitstellung und Tomcat-Dienstimplementierung
Konfigurieren Sie zunächst die Projektartefakte K...
Tutorial zu HTML-Tabellen-Tags (23): Zeilenrahmen-Farbattribut BORDERCOLORDARK
In Zeilen können dunkle Rahmenfarben individuell ...