Was ist Frontend?

Dieses Mal werde ich Ihnen zeigen, was das Frontend ist, und eine detaillierte Erklärung des Konzepts des Frontends werfen.

Ich unterhielt mich während des chinesischen Neujahrs mit meinem Cousin. Er sagte, dass er schon früher Webseiten mit HTML, JS und CSS geschrieben habe. Was war also der Unterschied zwischen dem Frontend jetzt und damals? Ich habe ihm damals das Frontend vorgestellt.

Zu diesem Zeitpunkt war mein Verständnis des Frontends jedoch nicht sehr gründlich, sodass ich das Gefühl hatte, es nicht klar erklärt zu haben.

Während mein eigenes Lernen vertieft wird, halte ich es für notwendig, einen Blog-Beitrag über die Unterschiede zwischen Front-End und dem Schreiben von Webseiten zusammenzufassen. Gleichzeitig möchte ich auch meine aktuellen Meinungen und Erkenntnisse festhalten. Wenn ich nach einer Weile darauf zurückblicke, werde ich auf jeden Fall viele Erkenntnisse über meine eigene Verbesserung gewinnen.

Aufgrund meines begrenzten Wissensstandes weisen Sie bitte auf Fehler im Kommentarbereich hin, vielen Dank!

Ära der Webentwicklung

Damals schrieben die Leute Webseiten über HTML und passten Stile mit JS und CSS an.

Was wir aus verschiedenen klassischen Büchern „Head First HTML and CSS“, „Mastering CSS: Advanced Web Standard Solutions“ und „JavaScriptAdvanced Programming“ gelernt haben, sind im Wesentlichen diese Aspekte. Die meisten Videos auf MOOC beschränken sich auf diesen Aspekt.

Web-Template-Ära

Da die Komplexität von Webseiten zunimmt, entwickeln Programmierer verschiedene Web-Template-Sprachen, um die Entwicklung zu vereinfachen.

Zum Beispiel vereinfacht die Sprache less das Schreiben von CSS, CoffeeJS vereinfacht das Schreiben von JS und es gibt viele verschiedene Vorlagen, die eine Mischung aus HTML und JS sind.

Ajax-Ära

Mit der Entwicklung von js ermöglicht die Erfindung von XHR Programmierern, Daten im Frontend zu verarbeiten und einige Back-End-Arbeiten zu teilen.

Ein gutes Beispiel ist FormularvalidierungAh, der Browser-Schieberegler gleitet nach unten, bevor er mit dem Laden von Bildern beginnt und so weiter.

SPA-Ära

SPA=Single Page Application.

Mit der Entwicklung von Ajax können Benutzer Daten auf der Browserseite verarbeiten, was bedeutet, dass das Frontend eine gesamte Anwendung, dh SPA, schreiben kann.

In der SPA-Ära verwendeten Programmierer js, um den gesamten Front-End-Teil zu verwalten. Benutzer luden alle js herunter, als sie die Website öffneten, und verwendeten js direkt auf der Browserseite. Bei der Verarbeitung ist es nicht erforderlich, eine HTTP-Anfrage an den Server zu senden.

Ein sehr wichtiges Konzept ist derzeit das Routing Da die http-Anfrage beim Öffnen der Seite nicht gesendet wird, weiß der Browser nicht, was er mit einer URL machen soll. Zu diesem Zeitpunkt muss ein Mechanismus vorhanden sein, der den Browser anleitet, welche Inhalte auf welcher URL geöffnet werden.

MVC-Ära

Mit der Entwicklung der SPA-Ära unterteilen Menschen häufig Projekte in verschiedene Module, um die Entwicklung zu vereinfachen. Das typischste ist MVC, das Modell, Ansicht und Kontrolle bedeutet.

In dieser Ära sind verschiedene Frameworks entstanden, wie zum Beispiel das Backbone-Framework und so weiter.

MVVM-Ära

Da das Steuermodul von MVC im Allgemeinen vom Server verarbeitet wird, gehört dies nicht zum Front-End-Inhalt. Um dieses Problem zu lösen, wurde eine Lösung vorgeschlagen, die darin besteht, ein Ansichtsmodell anstelle einer Steuerung zu verwenden. Dies ist der Ursprung des MVVM-Frameworks. Die implementierte Technologie wird als Zwei-Wege-Bindung bezeichnet.

In dieser Ära erschienen moderne Front-End-Frameworks: ReactJS, AngularJS usw. Zu diesem Zeitpunkt können Front-End-Ingenieure bereits Software entwickeln, die auf Browsern läuft, und Anwendungssoftware, einschließlich solcher, die auf mobilen Browsern läuft.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Zwei Methoden zur Implementierung des Wasserfall-Flow-Layouts

Detaillierte Erläuterung des Browser-Rendering-Prozesses

Welche Bedeutung hat Overflow-Scrolling?

Welche Layoutlösungen gibt es für mobile Endgeräte in HTML?

Das obige ist der detaillierte Inhalt vonWas ist Frontend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!