ÜberblickVue (ausgesprochen /viu/, ähnlich wie „view“) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen, das im Februar 2014 veröffentlicht wurde. Anders als andere große Frameworks ist Vue darauf ausgelegt, Schicht für Schicht von unten nach oben angewendet zu werden. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, was nicht nur den Einstieg erleichtert, sondern auch die Integration in Bibliotheken von Drittanbietern (wie z. B.: Offizielle Website: https://cn.vuejs.org/v2/guide/ Front-End-WissenssystemBis zum echten „Internet Java Full-Stack Engineer“ ist es noch ein weiter Weg, und „Ich bin ein großer Front-End-Experte“ ist ein Pflichtkurs, den man nicht umgehen kann. Der Hauptzweck dieser Kursphase besteht darin, meinen Java-Backend-Programmierern beizubringen, das Frontend zu erkennen, zu verstehen und zu beherrschen, um so einen weiteren Schritt auf dem Weg zu einem „Internet-Java-Full-Stack-Programmierer“ zu machen. Drei Elemente des Frontends
Präsentationsschicht (CSS)CSS ist eine Auszeichnungssprache und keine Programmiersprache. Sie können daher keine Variablen anpassen oder auf sie verweisen. Mit anderen Worten bietet es keine Syntaxunterstützung. Die Hauptmängel sind folgende:
Für uns ist dadurch viel unnötiger Mehraufwand entstanden. Um dieses Problem zu lösen, verwenden Front-End-Entwickler ein Tool namens CSS-Präprozessor, um einen in CSS fehlenden Wiederverwendungsmechanismus für die Stilebene bereitzustellen, redundanten Code zu reduzieren und die Wartbarkeit des Stilcodes zu verbessern. Verbessert die Effizienz der Front-End-Entwicklung im Hinblick auf den Stil erheblich. Was ist ein CSS-Präprozessor? Der CSS-Präprozessor definiert eine neue Sprache. Die Grundidee besteht darin, mithilfe einer speziellen Programmiersprache einige Programmierfunktionen zu CSS hinzuzufügen, CSS als Ziel zum Generieren von Dateien zu verwenden und Entwickler müssen diese Sprache dann nur noch zum Codieren von CSS verwenden. Einfach ausgedrückt bedeutet dies: „ Verwenden Sie eine spezielle Programmiersprache, um den Stil der Webseite zu entwerfen, und konvertieren Sie ihn dann mithilfe eines Compilers in eine normale CSS-Datei, um ihn im Projekt verwenden zu können.“ Was sind die häufig verwendeten CSS-Präprozessoren?
Verhaltensebene (JavaScript)JavaScript ist eine schwach typisierte Skriptsprache. Ihr Quellcode muss nicht kompiliert werden, bevor er zur Ausführung an den Client gesendet wird. Stattdessen werden die Zeichencodes im Textformat zur Interpretation und Ausführung an den Browser gesendet. Native JS-Entwicklung Native JS-Entwicklung bedeutet, dass wir gemäß dem **[ECMAScript]**-Standard, abgekürzt ES, entwickeln und dessen Besonderheit darin besteht, dass alle Browser ihn unterstützen. Zum Zeitpunkt dieses Blogbeitrags wurden die folgenden Versionen des ES-Standards veröffentlicht:
Der Unterschied besteht in der schrittweisen Hinzufügung neuer Funktionen. TypeScript Microsoft Standard TypeScript ist eine kostenlose Open Source-Programmiersprache, die von Microsoft entwickelt wurde. Es handelt sich um eine Obermenge von JavaScript und fügt der Sprache im Wesentlichen optionale statische Typisierung und klassenbasierte objektorientierte Programmierung hinzu. Geleitet von Anders Hejlsberg (Vater von C#, Delphi, TypeScript; Gründer von .NET). Die Besonderheit dieser Sprache besteht darin, dass sie zusätzlich zu den Funktionen von ES auch viele neue Funktionen enthält, die nicht im Rahmen des Standards liegen. Daher können viele Browser die TypeScript-Syntax nicht direkt unterstützen und müssen kompiliert (in JS kompiliert) werden, bevor sie vom Browser korrekt ausgeführt werden können. JavaScript-Frameworks
UI-Framework
JavaScript-Build-Tools
Drei-Terminal-VereinigungHybrid AppDer Hauptzweck besteht darin, drei Endgeräte (PC, Android: .apk, iOS: ipa) zu vereinheitlichen und die zugrundeliegende Hardware des Geräts (wie Sensoren, GPS, Kameras usw.) aufrufen zu können. Es gibt zwei Hauptverpackungsmethoden:
WeChat Mini-ProgrammWeitere Einzelheiten finden Sie auf der offiziellen WeChat-Website. Hier ist ein Framework, das die Entwicklung der WeChat-Applet-Benutzeroberfläche erleichtert: WeUl Backend-Technologie Um die Entwicklung zu erleichtern, muss das Front-End-Personal auch bestimmte Back-End-Technologien beherrschen, aber unser Java-Back-End-Personal weiß, dass das Back-End-Wissenssystem extrem umfangreich und komplex ist. Um dem Front-End-Personal die Entwicklung von Back-End-Anwendungen zu erleichtern, sind Technologien wie NodeJS entstanden. Der Autor von NodeJS hat angekündigt, dass er NodeJS aufgeben wird (die schlechte Architektur und die umständlichen Node_Module haben den Autor möglicherweise unzufrieden gemacht) und mit der Entwicklung von Deno, einer neuen Architektur, begonnen hat. Da es sich um eine Backend-Technologie handelt, sind auf jeden Fall ein Framework und Projektmanagement-Tools erforderlich. Das NodeJS-Framework und die Projektmanagement-Tools sind wie folgt:
Mainstream-Frontend-FrameworksVue.js iView iview ist eine leistungsstarke Vue-basierte UI-Bibliothek mit vielen praktischen Basiskomponenten, die umfangreicher sind als Elementui-Komponenten. Sie dient hauptsächlich den Mid- und Back-End-Produkten von PC-Schnittstellen. Verwenden Sie das auf npm + webpack + babel-Entwicklung basierende Einzeldatei-Vue-Komponentenentwicklungsmodell, unterstützen Sie die hochwertige, funktionsreiche und benutzerfreundliche API von ES2015 und nutzen Sie den Speicherplatz frei und flexibel.
Hinweis: Es handelt sich um ein Mainstream-Frontend-Framework und kann bei der Auswahl berücksichtigt werden. Sein Hauptmerkmal ist, dass es mehr mobile Endgeräte unterstützt. ElementUlElement ist eine Vue Ul-Komponentenbibliothek, die von Ele.mes Open Source-Frontend verwaltet wird. Sie verfügt über einen vollständigen Komponentensatz, der im Wesentlichen alle für das Backend erforderlichen Komponenten abdeckt. Die Dokumentation ist ausführlich und die Beispiele umfangreich. Es wird hauptsächlich zur Entwicklung von PC-Seiten verwendet und ist eine hochwertige Vue Ul-Komponentenbibliothek. Hinweis: Es handelt sich um ein Mainstream-Frontend-Framework und kann bei der Auswahl berücksichtigt werden. Sein Hauptmerkmal ist, dass es mehr Desktop-Terminals unterstützt. EISFeibing ist die Mid- und Back-End-Anwendungslösung des Alibaba-Teams, die auf React/Angular/Vue basiert. Innerhalb von Alibaba wird sie in mehr als 270 Projekten aus fast allen BUs verwendet. Feibing umfasst eine vollständige Verknüpfung vom Entwurfs- zum Entwicklungsende und hilft Benutzern so, schnell ihre eigenen Mid- und Back-End-Anwendungen zu erstellen. Hinweis: Die Hauptkomponenten basieren immer noch auf React VantUlVant Ul ist eine Vue-Komponentenbibliothek, die vom Front-End-Team von Youzan basierend auf den einheitlichen Spezifikationen von Youzan implementiert wird und einen vollständigen Satz von Ul-Basiskomponenten und Geschäftskomponenten bereitstellt. Mit Vant können Sie schnell Seiten mit einem einheitlichen Stil erstellen und die Entwicklungseffizienz verbessern. Utat-ui ist eine auf Vue 2.x basierende Front-End-UI-Komponentenbibliothek, die hauptsächlich für die schnelle Entwicklung von PC-Website-Produkten verwendet wird. Es bietet eine Reihe von npm + webpack + babel Front-End-Entwicklungs-Workflows mit unabhängigen CSS-Stilen und kann einen einheitlichen UI-Stil beibehalten, selbst wenn unterschiedliche Frameworks verwendet werden. WürfelUlcube-ui ist eine anspruchsvolle mobile Komponentenbibliothek, die vom Didi-Team auf Basis von Vue.js entwickelt wurde. Unterstützt die On-Demand-Einführung und Nachkompilierung, leicht und flexibel: starke Skalierbarkeit, kann problemlos eine sekundäre Entwicklung basierend auf vorhandenen Komponenten erreichen. Warten Sie auf die Benutzeroberfläche … Front-End-EntwicklungsverlaufDie vom Backend dominierte MVC-Ära
Vorteil MVC ist ein sehr gutes Kollaborationsmodell, das die Code-Kopplung wirksam reduzieren und Entwicklern ermöglichen kann, zu verstehen, wo der Code aus architektonischer Sicht geschrieben werden sollte. Um die Ansicht reiner zu gestalten, können Sie auch Vorlagen-Engines wie Thymeleaf und Freemarker verwenden, um zu verhindern, dass Java-Code in die Vorlage geschrieben wird, wodurch die Arbeitsteilung zwischen Front-End und Back-End klarer wird. Mangel
Auf diese Weise ist es so, dass, solange das Front-End noch etwas schwach ist, das Back-End häufig erfordert, dass viel Geschäftscode in die Vorlagenebene geschrieben wird. Es gibt auch einen großen grauen Die Zone ist der Controller, und Funktionen wie die Seitenweiterleitung sollten sich hauptsächlich um das Front-End kümmern, werden jedoch vom Back-End implementiert. Der Controller selbst ist häufig mit dem Modell verknüpft, und der Geschäftscode, der den Leuten die Zähne zusammenbeißt, wird in der Controller-Ebene angezeigt. Diese Probleme können nicht ausschließlich auf die Qualität des Programmierers zurückgeführt werden, sonst würde JSP ausreichen.
Die SPA-Ära mit AJAX Bereits 2005 wurde AJAX (Asynchronous JavaScript And XML) offiziell vorgeschlagen und CDN als statischer Ressourcenspeicher verwendet, was zur Rückkehr von JavaScript führte. (Zuvor wurde JS verwendet, um Anzeigen für Hundehautpflaster auf Webseiten zu veröffentlichen) Die SPA-Ära (Single Page Application). Vorteil In diesem Modus ist die Arbeitsteilung zwischen Front-End und Back-End sehr klar und der wichtigste Kooperationspunkt zwischen Front-End und Back-End ist die AJAX-Schnittstelle. Es sieht so wunderbar aus, aber rückblickend unterscheidet es sich nicht sehr von der JSP-Ära. Die Komplexität hat sich vom JSP auf dem Server zum JavaScript im Browser verlagert, was die Browserseite sehr komplex macht. Ähnlich wie Spring MVC begann in dieser Ära eine Schichtenarchitektur für Browser aufzutauchen: Mangel
Der MV*-Modus ist hier wie folgt:
Um die Komplexität der Front-End-Entwicklung zu reduzieren, sind zahlreiche Front-End-Frameworks entstanden, beispielsweise Vorteil
Mangel
Die Full-Stack-Ära mit NodeJSDas MV*-Modell, das sich auf den vorderen Teil konzentriert, löst viele Probleme, weist aber, wie oben erwähnt, immer noch viele Mängel auf. Mit dem Aufkommen von NodeJS kann JavaScript auf Servern ausgeführt werden. Dies bedeutet, dass es ein neues Modell für Forschung und Entwicklung gibt: In diesem F&E-Modell sind die Verantwortlichkeiten von Front-End und Back-End sehr klar. Für das Frontend haben die beiden UI-Ebenen ihre eigenen Aufgaben:
Durch Node ist die Webserverschicht auch JavaScript-Code, was bedeutet, dass einige Codes vorher und nachher wiederverwendet werden können. Szenarien, die SEO erfordern, können synchron auf der Serverseite gerendert werden, und Leistungsprobleme, die durch zu viele asynchrone Anforderungen verursacht werden, können auch über die Serverseite gemildert werden. Die Mängel des Vorgängermodells können durch dieses Modell nahezu perfekt behoben werden. Im Vergleich zum JSP-Modell scheint das Full-Stack-Modell eine Regression zu sein, und es ist tatsächlich eine Regression zum ursprünglichen Entwicklungsmodell, aber es ist eine Spiralregression. Das auf NodeJS basierende Full-Stack-Modell steht noch vor vielen Herausforderungen:
ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können! Das könnte Sie auch interessieren:
|
<<: Mysql SQL-Anweisungsvorgang zum Hinzufügen oder Ändern des Primärschlüssels
>>: Neue Möglichkeiten zum Spielen mit CSS-Schriftarten: Implementierung farbiger Schriftarten
Inhaltsverzeichnis 1. Hintergrund 2. Zusammengese...
Superset ist ein leichtes Self-Service-BI-Framewo...
Inhaltsverzeichnis 1. Systemumgebung 2. Betriebsa...
Erstellen Sie zunächst ein Verzeichnis cd /etc/ng...
MySQL erstellt bei der Installation automatisch e...
Frage Nginx nimmt $remote_addr als echte IP-Adres...
Um MySQL-Abfrageergebnisse in CSV zu exportieren,...
Überblick Das Builder-Muster ist ein relativ einf...
Ich habe einen Artikel des Yahoo-Teams über die O...
Zusammenfassung: Im Folgenden finden Sie eine Met...
1. Voraussetzungen: Die Datenbanksicherung ist be...
Vor kurzem hat das Unternehmen zufällig Live-Über...
In diesem Artikelbeispiel wird der spezifische Co...
Hinweise zur Installation der MySQL-Datenbank, mi...
1 Laden Sie MySQL8 von der offiziellen Website he...