Drei gängige Web-Front-End-Frameworks: 1. Angular, ein Front-End-Framework zum Erstellen einer einzelnen Anwendungsschnittstelle mit leistungsstarken Modulfunktionen und benutzerdefinierten Befehlen. 2. React, ein Front-End-Framework zum Erstellen von Benutzeroberflächen Das JavaScript-Entwicklungsframework wird hauptsächlich zum Erstellen von Benutzeroberflächen verwendet. Vue ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene und ist sehr einfach zu erlernen und leicht in andere oder vorhandene Bibliotheken zu integrieren Bibliotheken.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.
In den letzten zehn Jahren hat sich die IT-Branche rasant weiterentwickelt und viele neue Berufe hervorgebracht, wie z. B. UI-Designer, Entwicklungsingenieure, Softwaretestingenieure usw. Zu den vielen hochkarätigen neuen Berufen gehört der Web-Front-End-Ingenieur ist einer von ihnen. Was sind also die drei gängigen Frameworks für das Web-Frontend?
Die drei gängigen Frameworks für Web-Frontends sind Angular, React und Vue.
1. Angular
AngularJS wurde 2009 von Misko Hevery und anderen erstellt und später von Google übernommen. Es handelt sich um ein hervorragendes Front-End-JS-Framework, das in vielen Produkten verwendet wird. Es handelt sich nicht nur um ein Front-End-Entwicklungsframework mit fortschrittlichen Konzepten, sondern auch um eine End-to-End-Lösung. Es folgt dem MVC-Muster im Architekturdesign und befürwortet eine lose Kopplung von Daten und logischen Verarbeitungskomponenten. AngularJS realisiert die natürliche Erweiterung von HTML durch Anweisungstechnologie und realisiert eine bidirektionale automatische Synchronisierung von Datenmodell und Anzeigeansicht durch Kompilierungstechnologie, wodurch komplexe DOM-Operationen erleichtert werden. Darüber hinaus bietet es auch eine gute Unterstützung für automatisierte Front-End-Testtechnologie.
Angular ist ein Front-End-Framework zum Erstellen einer einzelnen Anwendungsschnittstelle. Es verfügt über viele Kernfunktionen wie Datenbindung, Dienste, Anweisungen, Abhängigkeitsinjektion usw. Es verfügt über leistungsstarke Modulfunktionen und bietet die Vorteile benutzerdefinierter Befehle
1. Gute Anwendungsstruktur
-
3 . HTML-Vorlage
-
5. Kann eingebettet, eingefügt und getestet werden
- 1. Die Vorlage ist leistungsstark und umfangreich und enthält einen äußerst umfangreichen Satz an Winkelanweisungen.
2. Es handelt sich um ein relativ vollständiges Front-End-Framework, einschließlich Diensten, Vorlagen, bidirektionaler Datenbindung, Modularisierung, Routing, Filter, Abhängigkeitsinjektion und allen anderen Funktionen;
3 Die Direktive kann im Projekt mehrfach verwendet werden.
-
4.ng-Modularität führt mutig einige Dinge aus Java ein (Abhängigkeitsinjektion), was das Schreiben von wiederverwendbarem Code erleichtert, was für agile Entwicklungsteams sehr hilfreich ist.
-
5.angularjs wurde vom Internetgiganten Google entwickelt, was auch bedeutet, dass es über ein solides Fundament und Community-Unterstützung verfügt.
- 1 Der Einstieg in Angular ist einfach, aber wenn man tiefer in die Materie einsteigt, gibt es viele Konzepte, die beim Lernen schwer zu verstehen sind.
2. Es gibt nur sehr wenige Beispiele in der Dokumentation. Die offizielle Dokumentation spricht im Grunde nur von der API, und in vielen Fällen kommt die konkrete Verwendung davon von Google oder fragt direkt danach Misko, der Autor von Angular.
3. Es ist nicht besonders kompatibel mit IE6/7, aber Sie können jQuery verwenden, um Ihren eigenen Code zu schreiben, um einige Probleme zu lösen.
-
4. Es gibt nur wenige Best-Practice-Tutorials zur Anwendung von Anweisungen. Wenn Sie sich nicht an die Verwendungsprinzipien einiger Autoren halten, ist es einfach, andere Codes zu schreiben viele DOM-Operationen in js oder jQuery-ähnlichen Ideen.
-
5.DI-Abhängigkeitsinjektion erfordert eine explizite Deklaration, wenn Codekomprimierung erforderlich ist.
- 2, React
- React, produziert von Facebook, die offizielle Version wurde 2013 veröffentlicht, 4 Jahre später als Angular, aber dank seines innovativen VirtualDOM übertrifft es AngularJS in der Leistung Das Feuer war ein Chaos. Es verfügt über viele Funktionen, einschließlich VirtualDOM, JSX, Diff-Algorithmus usw., unterstützt die ES6-Syntax und verwendet funktionale Programmierung. Der Schwellenwert ist etwas höher, aber auch flexibler und ermöglicht mehr Entwicklungsmöglichkeiten.
Funktionen
1. Deklaratives Design: React übernimmt ein deklaratives Paradigma, das die Beschreibung von Anwendungen erleichtert.
2. Effizient: React minimiert die Interaktion mit dem DOM, indem es das DOM simuliert.
3. Flexibel: React funktioniert gut mit bekannten Bibliotheken oder Frameworks.
- 1 Schnell: Während des UI-Rendering-Prozesses implementiert React lokale Aktualisierungen des tatsächlichen DOM durch Mikrooperationen im virtuellen DOM.
2. Browserübergreifende Kompatibilität: Virtual DOM hilft uns bei der Lösung browserübergreifender Probleme. Es stellt uns eine standardisierte API zur Verfügung, was selbst im IE8 kein Problem darstellt.
3. Modularisierung: Schreiben Sie unabhängige modulare UI-Komponenten für Ihr Programm, sodass Sie bei Problemen mit einer oder mehreren Komponenten diese problemlos isolieren können.
4. Einweg-Datenfluss: Flux ist eine Architektur zum Erstellen einer Einweg-Datenschicht in JavaScript-Anwendungen. 5. Isomorphes, reines JavaScript: Weil Suchmaschinen-Crawler auf serverseitige Antworten und nicht auf JavaScript angewiesen sind. Die Ausführung von pre -Das Rendern Ihrer App hilft bei der Suchmaschinenoptimierung. 6. Gute Kompatibilität: RequireJS wird beispielsweise zum Laden und Packen verwendet, während Browserify und Webpack zum Erstellen großer Anwendungen geeignet sind. Sie machen diese schwierigen Aufgaben weniger entmutigend. Nachteile: React selbst ist nur ein V, kein vollständiges Framework. Wenn Sie also ein vollständiges Framework für ein großes Projekt wünschen, müssen Sie grundsätzlich ReactRouter und Flux hinzufügen, um große Anwendungen zu schreiben. 3, Vue , Komponentisierungsentwicklung usw.) und relevante Optimierungen vorgenommen, um die Verwendung komfortabler, den Einstieg zu erleichtern und für Anfänger weniger geeignet zu machen.
Funktionen:
1. Leichtes Framework
2. Befehle
- Vorteile:
1. Einfach: Die offizielle Dokumentation ist sehr klar und einfacher zu erlernen als Angular.
2. Schnell: DOM in der asynchronen Stapelverarbeitung aktualisieren.
3. Zusammensetzung: Stellen Sie Ihre Anwendung mit entkoppelten, wiederverwendbaren Komponenten zusammen.
4. Kompakt: ~18kbmin+gzip und keine Abhängigkeiten.
5. Leistungsstark: Ausdrücke müssen keine abhängigen ableitbaren Eigenschaften (berechnete Eigenschaften) deklarieren. - Nachteile:
1. Neu: Vue.js ist ein neues Projekt, nicht so ausgereift wie Angular.
2. Die Auswirkungen sind nicht sehr groß: Ich habe gegoogelt und festgestellt, dass die Vielfalt oder der Reichtum von Vue.js geringer ist als die einiger anderer berühmter Bibliotheken
3.
Wissen erweitern: Was ist der Unterschied zwischen Vue.js und anderen Frameworks?
Unterstützt keine Low-End-Browser. Unterschiede: 1. AngularJS hat einen hohen Lernaufwand, wie zum Beispiel die Hinzufügung der Dependency-Injection-Funktion, während die von Vue.js selbst bereitgestellten APIs relativ einfach und intuitiv sind.
2. In Bezug auf die Leistung ist AngularJS auf eine schmutzige Überprüfung der Daten angewiesen. Je mehr Beobachter es gibt, desto langsamer wird es. Vue.js verwendet eine auf Abhängigkeitsverfolgung basierende Beobachtung und asynchrone Warteschlangenaktualisierungen. Alle Daten werden unabhängig voneinander ausgelöst.
Bei großen Anwendungen ist dieser Optimierungsunterschied ziemlich offensichtlich.
2. Unterschiede zu React
Gleiche Punkte:
React verwendet bei der Komponentenentwicklung auch das spezielle .vue-Dateiformat und hat einige Konventionen für den Dateiinhalt vor der Verwendung zusammengestellt.
Die Grundidee ist dieselbe: Alles ist eine Komponente und Komponenteninstanzen können verschachtelt werden.
Alle bieten angemessene Hook-Funktionen, sodass Entwickler ihre Anforderungen anpassen können.
Es gibt keine integrierten AJAX-, Route- und anderen Funktionen im Kernpaket, sondern werden als Plug-Ins geladen.
Unterstützt die Funktionen von Mixins in der Komponentenentwicklung.
Unterschied:
React setzt auf Virtual DOM, während Vue.js DOM-Vorlagen verwendet. Das von React verwendete virtuelle DOM führt Dirty-Checks für die gerenderten Ergebnisse durch. Vue.js bietet in der Vorlage Anweisungen, Filter usw., mit denen das DOM sehr bequem und schnell bedient werden kann.
(Lernvideo-Sharing:
Web-Frontend
)
Das obige ist der detaillierte Inhalt vonWas sind die drei gängigen Frameworks für das Web-Frontend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
