Einführung in Tools zur Wiederverwendung von Front-End-UI-Komponenten

„Faulheit“ ist die primäre Produktivkraft.

Die Wiederverwendung von Code wird von Programmierern immer begrüßt. Das ultimative Ziel der Front-End-Komponentisierung ist die Wiederverwendung. Heute werden wir ausführlich besprechen, wie die Wiederverwendung von UI-Komponenten erreicht werden kann.

Normalerweise handelt es sich bei dem, was wir als Komponenten bezeichnen, häufig um Front-End-Komponenten, die Geschäftslogik enthalten. Tatsächlich ist es schwierig, solche Komponenten im weitesten Sinne wiederzuverwenden. Sie können höchstens im selben Geschäftsbereich wiederverwendet werden. Aber UI-Komponenten sind unterschiedlich. Da es keine geschäftlichen Einschränkungen gibt und die Wiederverwendung nur auf UI-Ebene möglich ist, gibt es viel Raum für Fantasie. Deshalb besprechen wir hier nur UI-Komponenten.

Lassen Sie uns zunächst definieren, dass die UI-Komponente das Front-End-Codefragment einer Weboberfläche ist. Obwohl sie keine geschäftlichen Funktionen enthält, sind grundlegende JS-Effekte verfügbar, z. B. Formularüberprüfung und Karusselleffekt. Tab-Effekt usw. usw., was bedeutet, dass UI-Komponenten HTMLCSSJS enthalten können. Der Zweck unserer Wiederverwendung besteht nicht darin, einfach zu kopieren und einzufügen, sondern einen gewissen Grad an Anpassung zu erreichen. Beispielsweise können der Inhalt der Benutzeroberfläche angepasst, der Anzeigestil angepasst und sogar JS-Effekte eingestellt werden Wie kann die Wiederverwendung von Komponenten wirklich von praktischem Wert sein?

Dann lassen Sie uns darüber nachdenken, wie wir die oben genannten Ziele erreichen können. Die erste und wichtigste Sache ist die Komponentenanpassungsfunktion. Anpassung bedeutet, dass der HTMLCSSJS-Code einer Komponente geändert werden kann und der Bearbeitungsprozess WYSIWYG erfordert. Wir können diese Funktion mit Hilfe einer Template-Engine implementieren. Die Idee besteht darin, alle Komponentencodes in Template-Syntax zu schreiben und dann Konfigurationsdaten zu extrahieren. Die Template-Engine verwendet diese Daten, um die Vorlage zu analysieren, und dann erhalten wir den endgültigen Code dass der Browser ausgeführt werden kann. Der Prozess der Änderung der Konfiguration ist auch der Prozess der Bearbeitung der Konfigurationsdaten. Nach der Bearbeitung wird die Vorlagen-Engine in Echtzeit aufgerufen, erneut analysiert, um den neuen Code zu erhalten, und dann wird der Code in Echtzeit im Browser aktualisiert. Erkennen Sie, was Sie sehen, was Sie während des Bearbeitungsprozesses erhalten.

Aufgegliedert muss diese Funktion grob die folgenden Teile implementieren: Erfassung des Komponentencodes, Visualisierung von Konfigurationsdaten, Aufruf der Template-Engine, Bearbeitung der Konfigurationsdatei, Komponentendemonstration und Komponenten-HTML/CSS/JS-Code kopieren.

Um es noch weiter auszudehnen, muss die automatische Erfassung des Komponentencodes auf bestimmten Organisationsregeln beruhen, sodass zunächst die Verwaltungsmethode der Komponente vereinbart werden muss. Die vereinbarte Komponente besteht beispielsweise aus einem Ordner, der temp.html/style.css/script.js drei Vorlagendateien sowie eine config.json Konfigurationsdatendatei enthält. Komponenten sollten über einen allgemeinen Speicherordner als Komponentenbibliothek verfügen. Um Komponenteninformationen abzurufen, benötigt die Komponentenbibliothek außerdem eine Verzeichnisdatei, die eine Liste aller Komponenten und Informationen zu jeder Komponente bereitstellt, sodass Komponenten über dieses Verzeichnis abgerufen werden können. Vorlagen, Konfigurationen und alle Informationen, die wir benötigen.

Basierend auf der obigen Analyse können wir mit der Entwicklung eines UI-Komponentenverwaltungstools beginnen, das Komponentenverwaltungs-, Vorschau-, Bearbeitungs- und Code-Kopierfunktionen realisieren kann.

Wenn Sie hier aufhören, dann ist der praktische Wert dieses Tools nicht sehr groß. Durch die Konzentration auf die Wiederverwendung von Front-End-Code können die Funktionen weiter erweitert werden. Können wir beispielsweise bereits in der Entwurfsphase an der Front-End-Komponentenverwaltung teilnehmen? Der Designer veröffentlicht und pflegt die interne UI-Komponentenbibliothek des Unternehmens. Während der Projektentwurfsphase können grundlegende Komponenten aus der Komponentenbibliothek ausgewählt werden, die angepasst werden sollen, und die Ergebnisse werden an das Frontend geliefert Komponenten, um die Funktionalität zu erhalten, wird direkt im Front-End-Code des Projekts verwendet.

Zur Überprüfung besteht die Funktion, die von der Komponentenbibliothek implementiert werden muss, darin, aus dem Bearbeitungsergebnis der Komponente einen speziellen Code zu generieren. Dieser Code wird verwendet, um die Bearbeitungsseite der Komponente im Verwaltungstool wiederherzustellen , wodurch der Designprozess bis zur Front-End-Übergabe realisiert wird. Das Implementierungsprinzip dieser Funktion besteht darin, die ursprüngliche Konfiguration der Komponente mit der geänderten Konfiguration zusammenzuführen, die geänderte Konfiguration der Komponente abzurufen und sie dann zum Rendern und Anzeigen der Komponente zu verwenden, sodass die Entwurfsszene wiederhergestellt werden kann.

Zu diesem Zeitpunkt sind die von uns benötigten Funktionen im Wesentlichen vollständig. Auf der Grundlage der oben genannten Funktionen wurden Benutzerverwaltung und Nutzungsstatistiken hinzugefügt, um die Komponentenbibliothek besser zu optimieren. Konstruktion.

Quellcode: Github
Vorschau:

Wenn das Projekt für Sie hilfreich ist, gehen Sie bitte zu Github und markieren Sie es. Gern geschehen.

Das obige ist der detaillierte Inhalt vonEinführung in Tools zur Wiederverwendung von Front-End-UI-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!