Dieser Artikel bietet Ihnen das umfassendste und detaillierteste Wissen über Vue, um das Front-End zu verstehen, das Front-End zu verstehen und das Front-End zu beherrschen. Ich hoffe, dass es für alle hilfreich ist! 1. Front-End-Kernanalyse Projekte.
HTML + CSS + JS: Ansicht:
Netzwerkkommunikation: axios
Seitensprung: vue-router
Statusverwaltung: vuex
Vue-UI: ICE, Element UI
1.2, drei Front-End-Elemente 给用户看，刷新后台给的数据
HTML (Struktur): Hyper Text Markup Language (Hyper Text Markup Language), bestimmt die Struktur und den Inhalt der Webseite
CSS (Ausdruck): Cascading Style Sheets (Cascading Style Sheets), legt den Präsentationsstil der fest Webseite.
JavaScript (Verhalten): Es handelt sich um eine schwach typisierte Skriptsprache, die nicht kompiliert werden muss, sondern vom Browser interpretiert und ausgeführt wird. Sie wird zur Steuerung des Verhaltens von Webseiten verwendet Strukturelle Ebene
(HTML) Zu einfach, etwas 1.4. Präsentationsebene (CSS)
CSS Cascading Style Sheet ist eine Auszeichnungssprache, keine Programmiersprache, daher können Sie keine Variablen, Referenzen usw. anpassen. Mit anderen Worten , es gibt keine Syntaxunterstützung, seine Hauptmängel sind wie folgt:
Die Syntax ist nicht leistungsfähig genug, sie kann beispielsweise nicht verschachtelt werden, was dazu führt, dass in der modularen Entwicklung viele wiederholte Selektoren geschrieben werden müssen
Es gibt keinen variablen und sinnvollen Mechanismus zur Wiederverwendung von Stilen, wodurch logisch verwandte Attributwerte wiederholt in Form von Literalen ausgegeben werden müssen, was die Wartung erschwert
Dies hat zu einer unangemessenen Erhöhung unserer Arbeitsbelastung geführt. Um dieses Problem zu lösen, werden Front-End-Entwickler ein Tool namens [CSS-Präprozessor] verwenden, um einen in CSS fehlenden Mechanismus zur Wiederverwendung von Stilebenen bereitzustellen, redundanten Code zu reduzieren und die Wartbarkeit von Stilcode zu verbessern. Es verbessert die Effizienz der Front-End-Stilentwicklung erheblich.
Was ist ein CSS-Präprozessor? Der CSS-Präprozessor definiert eine neue Sprache. Die Grundidee besteht darin, eine spezielle Programmiersprache zu verwenden, um einige Programmierfunktionen zu CSS hinzuzufügen, wobei CSS so behandelt wird, als ob das Ziel die Datei generiert und dann nur der Entwickler muss diese Sprache zum Codieren des CSS verwenden. In leicht verständliche Worte übersetzt bedeutet es „
Verwenden Sie eine spezielle Programmiersprache, um den Webseitenstil zu entwerfen, und konvertieren Sie ihn dann über einen Compiler in eine normale CSS-Datei zur Verwendung im Projekt“
. Was sind die am häufigsten verwendeten CSS-Präprozessoren?
SASS: Basierend auf Ruby ist es durch serverseitige Verarbeitung leistungsstark. Hohe Analyseeffizienz. Sie müssen die Ruby-Sprache lernen, deren Einstieg schwieriger ist als LESS.
LESS: Basierend auf NodeJS, über den Client verarbeitet, einfach zu verwenden. Die Funktion ist einfacher als bei SASS und die Analyseeffizienz ist ebenfalls geringer als bei SASS, reicht jedoch in der tatsächlichen Entwicklung aus. Wenn unsere Backend-Mitarbeiter sie also benötigen, wird empfohlen, LESS zu verwenden.
1.5. Verhaltensebene (JavaScript)
JavaScript muss nicht kompiliert werden, bevor es zum Ausführen an den Client gesendet wird Browser, und der Browser Der Interpreter wird ausgeführt.
Native Native JS-Entwicklung
Native JS-Entwicklung, das heißt, wir folgen der Standardentwicklungsmethode [ECMAScript], die als ES bezeichnet wird und von allen Browsern unterstützt wird. Bisher hat der ES-Standard die folgenden Versionen veröffentlicht:
ES3
ES4 (intern, nicht offiziell veröffentlicht)
ES5 (vollständige Browserunterstützung)
ES6 (häufig verwendete, aktuelle Mainstream-Version: Webpack-Paketierung wird zu ES5 Unterstützung) ES7ES8
ES9 (Entwurfsphase)
Der Unterschied besteht darin, dass neue Funktionen nach und nach hinzugefügt werden.
TypeScript Microsofts Standard
TypeScript ist eine kostenlose und Open-Source-Programmiersprache, die von Microsoft entwickelt wurde. Es ist eine Obermenge von JavaScript und fügt der Sprache im Wesentlichen optionale statische Typisierung und klassenbasierte objektorientierte Programmierung hinzu. Unter der Leitung von Anders Helsberg (Vater von C#, Delphi, TypeScript; Gründer von .NET). Das Merkmal dieser Sprache ist, 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 es vom Browser korrekt ausgeführt werden kann.
JavaScript Framework
JQuery: Eine bekannte JavaScript-Bibliothek. Der Vorteil besteht darin, dass sie DOM-Operationen vereinfacht, was sich normalerweise nur auf die Front-End-Leistung auswirkt kompatibel mit IE6, 7 und 8;
Angular: Von Google übernommen Das Front-End-Framework wurde von einer Gruppe von Java-Programmierern entwickelt. Es zeichnet sich durch die Verlagerung des Back-End-MVC-Modells in das Front-End und das Hinzufügen des Konzepts aus von modularer Entwicklung. Es arbeitet mit Microsoft zusammen und übernimmt die TypeScript-Syntaxentwicklung. Es ist gut für Back-End-Programmierer Die Versionsiteration ist unvernünftig (z. B. Generation 1 -> Generation 2, mit Ausnahme des Namens handelt es sich im Wesentlichen um zwei Dinge; Angular6 wurde zum Zeitpunkt der Veröffentlichung des Blogs gestartet).
Reagieren: Produziert von Facebook, eine hohe Leistung Das JS-Front-End-Framework zeichnet sich dadurch aus, dass es ein neues Konzept [virtuelles DOM] vorschlägt, um reale DOM-Operationen zu reduzieren und die Effizienz des Front-End-Renderings effektiv zu verbessern erfordert zusätzliches Erlernen einer [JSX]-Sprache;
Vue: ein progressives JavaScript-Framework. Progressiv bedeutet, schrittweise neue Funktionen wie modulare Entwicklung, Routing, Statusverwaltung und andere zu implementieren. Sein Merkmal ist, dass es die Vorteile von Angular (Modularität) und React (virtuelles DOM) kombiniert.
Axios: Da die Grenzen von Vue sehr klar sind, muss es DOM verarbeiten Kommunikationsfunktionen, die zu diesem Zeitpunkt benötigt werden. Für die Interaktion mit dem Server wird natürlich auch die AJAX-Kommunikationsfunktion verwendet, die von jQuery bereitgestellt wird
2. Front-End-Entwicklungsverlauf
2.1, UI-Framework
Ant-Design: produziert von Alibaba, basierend auf dem React UI-Framework
ElementUI, iview, ice: Produziert von Ele.me, einem Vue-basierten UI-Framework
BootStrap: Ein Open-Source-Toolkit für Von Teitter gestartete Frontend-Entwicklung
AmazeUI: Auch „Meizi UI“ genannt, ein HTML5-Cross-Screen-Frontend-Framework
2.2, JavaScript-Erstellungstool
Babel: JS-Kompilierungstool, das hauptsächlich für neue ES-Funktionen verwendet wird B. das Kompilieren von TypeScript
WebPack: Modul-Packager, die Hauptfunktion ist Packen, Komprimieren, Zusammenführen und sequentielles Laden
Hinweis: Die oben genannten Wissenspunkte haben alle für die WebApp-Entwicklung erforderlichen Fähigkeiten geklärt
2.3. Die drei Enden sind gleich
Hybrid-Entwicklung(Hybrid-App)
Der Hauptzweck besteht darin, einen zu erreichen. Die drei Terminals des Codesatzes sind vereinheitlicht (PC, Android: .apk, iOS: .ipa) und kann auf die zugrunde liegende Hardware des Geräts (wie Sensoren, GPS, Kameras usw.) aufgerufen werden. Es gibt zwei Hauptpaketierungsmethoden:
Cloud-Paketierung: HBuild ->
Lokale Verpackung: Cordova (ehemals PhoneGap)
WeChat-Applet
Weitere Informationen finden Sie auf der offiziellen WeChat-Website. Hier ist ein Framework, das die UI-Entwicklung des WeChat-Applets erleichtert: WeUI2.4, Back-End-Technologie Front-End-Mitarbeiter müssen auch bestimmte Back-End-Technologien beherrschen, um die Entwicklung zu erleichtern. Unsere Java-Back-End-Mitarbeiter wissen jedoch, dass das Back-End-Wissenssystem extrem groß und komplex ist. Endpersonal entwickelt Back-End-Anwendungen, Node JS ist eine solche Technologie. Der Autor von Node JS hat behauptet, Node JS aufgegeben zu haben (mit der Begründung, die Architektur sei nicht gut gemacht und die schweren Node-Module könnten den Autor unzufrieden machen) und mit der Entwicklung einer neuen Architektur begonnen. De no
Da es sich um eine Hintergrundtechnologie handelt Benötigt definitiv ein Framework und Projektmanagement-Tools. Das Node JS-Framework und die Projektmanagement-Tools sind wie folgt:
Express: Node JS-Framework
Koa: Express-vereinfachte Version
NPM: ein umfassendes Projektmanagement-Tool, ähnlich wie Maven
YARN: eine Alternative zu NPM. Ähnlich der Beziehung zwischen Maven und Gradle Praktische Basiskomponenten, die fortgeschrittener sind als Element-UI-Komponenten. Reichhaltig, hauptsächlich für Mid- und Back-End-Produkte für PC-Schnittstellen. Das Vue-Komponentenentwicklungsmodell unter Verwendung einer einzelnen Datei basiert auf npm+webpack+babel, unterstützt die hochwertige, funktionsreiche und benutzerfreundliche API von ES 2015 und nutzt den Speicherplatz frei und flexibel.
Offizielle Website-AdresseGithubiview-admin
Bemerkungen: Es handelt sich um ein Front-End-Mainstream-Framework und kann bei der Auswahl berücksichtigt werden. Das Hauptmerkmal ist, dass es mehr mobile Endgeräte unterstützt
Element UI
Element ist die von Ele.me verwaltete Vue-UI-Komponentenbibliothek mit einem vollständigen Satz an Komponenten und deckt grundsätzlich alle im Backend benötigten Komponenten ab. Die Dokumentation erklärt sie ausführlich und ist reich an Beispielen. Es handelt sich um eine relativ hochwertige Vue-UI-Komponentenbibliothek, die hauptsächlich für die Entwicklung PC-seitiger Seiten verwendet wird.
·Offizielle Website-Adresse
·Git-Hub
·vue-element-admin
Hinweis: Es gehört zum Mainstream-Frontend-Framework und kann bei der Auswahl berücksichtigt werden. Das Hauptmerkmal ist, dass es mehr Desktop-Unterstützung bietet ICE
Feibing ist Die auf React/Angular/Vue basierenden Mid- und Back-End-Anwendungslösungen des Alibaba-Teams werden bereits von mehr als 270 Projekten aus fast allen BUs innerhalb von Alibaba verwendet. Feibing umfasst eine vollständige Verbindung vom Design- bis zum Entwicklungsende und hilft Benutzern, schnell ihre eigenen Mid- und Back-End-Anwendungen zu erstellen.
Offizielle Website-Adresse.
Git-Hub
Hinweis: Die Hauptkomponenten basieren noch auf React. Bis zum 17. Februar 2019 ist die Unterstützung für Vue noch nicht vollständig, bevor der Blog aktualisiert wird VantUI
Vant UI ist ein Front-End mit Lob. Die vom Team implementierte Vue-Komponentenbibliothek basierend auf den einheitlichen Spezifikationen von Youzan bietet einen vollständigen Satz von UI-Basiskomponenten und Geschäftskomponenten. Mit Vant können Sie schnell eine Seite mit einem einheitlichen Stil erstellen und die Entwicklungseffizienz verbessern.
Offizielle Website-Adresse
Github
AtUI
at-ui ist eine Front-End-UI-Komponentenbibliothek basierend auf Vue 2.x, die hauptsächlich für die schnelle Entwicklung von PC-Website-Produkten verwendet wird. Es bietet eine Reihe von npm+webpack+babel-Front-End-Entwicklungsworkflows, der CSS-Stil ist unabhängig und ein einheitlicher UI-Stil kann beibehalten werden, selbst wenn unterschiedliche Frameworks verwendet werden. ·Offizielle Website-Adresse
·Git-Hub
Cube Ul
cube-ui ist eine exquisite mobile Komponentenbibliothek, die auf Vue js basiert und vom Didi-Team entwickelt wurde. Es unterstützt die bedarfsgesteuerte Einführung und Nachkompilierung, ist leichtgewichtig und flexibel, verfügt über eine starke Skalierbarkeit und kann problemlos eine sekundäre Entwicklung basierend auf vorhandenen Komponenten implementieren.
Offizielle Website-Adresse
Github
Hybrid-Entwicklung
Flutter
Flutter ist Googles mobiles UI-Framework, mit dem in sehr kurzer Zeit hochwertige Anwendungen auf nativer Ebene auf Android und iOS erstellt werden können. Flutter funktioniert mit vorhandenem Code, wird von Entwicklern und Organisationen auf der ganzen Welt verwendet und Flutter ist kostenlos und Open Source.
Offizielle Website-Adresse
Github
Bemerkungen: Die Hauptfunktion besteht darin, schnell native APP-Anwendungen zu erstellen. Wenn Sie Hybridanwendungen erstellen, ist dieses Framework ein Muss
lonic ist sowohl ein CSS-Framework als auch eine Javascript-UI-Bibliothek. Lonic ist derzeit das vielversprechendste HTML 5-Framework für die Entwicklung mobiler Anwendungen. Erstellen Sie Anwendungen über SASS, das viele UI-Komponenten bereitstellt, um Entwickler bei der Entwicklung leistungsstarker Anwendungen zu unterstützen. Es verwendet das JavaScript MV VM-Framework und Angular JS/Vue, um die Anwendung zu verbessern. Bietet eine bidirektionale Bindung von Daten und macht ihre Verwendung zu einer häufigen Wahl für Web- und Mobilentwickler.
Offizielle Website-Adresse
·Offizielles Dokument·Git-Hub
WeChat-Applet
mpvue
mpvue ist ein kleines Programm, das von Meituan unter Verwendung von Vue.js entwickelt wurde -End-Framework unterstützt derzeit WeChat-Miniprogramme, Baidu-Smart-Miniprogramme, Toutiao-Miniprogramme und Alipay-Miniprogramme. Das Framework basiert auf Vue.js, und das modifizierte Laufzeit-Framework runtime und der Code-Compiler compiler sind so implementiert, dass es in einer kleinen Ausführung ausgeführt werden kann Programmumgebung. Dadurch wird die Entwicklungserfahrung von Vue.js für die Entwicklung kleiner Programme eingeführt.
·Offizielle Website-Adresse ·Git-Hub
Bemerkungen: Eine vollständige Vue-Entwicklungserfahrung und unterstützt die Entwicklung kleiner Programme auf mehreren Plattformen. Es wird empfohlen,
为了降低开发的复杂度， 以后端为出发点， 比如：Struts、Spring MVC等框架的使用， 就是后端的MVC时代； 以SpringMVC WeUI zu verwenden mit dem nativen visuellen Erlebnis von WeChat. Die Stilbibliothek wurde vom offiziellen Designteam von WeChat maßgeschneidert für WeChat-Webseiten und WeChat-Miniprogramme, wodurch die Nutzungswahrnehmung der Benutzer einheitlicher wird. Enthält verschiedene Elemente wie Schaltfläche, Zelle, Dialog, Toast, Artikel, Symbol usw.
🎜Offizielle Website-Adresse🎜🎜Github🎜🎜
3. Verstehen Sie die Entwicklungsgeschichte der Front-to-Back-Trennung
🎜Warum eine Front-to-Back-Trennung erforderlich ist🎜
3.1 -orientierte MVC-Ära
🎜Um die Komplexität der Entwicklung zu reduzieren, basiert die Verwendung von Struts, Spring MVC und anderen Frameworks auf der MVC-Ära der SpringMVC-Prozess als Beispiel: 🎜🎜🎜
Initiieren Sie eine Anfrage an den Front-End-Controller (Dispatcher Servlet)Dispatcher Servlet)
Der Front-End-Controller fordert HandlerMapping an, um Handler zu finden Kann auf xmlKonfiguration, Annotation für die Suche basieren<li>
<br>Prozessor-Mapper <code>HandlerMapping gibt Handler an den Front-End-Controller zurückDas Front-End Der Controller ruft den Prozessoradapter auf, um Handler auszuführen
Der Prozessoradapter führt HandlerHandler aus und kehrt zum Adapter ModelAndView zurück. code> nach Abschluss der Ausführung
Der Prozessoradapter steuert das Frontend. Der Prozessor gibt ModelAndView zurück, ModelAndView ist ein zugrunde liegendes Objekt des SpringMvc-Frameworks , einschließlich Model und Viewcode>
Der Front-End-Controller fordert den Ansichtsparser auf, eine Ansichtsanalyse durchzuführen, und analysiert sie in eine echte Ansicht (JSP Code>) basierend auf dem logischen Ansichtsnamen. Der Ansichtsparser gibt <code>Ansicht zurück <code>ModelAndView-Objekt) in das request-Feld ein.
Der Front-End-Controller antwortet dem Benutzer mit den Ergebnissen Reduzieren Sie die Kopplung von Code und ermöglichen Sie Entwicklern zu verstehen, wo der Code architektonisch geschrieben werden sollte. Um die Ansicht reiner zu gestalten, können Sie auch Template-Engines wie Thyme Leaf und Free Marker verwenden, um zu verhindern, dass Java-Code in die Vorlage geschrieben wird, und um die Arbeitsteilung zwischen Front- und Back-End klarer zu gestalten.
Nachteile
Die Front-End-Entwicklung hängt stark von der Entwicklungsumgebung ab und die Entwicklungseffizienz ist gering. Bei dieser Architektur gibt es zwei Modi der Front-End- und Back-End-Zusammenarbeit:
Der erste besteht darin, DEMO zu schreiben Lassen Sie das Back-End nach dem Schreiben die Vorlage festlegen. Der Vorteil besteht darin, dass DEMO lokal entwickelt werden kann und sehr effizient ist. Der Nachteil besteht darin, dass das Back-End die Vorlage einrichten muss, was möglicherweise falsch ist. Nach Abschluss der Einrichtung muss sie vom Front-End bestätigt werden ist relativ groß; Ein weiterer Kollaborationsmodus ist, dass das Front-End für die gesamte Entwicklung auf der Browserseite und die Ansichtsebene auf der Serverseite verantwortlich ist. Der Vorteil besteht darin, dass UI-bezogene Codes im Front-End geschrieben werden können und Sie dem Back-End nicht zu viel Aufmerksamkeit schenken müssen. Der Nachteil besteht darin, dass die Front-End-Entwicklung stark an die Back-End-Umgebung gebunden ist. und die Umgebung ist zu einem wichtigen Faktor geworden, der die Effizienz der Front-End-Entwicklung beeinflusst.
Die Front-End- und Back-End-Verantwortlichkeiten sind miteinander verflochten: Die Template-Engine ist leistungsstark und kann über die erhaltenen Kontextvariablen dennoch verschiedene Geschäftslogiken implementieren. Solange das Front-End schwach ist, muss das Back-End häufig viel Geschäftscode in die Vorlagenebene schreiben. Es gibt auch eine große Grauzone in den Controller-Funktionen Das Front-End sollte sich am meisten darum kümmern, aber sie werden vom Backend implementiert. Der Controller selbst und das Modell sind oft miteinander verflochten, und der Geschäftscode, der die Leute zum Zähneknirschen bringt, erscheint oft in der Controller-Ebene. Diese Probleme können nicht alle auf die Qualität der Programmierer zurückgeführt werden, sonst reicht JSP aus.
Einschränkungen im Front-End: Wenn die Leistungsoptimierung nur im Front-End durchgeführt wird, ist der Platz sehr begrenzt, sodass wir oft eine Back-End-Zusammenarbeit benötigen, aber aufgrund der Einschränkungen des Back-End-Frameworks ist dies der Fall Es fällt uns schwer, technische Lösungen wie [Comet] und [Big Pipe] zur Leistungsoptimierung einzusetzen. Hinweis: In diesem Zeitraum (vor 2005), einschließlich der frühen JSP und PHP, kann man von der Web 1.0-Ära sprechen. Ich möchte hier etwas sagen: Wenn Sie ein Java-Anfänger sind, hören Sie bitte auf, einige alte Technologien wie JSP ernst zu nehmen, denn die Zeiten ändern sich, die Technologie ändert sich und alles ändert sich (zitiert Zuckerberg (Ein berühmtes Sprichwort: die einzige Konstante). Wenn wir zum Praktikum an die Universität gehen, werden einige Studenten denken, dass wir über keine nützlichen Informationen sprechen. Tatsächlich ist dies nicht der Fall Erkenntnis ist gut für den Markt. Es heißt nur, dass es schon lange veraltet ist. Alte Technologie und neue Verwendung) wurde offiziell vorgeschlagen und mit der Verwendung begonnen. CDN wird als statischer Ressourcenspeicher verwendet, sodass die Ära der Single-Page-Anwendung SPA (Single Page Application) begann. Vorteile
🎜 In diesem Modus ist **die Arbeitsteilung zwischen Front- und Back-End sehr klar und der wichtigste Punkt für die Zusammenarbeit zwischen Front- und Back-End ist die AJAX-Schnittstelle. **Es sieht so wunderbar aus, aber rückblickend unterscheidet es sich nicht viel von der JSP-Ära. Die Komplexität hat sich von JSP auf der Serverseite zu JavaScript auf dem Browser verlagert, und die Browserseite ist sehr kompliziert geworden. Ähnlich wie bei Spring MVC: 🎜In dieser Ära beginnt die browserseitige Schichtarchitektur aufzutauchen🎜: 🎜🎜🎜 Nachteile🎜
Konventionen für Front-End- und Back-End-Schnittstellen: Wenn die Back-End-Schnittstelle ein Chaos ist und das Back-End-Geschäftsmodell nicht stabil genug ist, wird die Front-End-Entwicklung für viele Teams sehr schmerzhaft sein haben ähnliche Versuche unternommen, durch Schnittstellenregeln, Schnittstellenplattformen usw. Da die Schnittstellenregeln zusammen mit dem Back-End erstellt werden, können sie auch zur Simulation von Daten verwendet werden, sodass Front-End und Back-End nach Einigung auf die Schnittstelle eine effiziente parallele Entwicklung erreichen können.
Komplexitätskontrolle der Front-End-Entwicklung: SPA-Anwendungen sind größtenteils funktional und interaktiv, und es ist normal, dass JavaScript-Code 100.000 Zeilen überschreitet. Die Organisation einer großen Menge JS-Codes, die Bindung an die View-Ebene usw. sind keine einfachen Aufgaben.
3.3, die Front-End-orientierte MV*-ÄraDas MV*-Modell hier ist wie folgt:
MVP (hauptsächlich asynchrone Kommunikation): Modell , View, Presenter
MVVM (hauptsächlich asynchrone Kommunikation): Model, View, View Model Um die Komplexität der Front-End-Entwicklung zu reduzieren, ist eine große Anzahl von Front-End-Frameworks entstanden, wie zum Beispiel:
usw. Die Das allgemeine Prinzip dieser Frameworks besteht darin, sie zuerst nach Typ zu schichten, zum Beispiel nach Vorlagen, Controllern, Modellen, und sie dann wie unten gezeigt in Ebenen zu unterteilen: Angular JS、React、Vue.js、Ember JS
Vorteile
Das Frontend und die Back-End-Verantwortlichkeiten sind sehr klar: Das Front-End funktioniert auf der Browserseite und das Back-End auf der Serverseite. Eine klare Arbeitsteilung ermöglicht eine parallele Entwicklung, die Simulation von Testdaten ist nicht schwierig und das Frontend kann lokal entwickelt werden. Das Backend kann sich auf die Verarbeitung der Geschäftslogik konzentrieren und RESTful- und andere Schnittstellen ausgeben.
Die Komplexität der Front-End-Entwicklung ist kontrollierbar
: Der Front-End-Code ist umfangreich, aber eine angemessene Schichtung ermöglicht es dem Front-End-Code, seine Aufgaben zu erfüllen. Das ist sehr interessant, denn so einfach wie die Auswahl der Vorlagenfunktionen ist, gibt es viele Details, auf die man achten muss. Je leistungsfähiger, desto besser. Welche Einschränkungen gibt es, welche Freiheiten bleiben bestehen, wie sollte der Code organisiert sein? Für all diese Designs würde man ein Buch brauchen, um sie zu erklären.
Relativ unabhängige Bereitstellung
: Das Produkterlebnis kann schnell verbessert werden. NachteileCode kann nicht wiederverwendet werden. Beispielsweise muss das Backend noch verschiedene Überprüfungen der Daten durchführen und die Überprüfungslogik kann den browserseitigen Code nicht wiederverwenden. Wenn es wiederverwendet werden kann, kann die Back-End-Datenüberprüfung relativ einfach sein.
Vollständig asynchron, schlecht für SEO. Oft ist es notwendig, serverseitig eine Downgrade-Lösung für synchrones Rendering zu implementieren.
Die Leistung ist nicht die beste, insbesondere im mobilen Internetumfeld.
SPA kann nicht alle Anforderungen erfüllen und es gibt immer noch eine große Anzahl mehrseitiger Anwendungen. URL-Design erfordert die Mitarbeit des Backends und kann nicht vollständig vom Frontend kontrolliert werden.
3.4, die Full-Stack-Ära von Node JS
Das Front-End-fokussierte MV*-Modell hat viele, viele Probleme gelöst, aber wie oben erwähnt, gibt es immer noch viele Mängel. Mit dem Aufkommen von Node JS kann JavaScript zunehmend serverseitig ausgeführt werden. Das bedeutet, dass es ein neues F&E-Modell geben kann:
In diesem F&E-Modell sind die Verantwortlichkeiten des Front- und Backends klar. Für das Frontend erfüllen die beiden UI-Schichten ihre jeweiligen Aufgaben:
Die Front-End-UL-Ebene übernimmt die Anzeigelogik der Browserebene. Je nach Anwendungsszenario können auch das Rendern von Stilen über CSS, das Hinzufügen interaktiver Funktionen über JavaScript und die HTML-Generierung in dieser Ebene platziert werden.
Die Back-End-UL-Schicht verwaltet Routing, Vorlagen, Datenerfassung, Cookies usw. Durch Routing kann das Front-End schließlich das URL-Design unabhängig steuern, sodass das Front-End es unabhängig davon steuern kann, ob es sich um eine einseitige oder eine mehrseitige Anwendung handelt. Das Backend kann endlich seinen starken Fokus auf die Präsentation loswerden und sich stattdessen auf die Entwicklung der Geschäftslogikschicht konzentrieren. Durch Node ist die WebServer-Ebene auch JavaScript-Code, was bedeutet, dass einige Codes vorne und hinten wiederverwendet werden können. Szenen, die SEO erfordern, können auch durch zu viele asynchrone Anfragen synchron gerendert werden der Serverseite. Die Mängel des Vorgängermodells können durch dieses Modell nahezu perfekt behoben werden. Im Vergleich zum JSP-Modus scheint der Full-Stack-Modus eine Regression zu sein, und es handelt sich tatsächlich um eine Rückkehr zum ursprünglichen Entwicklungsmodell, aber es handelt sich um eine spiralförmige Rückkehr. Das auf Node JS basierende Full-Stack-Modell steht noch vor vielen Herausforderungen:
Das Frontend muss ein besseres Verständnis für die serverseitige Programmierung haben. Zum Beispiel die Beherrschung von Netzwerkkenntnissen wie TCP/IP.
Effiziente Kommunikation zwischen Node JS-Schicht und Java-Schicht. Im Node-JS-Modus erfolgt die RESTful-HTTP-Kommunikation möglicherweise nicht effizient. Alles muss überprüft werden.
Ein kompetentes Verständnis der Abteilung sowie der Betriebs- und Wartungsebenen erfordert mehr Wissenspunkte und praktische Erfahrung.
Wie man eine große Anzahl historischer Themen umwandelt. Dies ist wahrscheinlich das größte Hindernis. Hinweis: Nachdem ich das gesehen habe, glaube ich, dass viele Schüler verstehen können, warum ich im Unterricht immer sage: „Für das Front-End ist es schwierig, das Back-End zu lernen, aber für uns Back-End-Programmierer ist es einfach, etwas zu lernen.“ "; Dies liegt daran, dass unsere Back-End-Programmierer über ein relativ vollständiges Wissenssystem verfügen. So einfach!
Zusammenfassung: Ob es sich um ein Modell oder eine Technologie handelt, es gibt nur die Frage, ob es geeignet ist oder nicht und die hintere Trennung basiert hauptsächlich auf Soc (Prinzip der Trennung von Belangen). Alle oben genannten Modelle machen die Verantwortlichkeiten des vorderen und hinteren Endes klarer und die Arbeitsteilung vernünftiger und effizienter.
4. Das erste Vue-Programm
4.1. Was ist MVVM? MVVM (Model-View-ViewModel) ist ein von Microsoft WPF entwickeltes Software-Designmuster (das als Ersatz für WinForm verwendet wurde). Vergangenheit) Diese Technologie wurde von den Architekten Ken Cooper und Ted Peters (für die Entwicklung von Desktop-Anwendungen) und Silverlight entwickelt (ähnlich wie Java-Applets, um es einfach auszudrücken: Es handelt sich um eine ereignisgesteuerte Programmiermethode). vereinfacht die BenutzeroberflächeSoc(关注度分离原则)，上面种种模式，都是让前后端的职责更清晰，分工更合理高效。
MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS . Veröffentlicht von John Gossman (ebenfalls der Architekt von WPF und Silverlight) auf seinem Blog im Jahr 2005.
MVVM ist vom klassischen MVC-Muster (Model-View-Controller) abgeleitet. Der Kern von MVVM ist die ViewModel-Schicht, die für die Konvertierung von Datenobjekten im Modell verantwortlich ist, um die Verwaltung und Verwendung der Daten zu vereinfachen. Seine Funktion ist wie folgt:
Diese Schicht führt eine bidirektionale Datenbindung mit der Ansichtsschicht nach oben durch.
Abwärts interagiert mit der Modellschicht über Schnittstellenanforderungen für Daten.
MVVM ist ziemlich ausgereift und wird hauptsächlich, aber nicht nur, in der Netzwerkanwendungsentwicklung verwendet. Zu den derzeit beliebten MVVM-Frameworks gehören Vue.js, Anfular JS
4.2. Warum ist der MVVM-Modus derselbe wie der MVC-Modus? Der Hauptzweck besteht darin, Ansichten zu trennen (Ansicht) und Modell (Modell) gibt es mehrere große Vorteile
geringe Kopplung
: Ansicht (Ansicht) kann sich unabhängig vom Modell ändern und modifizieren Das Modell kann sich ändern. Die Ansicht kann auch unverändert bleiben, wenn sich das Modell ändert.
Wiederverwendbar
: Sie können eine Ansichtslogik in ein ViewModel einfügen und viele Ansichten diese Ansichtslogik wiederverwenden lassen.
Unabhängige Entwicklung
: Entwickler können sich auf die Entwicklung von Geschäftslogik und Daten (ViewMode) konzentrieren und Designer können sich auf das Seitendesign konzentrieren.
Testbar
: Die Schnittstelle war schon immer schwer zu testen, aber jetzt können Tests für ViewModel geschrieben werden.
(1) Ansicht
Ansicht ist die Ansichtsebene, die die Benutzeroberfläche darstellt. Das Front-End besteht hauptsächlich aus HTH L und CSS. Um die Daten von vi eu bis del oder hodel Layer bequemer anzuzeigen, wurden verschiedene Front-End- und Back-End-Vorlagensprachen erstellt, z FreeMarker, Thyme Leaf usw. und wichtige MV-VM-Frameworks wie Vue.js, Angular JS, EJS usw. verfügen ebenfalls über eigene integrierte Vorlagensprachen zum Erstellen von Benutzeroberflächen.
🎜🎜 (2) Modell🎜🎜🎜Modell bezieht sich auf das Datenmodell, das sich im Allgemeinen auf verschiedene Geschäftslogikverarbeitungen und Datenmanipulationen bezieht, die im Backend durchgeführt werden, hauptsächlich rund um das Datenbanksystem. Die Schwierigkeit liegt hier vor allem in der Notwendigkeit, einheitliche Schnittstellenregeln mit dem Frontend🎜🎜🎜 (3) ViewModel🎜🎜 zu vereinbaren
ViewModel ist eine Ansichtsdatenschicht, die von Front-End-Entwicklerorganisationen generiert und verwaltet wird. Auf dieser Ebene konvertiert der Front-End-Entwickler die vom Back-End erhaltenen Modelldaten und führt eine sekundäre Kapselung durch, um ein Ansichtsdatenmodell zu generieren, das den Erwartungen der Ansichtsebene entspricht. Es ist zu beachten, dass das vom Ansichtsmodell gekapselte Datenmodell den Status und das Verhalten der Ansicht enthält, während das Datenmodell der Modellebene nur den Status enthält.
Zum Beispiel, was in diesem Teil der Seite angezeigt wird , was in diesem Teil der Seite angezeigt wird usw. Gehört zum Ansichtsstatus (Anzeige)
Was passiert, wenn die Seite geladen wird, was passiert, wenn auf diesen Bereich geklickt wird, was passiert, wenn in diesem Bereich gescrollt wird, dazu gehört alles Ansichtsverhalten (Interaktion)
Ansichtsstatus und -verhalten sind alle im Ansichtsmodell gekapselt. Durch diese Art der Kapselung kann das Ansichtsmodell die Ansichtsebene vollständig beschreiben. Aufgrund der Implementierung der bidirektionalen Bindung wird der Inhalt des Ansichtsmodells in Echtzeit in der Ansichtsebene angezeigt. Dies ist spannend, da Front-End-Entwickler die Ansicht nicht mehr ineffizient und mühsam durch Manipulation des DOM aktualisieren müssen. Das MVVM-Framework hat sich bereits um den schmutzigsten und ermüdendsten Teil gekümmert. Wir Entwickler müssen lediglich das Ansichtsmodell automatisch entsprechend aktualisieren und so eine echte ereignisgesteuerte Programmierung realisieren . 事件驱动编程。 View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。
<script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message:"hello,vue!"
}
});</script>
Nach dem Login kopieren
说明：
el: '#vue'：绑定元素的ID
data:{message:'Hello Vue!'} Die Ansichtsebene zeigt nicht die Daten der Model-Ebene an, aber die Daten des ViewModel sind für die Kommunikation mit dem Modell Ebeneninteraktion, dadurch werden die Ansichtsebene und die Modellebene vollständig entkoppelt. Dies ist ein wichtiger Teil der Implementierung der Front-End- und Back-End-Trennlösung.
4.3, Vue
Vue (ausgesprochen /vju/, ähnlich wie view) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen, das im Februar 2014 veröffentlicht wurde. Im Gegensatz zu anderen großen Frameworks ist Vue so konzipiert, dass es Schicht für Schicht von unten nach oben aufgetragen werden kann. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, die nicht nur einfach zu starten ist, sondern auch leicht in Bibliotheken von Drittanbietern (wie Vue-Router, Vue-Ressource, Vue X) oder bestehende Projekte integriert werden kann.
(1) Implementierer des MVVM-Musters
Modell: Modellebene, stellt hier JavaScript-Objekte dar
Ansicht: Ansichtsebene, stellt hier DOM (Elemente von HTML-Operationen) dar
ViewModel: Verbindet Ansichten und Daten-Middleware, Vue.js ist der Implementierer der View Model-Ebene in MVVM. In der MVVM-Architektur dürfen Daten und Ansichten nicht direkt kommunizieren. Sie können nur über ViewModel kommunizieren, und View Model definiert einen Observer kann Änderungen in Daten beobachten und den der Ansicht entsprechenden Inhalt aktualisieren🎜🎜ViewModel kann Änderungen in der Ansicht überwachen und Daten über Änderungen benachrichtigen🎜🎜🎜An diesem Punkt verstehen wir, dass Vue.js ein Implementierer von MV VM ist ist die Implementierung von DOM-Überwachung und Datenbindung🎜🎜🎜(2) Warum Vue.js verwenden🎜🎜🎜🎜Leichtgewicht und geringe Größe sind ein wichtiger Indikator. Vue.js ist nach der Komprimierung nur über 20 KB groß (Angular ist nach der Komprimierung mehr als 56 KB groß und React ist nach der Komprimierung mehr als 44 KB groß)🎜🎜Mobile first. Besser geeignet für mobile Endgeräte, z. B. Touch-Ereignisse auf mobilen Endgeräten🎜🎜Einfache Bedienung, reibungslose Lernkurve, vollständige Dokumentation🎜🎜Übernimmt die Stärken von Angular (Modularität) und React (virtuelles DOM) und verfügt über ein einzigartiges Design Funktionen, wie zum Beispiel: berechnete Eigenschaften 🎜🎜Open Source, hochaktive Community🎜🎜
4.4, das erste Vue-Programm
🎜[Erklärung] IDEA kann Vue-Plug-Ins installieren!🎜 Hinweis: Vue unterstützt IE nicht 8 und niedriger, da Vue Funktionen von ECMAScript 5 verwendet, die IE 8 nicht emulieren kann. Aber es unterstützt alle ECMAScript 5-kompatiblen Browser. 🎜🎜🎜 (1) Download-Adresse 🎜🎜🎜🎜 Entwicklungsversion 🎜🎜 Enthält vollständige Warnungen und Debug-Modus: https://yuejs.org/js/vue.js 🎜🎜Entfernte Warnungen, 30,96 KB min+gzip: https :/ /vuejs.org/js/vue.min.js🎜🎜🎜🎜CDN🎜🎜<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/%20vue.%20js%E2%80%9C></script>%F0%9F%8E%9C%F0%9F%8E%9C<script%20src=" https: js></script>🎜🎜🎜🎜🎜🎜 (2) Code schreiben🎜🎜🎜Der Kern von Vue.js ist die Implementierung des MVVM-Musters. Die Rolle, die sie spielt, ist die View Model-Ebene Die erste Anwendung besteht darin, ihre Datenbindungsfunktion zu demonstrieren: 🎜🎜
<!--view层，模板--><p>
{{message}}</p>
Nach dem Login kopieren
🎜🎜3 Instanz🎜🎜
nbsp;html>
<meta>
<title>Title</title><!--view层，模板--><p>
{{message}}</p><script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message:"hello,vue!"
}
});</script>
Nach dem Login kopieren
🎜Beschreibung: 🎜🎜🎜el: '#vue': ID des gebundenen Elements🎜🎜data:{message:'Hello Vue!': Im Datenobjekt gibt es eine Eigenschaft namens message, deren Anfangswert auf Hello Vue! gesetzt ist. 🎜🎜🎜4. Binden Sie Daten an Seitenelemente🎜
nbsp;html>
<meta>
<title>Title</title>
鼠标悬停几秒钟查看此处动态绑定的提示信息！
<script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message: '页面加载于 ' + new Date().toLocaleString()
}
});</script>
Nach dem Login kopieren
Nach dem Login kopieren
🎜Anweisungen: Sie müssen nur doppelte geschweifte Klammern verwenden, um das von Vue erstellte Nachrichtenattribut in das gebundene Element einzuschließen, um die Datenbindungsfunktion zu realisieren, d Die Modellebene ist dem EL-Ausdruck sehr ähnlich? 🎜🎜🎜(3) Vollständiger HTML-Test🎜🎜
nbsp;html>
<meta>
<title>Title</title><p>
</p>
Yes
No
<script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
type: true
}
});</script>
<p>
<pan></pan></p><script></script><script>
//先注册组件
Vue.component("pan",{
template:'<li>Hello'
});
//再实例化Vue
var vm = new Vue({
el:"#app",
});</script>
//导入vueimport Vue from 'vue';import VueRouter from 'vue-router';//导入组件import Main from "../views/Main";import Login from "../views/Login";//使用Vue.use(VueRouter);//导出export default new VueRouter({
routes: [
{
//登录页
path: '/main',
component: Main },
//首页
{
path: '/login',
component: Login },
]})
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from "./router"import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(router)Vue.use(ElementUI)/* eslint-disable no-new */new Vue({
el: '#app',
router,
render:h=>h(App)})
Das obige ist der detaillierte Inhalt vonVues detailliertestes Wissen und Notizen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
