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 JavaScript, das zum Erstellen von Benutzeroberflächen verwendet wird Build UI; 3. vue ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen, das sich nur auf die Ansichtsebene konzentriert und sehr einfach zu erlernen und in andere Bibliotheken oder bestehende Projekte zu integrieren ist.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.
In den letzten zehn Jahren hat sich die IT-Branche rasant weiterentwickelt und es sind viele neue Berufe entstanden, wie z. B. UI-Designer, Entwicklungsingenieure, Softwaretestingenieure usw. Zu den vielen hochkarätigen neuen Berufen zählen Web-Front-End-Ingenieure ihnen. Was sind also die drei gängigen Frameworks für das Web-Frontend?
Die drei gängigen Web-Frontend-Frameworks sind Angular, React und Vue.
1. Eckig
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 einzelner Anwendungsschnittstellen. Es verfügt über viele Kernfunktionen wie Datenbindung, Dienste, Anweisungen, Abhängigkeitsinjektion usw. Es verfügt über leistungsstarke Modulfunktionen und die Vorteile benutzerdefinierter Befehle
Merkmal:
1. Gute Bewerbungsstruktur
2. Zwei-Wege-Datenbindung
3. Anweisungen
4.HTML-Vorlage
5. Kann eingebettet, injiziert und getestet werden
Vorteil:
1. Die Vorlage ist leistungsstark und funktionsreich und verfügt über einen äußerst umfangreichen Satz an Winkelanweisungen.
2. Es handelt sich um ein relativ vollständiges Front-End-Framework, das Dienste, Vorlagen, bidirektionale Datenbindung, Modularisierung, Routing, Filter, Abhängigkeitsinjektion und andere Funktionen umfasst.
3. Anweisungen anpassen Nachdem Sie die Anweisungen angepasst haben, können Sie sie mehrmals im Projekt verwenden.
4. Die NG-Modularisierung 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 eine solide Grundlage und Community-Unterstützung verfügt.
Mangel:
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. In der offiziellen Dokumentation wird grundsätzlich nur über die API gesprochen, ohne Beispiele. In vielen Fällen können Sie die spezifischen Anweisungen von Google erhalten oder direkt bei Misko, dem Autor von Angular, nachfragen.
3. Die Kompatibilität mit IE6/7 ist nicht besonders gut, aber Sie können jQuery verwenden, um Ihren eigenen Code zu schreiben und einige Probleme zu lösen.
4. Es gibt nur wenige Best-Practice-Tutorials zur Anwendung von Anweisungen. Wenn Sie die Verwendungsprinzipien einiger Autoren nicht befolgen, ist es beispielsweise einfach, unterschiedliche DOM-Operationen in js zu schreiben die jQuery ähneln.
5. DI-Abhängigkeitsinjektion erfordert eine explizite Deklaration, wenn eine Codekomprimierung erforderlich ist.
2.Reagieren
React, produziert von Facebook, wurde 2013 offiziell eingeführt, vier Jahre später als Angular. Dank seines innovativen VirtualDOM übertraf es jedoch AngularJS in der Leistung. 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.
Merkmal
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.
Vorteil:
1. Hohe Geschwindigkeit: Während des UI-Rendering-Prozesses implementiert React teilweise 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. Einseitiger Datenfluss: Flux ist eine Architektur zum Erstellen einer unidirektionalen Datenschicht in JavaScript-Anwendungen. 5. Isomorphes, reines JavaScript: Da Suchmaschinen-Crawler auf serverseitige Antworten und nicht auf die Ausführung von JavaScript angewiesen sind, wird Ihre App vorab gerendert hilft bei SEO. 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
Als letztes Framework (2014) greift Vue auf die Funktionen seiner Vorgänger Angular und React zurück (z. B. VirtualDOM, bidirektionale Datenbindung, Diff-Algorithmus, responsive Eigenschaften, Komponentenentwicklung usw.) und nimmt relevante Optimierungen vor, um es zu erstellen benutzerfreundlicher, einfacher zu starten und für Anfänger weniger geeignet.
Merkmal:
1. Leichter Rahmen
2. Zwei-Wege-Datenbindung
3. Anweisungen
4. Plug-in
Vorteil:
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 abgeleiteten Eigenschaften (berechnete Eigenschaften) deklarieren.
6. Modulfreundlich: Es kann über NPM, Bower oder Duo installiert werden. Es zwingt nicht Ihren gesamten Code, den verschiedenen Vorschriften von Angular zu folgen, und die Verwendungsszenarien sind flexibler.
Mangel:
1. Neu: Vue.js ist ein neues Projekt, nicht so ausgereift wie Angular.
2. Der Einfluss ist 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. Unterstützt IE8 nicht.
Erweitertes Wissen: Was ist der Unterschied zwischen Vue.js und anderen Frameworks?
1. Unterschiede zu AngularJS
Ähnliche Punkte:
Beide unterstützen Anweisungen: integrierte Anweisungen und benutzerdefinierte Anweisungen.
Beide unterstützen Filter: integrierte Filter und benutzerdefinierte Filter.
Beide unterstützen die bidirektionale Datenbindung.
Weder unterstützt Low-End-Browser.
Unterschiede:
1. Der Lernaufwand für AngularJS ist hoch, beispielsweise durch das Hinzufügen der Dependency-Injection-Funktion, während die von Vue.js selbst bereitgestellte API relativ einfach und intuitiv ist.
2. In Bezug auf die Leistung setzt AngularJS auf eine schmutzige Überprüfung der Daten. Je mehr Watcher 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
Ähnliche Punkte:
React verwendet eine spezielle JSX-Syntax, und Vue.js empfiehlt außerdem, bei der Komponentenentwicklung das spezielle Dateiformat .vue zu schreiben. Es gibt einige Konventionen für den Dateiinhalt, und beide müssen zur Verwendung kompiliert werden.
Die Grundidee ist dieselbe: Alles ist eine Komponente und Komponenteninstanzen können verschachtelt werden.
Alle bieten angemessene Hook-Funktionen, die es Entwicklern ermöglichen, ihre Bedürfnisse anzupassen.
Spalten-AJAX, Route und andere Funktionen sind nicht in das Kernpaket integriert, sondern werden als Plug-Ins geladen.
Die Funktionen von Mixins werden bei der Komponentenentwicklung unterstützt.
Unterschiede:
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 stellt Anweisungen, Filter usw. in Vorlagen bereit, mit denen das DOM sehr bequem und schnell bedient werden kann.
Das Obige ist der detaillierte Inhalt der drei gängigen Web-Front-End-Frameworks. Weitere Informationen finden Sie in anderen verwandten Artikeln auf dieser Website!