Web-Frontend-Frameworks umfassen: 1. Angular, ein Frontend-Framework zum Erstellen einer einzelnen Anwendungsschnittstelle; 2. React, ein JavaScript-Entwicklungsframework zum Erstellen von Benutzeroberfl?chen; 3. Vue, eine Reihe von Tools zum Erstellen von Benutzeroberfl?chen Progressives JavaScript-Framework; 4. Bootstartp, ein Front-End-Framework basierend auf HTML, CSS und JavaScript; 5. QUICK UI, eine Reihe von Web-Front-End-Entwicklungsl?sungen; 6. SUI, eine Front-End-Komponentenbibliothek; .

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.

Beim Web-Frontend, auch ?Client“ genannt, geht es um die visuellen Aspekte der Website, die der Benutzer sehen und erleben kann, also um alles, was der Benutzer sieht und was der Webbrowser anzeigt, einschlie?lich dessen, was der Benutzer sehen kann Alles sehen, anfassen und erleben; das hei?t, das Web-Frontend umfasst die Struktur der Webseite, das visuelle Erscheinungsbild des Webs und die Implementierung der Interaktion auf Webebene.

Was sind die Web-Frontend-Frameworks? 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

• Vorteile:
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.

• Nachteile:
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 Wenn die Codekomprimierung eine explizite Deklaration erfordert.

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.

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.
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.
• Nachteile:

• 1. Neuling: 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.

4. Bootstartp

• Bootstrap ist das Open-Source-Frontend-Framework von Twitter, das auf HTML, CSS und JavaScript basiert. Es handelt sich um ein Front-End-Toolkit, das für die schnelle Entwicklung von Webanwendungen entwickelt wurde. Es unterstützt ein responsives Layout und h?lt sich nach der V3-Version an die Priorit?t mobiler Ger?te.

Bootstrap bietet elegante HTML- und CSS-Spezifikationen, die in der dynamischen CSS-Sprache Less geschrieben sind. Bootstrap erfreut sich seit seiner Einführung gro?er Beliebtheit und ist ein beliebtes Open-Source-Projekt auf GitHub, darunter MSNBC (Microsoft National Broadcasting Company) Breaking News der NASA. Einige Frameworks, die inl?ndischen Mobilentwicklern bekannt sind, wie das Front-End-Open-Source-Framework WeX5, sind ebenfalls leistungsoptimiert und basieren auf dem Bootstrap-Quellcode.

• Offizielle Adresse: https://getbootstrap.com
• Chinesische Adresse: http://www.bootcss.com/

Bootstrap ist dank seiner sehr praktischen Funktionen und Features sehr beliebt . Die wichtigsten Kernfunktionen sind wie folgt: 1) Ger?te- und browserübergreifend

Kompatibel mit allen modernen Browsern, einschlie?lich der st?rker kritisierten IE7 und 8. Browser unter IE9 werden in diesem Kurs natürlich nicht mehr berücksichtigt.

2) Responsives Layout

kann nicht nur die Anzeige verschiedener Aufl?sungen auf dem PC unterstützen, sondern auch die reaktionsf?hige Umschaltanzeige von mobilen PADs, Mobiltelefonen und anderen Bildschirmen.

3) Umfassende Komponenten bereitgestellt

Bootstrap bietet ?u?erst praktische Komponenten, darunter Navigation, Beschriftungen, Symbolleisten, Schaltfl?chen und eine Reihe von Komponenten, die für Entwickler bequem aufzurufen sind.

4) Integriertes jQuery-Plug-inBootstrap bietet viele praktische jQuery-Plug-ins, die es Entwicklern erleichtern, verschiedene allgemeine Spezialeffekte im Web zu implementieren.

5) Unterstützt HTML5, CSS3

HTML5-semantische Tags und CSS3-Attribute werden gut unterstützt.

6) Unterstützt LESS dynamische Stile

LESS verwendet Variablen, Verschachtelung und gemischte Operationscodierung, um schnelleres und flexibleres CSS zu schreiben. Es l?sst sich gut mit Bootstrap entwickeln.

5. QUICK UI

QUICK UI ist ein vollst?ndiger Satz von Web-Frontend-Entwicklungsl?sungen auf Unternehmensebene, bestehend aus einem Basis-Framework, einer UI-Komponentenbibliothek, einem Skin-Paket, einem Beispielprojekt und einer Dokumentation. Entwickler, die QUICKUI verwenden, k?nnen ihre Arbeitsbelastung erheblich reduzieren, die Entwicklungseffizienz verbessern und schnell leistungsstarke, sch?ne und kompatible Webanwendungssysteme erstellen.

6. MDC Web

Material Components für das Web (MDC Web), ein neues Front-End-Framework, das von Google für das Web entwickelt wurde. MDC Web hilft Entwicklern bei der Implementierung von Material Design, und Komponenten werden vom Google-Kernteam aus Ingenieuren und UX-Designern entwickelt. Diese Komponenten erm?glichen einen soliden Entwicklungsworkflow zum Erstellen sch?ner und funktionaler Webprojekte.

7、Rein

Bootstrap, Patternfly und MDC Web sind sehr leistungsf?hige CSS-Frameworks, aber sehr mühsam und komplex. Wenn Sie ein leichtes CSS-Framework wünschen, empfiehlt es sich, Pure.css auszuprobieren. Es ?hnelt eher der CSS-Programmierung, kann aber auch beim Erstellen einer guten Webseite helfen. Pure ist ein leichtes CSS-Framework mit minimalem Platzbedarf. Es wurde von Yahoo entwickelt und ist Open Source unter der BSD-Lizenz.

Das obige ist der detaillierte Inhalt vonWelche Frameworks gibt es für Web-Frontend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!