Best Practices für Front-End-Cloud-Komponenten basierend auf AngularJS

AngularJS ist ein von Google entworfenes und entwickeltes Front-End-Entwicklungsframework, das Entwicklern dabei helfen kann, die Front-End-Entwicklung bequemer durchzuführen. AngularJS wurde entwickelt, um die Mängel von HTML beim Erstellen von Anwendungen zu überwinden. Es ist sehr umfassend und leicht zu erlernen, sodass AngularJS schnell zum Mainstream-Framework für JavaScript geworden ist.

1. Amazing Angular

Funktionen von AnguarJS

Bequemes REST: RESTful hat sich nach und nach zu einer Standardmethode für die Kommunikation zwischen Servern und Clients entwickelt. Sie müssen nur eine Zeile Javascript-Code verwenden, um schnell Daten vom Server abzurufen. AugularJS wandelt diese in JS-Objekte als Modell um und folgt dabei dem MVVM-Entwurfsmuster (Modelview View-Model).

MVVM-Retter: Model interagiert mit ViewModel (über das $scope-Objekt) und wartet auf Änderungen im Model. Es kann über View gesendet und gerendert werden, und der Code wird über HTML angezeigt. Ansichten können über $routeProvider-Objekte manipuliert werden, sodass Sie Ihre Ansichten und Controller tief verknüpfen und organisieren und sie in Navigations-URLs umwandeln können. AngualrJS bietet außerdem einen zustandslosen Controller, der zur Initialisierung und Steuerung des $scope-Objekts verwendet werden kann.

Datenbindung und Abhängigkeitsinjektion: Alles im MVVM-Entwurfsmuster kommuniziert automatisch mit der Benutzeroberfläche, egal was passiert. Dies hilft uns, Wrapper, Getter/Setter-Methoden oder Klassendefinitionen zu entfernen. AngularJS hilft uns dabei, all dies zu bewältigen, und Sie können Daten genauso verarbeiten wie grundlegende JavaScript-Datentypen. Selbstverständlich können Sie durch Individualisierung auch mit komplexen Daten umgehen. Da alles automatisch geschieht, müssen Sie nicht main() aufrufen, um Ihren Code auszuführen, sondern er wird durch Abhängigkeiten gesteuert.

Erweiterbares HTML: Die meisten Websites werden mit nicht-semantischen

-Tags erstellt. Sie müssen die entsprechende DOM-Hierarchie selbst in der CSS-Klasse definieren. Mit AngularJS können Sie HTML wie XML bedienen und es gibt unzählige Möglichkeiten, Tag- und Attributdefinitionen zu vervollständigen. AngularJS vervollständigt die zugehörigen Einstellungen über seinen eigenen Compiler und seine eigenen Anweisungen, was auch den Grundstein für die Komponentenimplementierung bildet.

Wenn jeder mit jQuery in Kontakt kommt, stellt er fest, dass er es im Voraus binden und die Daten abrufen muss, bevor er sie wieder stopft. Der Füllvorgang erfordert seine eigene Sorgfalt. Bei Angular erfolgt der Datenabruf jedoch automatisch durch das Einfügen von Variablen, einschließlich der Ereignisbindung. Datenbindung, MVVM und Abhängigkeitsinjektion geben Ihnen das Gefühl, dass Sie sich in der Vergangenheit nicht um viele Dinge kümmern müssen. Sie müssen nur der Datenstruktur und der Geschäftsschicht mehr Aufmerksamkeit schenken. Dies befreit uns von der mühsamen DOM-Bindung.

2. Der Weg zur Komponentisierung

Komponenten sind einfache Kapselungen von Daten und Methoden. Hier werden Komponenten mit UI-Effekten wie Stilklassen und Befehlstypen, Methoden usw. zusammenfassend bezeichnet Komponenten. Bei umfangreicher Software ist die Komponentisierung ein Konsens, was einerseits die Entwicklungseffizienz verbessert und andererseits die Wartungskosten senkt.

Komponentisierung und Komponentenpräsentation

Es gibt viele Dinge, die mit der Komponentisierung erledigt werden können, beispielsweise die Erstellung von Vorlagen. Jetzt wird die Aufgabe der Vorlagenerstellung an das Frontend übergeben. Die zweite ist eine Bibliothek im öffentlichen Stil, die dritte ist eine öffentliche Funktionsbibliothek und einige Geschäftskomponenten. Die Modularität ist etwas Besonderes. Die allgemeine Darstellungsform von

-Komponenten umfasst: eine einheitliche Stilbibliothek, Codefragmente mit einer bestimmten HTML-Struktur, einige von JS gesteuerte Funktionsfunktionen und bestimmte Steuerelemente für die Dateneingabe und -ausgabe.

3. Cloud-Komponenten aufdecken

Das Konzept der Cloud und Cloud-Komponenten

Cloud ist eine Metapher für Netzwerk und Internet. In der Vergangenheit wurde die Cloud häufig zur Darstellung von Telekommunikationsnetzen verwendet, später wurde sie auch zur abstrakten Darstellung des Internets und der zugrunde liegenden Infrastruktur verwendet.

Cloud-Dienste beziehen sich auf die bedarfsgerechte und leicht skalierbare Bereitstellung erforderlicher Dienste über das Netzwerk. Solche Dienste können IT-, Software-, Internet- oder andere Dienste sein. Das bedeutet, dass Rechenleistung auch als Ware über das Internet zirkulieren kann. Die Kombination aus Cloud und Komponenten bildet Cloud-Komponenten. Letztendlich hoffen wir, alle N Projekte gemeinsam durch eine einheitliche Steuerung steuern zu können.

Komponententypen von Goutui

Zu den Komponententypen von Goutui gehören Stilkomponenten, Befehlskomponenten, Servicekomponenten, öffentliche Filter, öffentliche Funktionsbibliotheken usw.

Anhand der Komponentenklassifizierung können Sie erkennen, dass das exklusive CSS eine Stilkomponente ist. Das Hinzufügen einer Vorlage ist eine sehr einfache Komponente und das anschließende Hinzufügen eines Controllers verfügt über ein bestimmtes JS und Komponenten mit einer bestimmten Logik können durch das Hinzufügen von Links, Animationen und Datenebenen über bestimmte Eingabe- und Ausgabefunktionen verfügen. Diese Datenschicht kann mehrere Arten von Daten enthalten, oder sie kann eine sehr leistungsstarke Komponente sein, die direkt mit dem Server kommuniziert, um Daten abzurufen und zu übertragen für unsere aktuelle Umgebung besser geeignet sein, letztere wird höhere Anforderungen an eine einheitliche Schnittstelle stellen.

Das Bild oben ist eine technische Lösung zum Pushen von Cloud-Komponenten. Basierend auf den drei Haupt-Front-End-Komponenten und einigen anderen Bibliotheken wie Geofence-Komponenten (wir müssen Baidu Maps unser gesamtes Projekt verbinden lassen) gibt es auch Visualisierungsprojekte, wie zum Beispiel den Personenfluss an einem malerischen Ort in Hangzhou während des G20-Zeitraum: Das Visualisierungsprojekt wird Bibliotheken von Drittanbietern verwenden. GeTui verwendet LESS zum Schreiben von CSS und entwickelt darauf basierende Cloud-Komponenten.

Aus einigen Situationen von Cloud-Komponenten lässt sich ableiten, dass ihr Best-Practice-Ziel darin besteht, von einem Verwaltungssystem mit bestimmten gemeinsamen interaktiven Tabellenformularklassen auszugehen, nach und nach komplexe interaktive Systemanwendungen einzubeziehen und bestimmte Anforderungen an die Reaktionsfähigkeit zu stellen . GeTui begann als Push-Dienst und entwickelte später viele Produktlinien. Es wird viele 2B- und 2C-Plattformen für Push-Dienste geben, die verwaltet werden.

Das Bild oben zeigt die von der Tuiyun-Komponente verwendete Verzeichnisstruktur. Es gibt einen wd-Ordner im CSS, das hauptsächlich in einigen Bibliotheken von Drittanbietern platziert wird. Das Wichtigste ist Folgendes: Dasselbe gilt für JS, wd ist die Basisbibliothek. Die fünfte ist die wichtigste. Alle Komponenten werden in diesem Ordner abgelegt. Jede Komponente enthält ihre eigenen drei Hauptkomponenten – Vorlage, Logik, Interaktion, Wirkung und Stil.

Gulp-basierte Verpackung

Anzeigeseite für Cloud-Komponenten

Die Benutzer von Cloud-Komponenten sind hauptsächlich in drei Kategorien unterteilt, die erste Kategorie Sie sind Front-End-Benutzer (einschließlich allgemeinem Front-End-Personal). Sie müssen schnell lernen, wie man Komponenten verwendet und verwendet (sie müssen einige grundlegende Konzepte und die Verwendung von Angular kennen). Die zweite Kategorie sind UI-Designer, Projekte und Produkte usw. Sie müssen beobachten, ob der Effekt geeignet ist, und neue solche Systeme basierend auf der Bibliothek entwerfen. Die dritte Kategorie sind Touristen und anderes Personal.

Neue Gedanken zu Cloud-Komponenten

Cloud-Komponenten können sich auf den gesamten Körper auswirken. Wenn der Cloud-Komponenten-Mechanismus nicht richtig genutzt wird, beispielsweise wenn eine alte Komponente aktualisiert wird und ein Fehler auftritt, kann dies der Fall sein wird viele negative Auswirkungen haben, was sollten wir zu diesem Zeitpunkt tun?

Zurück zum Anfang der Cloud: Es ist nicht schwer festzustellen, dass diese Auswirkungen nicht auftreten, wenn Ressourcen isoliert werden (Cloud-Komponenten nutzen ihr umgekehrtes Denken, um Bequemlichkeit zu erreichen), und dann werden wir relativ dazu in der Lage sein, Ressourcen zu schließen diese Auswirkungen reduzieren. Dabei handelt es sich um eine Versionskontrolle, bei der verschiedene Projekte auf entsprechende Clouds verweisen, um das Gleichgewicht zwischen den beiden gerade genannten zu erreichen und die Ergebnisse zu optimieren.

Deshalb können die Vorteile von Cloud-Komponenten nur durch eine vernünftige Steuerung wirklich freigesetzt werden.

Bei mehreren Versionen sieht unser Entwicklungsmodell vor, dass das Cloud-Komponenten-Upgrade eines bestimmten Projekts vom Projekt bestimmt wird. Denn wenn die Cloud-Komponente veröffentlicht wird und alle Projekte die Cloud-Komponente aktualisieren, sind die Kosten für das Backtesting sehr hoch. Darüber hinaus reicht die ursprüngliche Cloud-Komponentenversion für die aktuelle Version der zuvor gestarteten Projekte aus.

Getui-Projektsystemdiagramm

Probleme bei der tatsächlichen Verwendung

Die Veröffentlichung von Cloud-Komponenten hat eine gewisse Periodizität, aber die tatsächlichen Anforderungen Auf Projekte muss schnell reagiert werden. In diesem Fall muss die Entwicklung von Cloud-Komponenten-Erweiterungsmodulen (Modus) verwendet werden: Entwickeln Sie die Module auf Komponentenebene dieses Projekts basierend auf Cloud-Komponenten und erweitern oder passen Sie die Cloud-Komponenten auf Projektbasis an .

4. Erfahrungen und Zusammenfassung zu AngularJS

Erstens, Modularisierung: Seien Sie jederzeit darauf vorbereitet, die Abstraktion zu modularisieren, was ein dynamischer Prozess ist.

Zweitens: Denken Sie mehr über die Umgebung und die Teile jenseits der Grenze nach – denken Sie aus einer anderen Perspektive, erleichtern Sie den Downstream und arbeiten Sie rückwärts zum Upstream.

Drittens gibt es keine unerreichbaren Effekte, sondern nur unerträgliche Kosten.

Viertens gibt es viele Methoden, Sie können sie alle ausprobieren, wenn es die Zeit erlaubt.