Möchten Sie Web-Frontend gut erlernen? Was müssen Sie noch beherrschen?

Wie man mit Web-Front-End anfängt, müssen wir zunächst damit beginnen, was ein Junior-Web-Front-End-Ingenieur ist:

Nach meiner Idee teile ich Front-End-Ingenieure in vier Kategorien ein: Einstiegsstufe, Junior-, Mittelstufe- und Senior-Stufe,

Die Einstiegsstufe bezieht sich auf das Verständnis des Frontends (viele Leute wissen immer noch nicht, was das Frontend ist) und das Verständnis des grundlegenden HTML , CSS- und Javascript-Syntax (suchen Sie einfach im Internet nach diesen Sprachdingen. Es gibt viele, viele. Die grundlegende Syntax ist das Wichtigste im gesamten technischen System. Führende Web-Technologie-Tutorials), Sie können Seiten gemäß den Entwurfszeichnungen des Designers erstellen Ohne die Kompatibilität zu berücksichtigen, haben Sie einige Frameworks kennengelernt (z. B. jQuery, Zepto, Bootstrap usw.), die zwar schlecht, aber immer noch großartig sind.

Nachdem Sie die Einstiegsphase durchlaufen haben, verstanden haben, was das Front-End tut, Sie die grundlegende Syntax gelernt haben und einige einfache Seiten unabhängig erstellen können, müssen Sie weiter lernen, zu erreichen Das Niveau eines Junior-Front-End-Ingenieurs muss viel wissen. Sie müssen ein klares Verständnis des gesamten Front-Ends haben und mit der Verwendung verschiedener Technologien vertraut sein.

Junior-Front-End-Ingenieur: Das erste, was Sie wissen müssen, ist, wie man mit der Kompatibilität verschiedener Browser umgeht (z. B. was ist der Unterschied zwischen createElement im IE-Browser usw.). Das Unternehmen stellt Mitarbeiter ein. Bei der Arbeit müssen sie über Kenntnisse in HTML5, CSS3 und Javascript verfügen. Diese Kenntnisse bedeuten, dass sie schnell erlernt werden können.

Im Folgenden geht es um die spezifischen Kenntnisse, die junge Front-End-Ingenieure erlernen sollten. Anschließend müssen sie verschiedene CSS-Präprozessoren und Postprozessoren sowie die Verwendung gängiger Front-End-MV*-Frameworks verstehen (AngularJS, Backbone, ReactJS usw.) und die Prinzipien dieser Frameworks kennen. Darüber hinaus müssen Sie mit der Verwendung von NodeJS vertraut sein und in der Lage sein, verschiedene Front-End-Konstruktionstools basierend auf Node (Grunt, Gulp usw.) zu verwenden. Sie müssen mit Github oder Gitlab vertraut sein und mit Modularisierung, Komponentisierung und Semantik vertraut sein. Schließlich müssen Sie wissen, wie man mobile Seiten entwickelt und die Leistung einer Seite optimiert.

Technisches System für junge Web-Front-End-Ingenieure

1.HTML-Teil

Das Erste ist, die Verwendung einiger gängiger Tags zu beherrschen und Ihre verschiedenen Attribute habe ich wie folgt zusammengefasst:

html: das Stammelement der Seite. head: Das Head-Tag der Seite, das den Container für alle Head-Elemente darstellt. body: Das Haupt-Tag der Seite, in dem der auf der Seite angezeigte Inhalt platziert wird. Titel: Der Titel der Seite. Meta: Befindet sich am Kopf des Dokuments und stellt Metainformationen über die Seite bereit, einschließlich Schlüsselwörtern, Beschreibungen usw. Link: Definieren Sie die Beziehung zwischen dem Dokument und externen Ressourcen. Die häufigste Verwendung ist die Einführung von Stylesheets. script: script-Tag Sie können js-Skriptcode in dieses Tag einfügen oder das src-Attribut dieses Tags verwenden, um ein externes Tag einzuführen. Stil: Stil-Tag, CSS-Code kann in dieses Tag geschrieben werden. a: Hyperlink, das href-Attribut stellt den Ort dar, zu dem verlinkt werden soll, und das Zielattribut stellt die Öffnungsmethode dar. img: Bild-Tag, src-Attribut gibt den Speicherort des Bildes an. Formular: Formularelement, seine interne Eingabe, Auswahl, Textbereich und andere Tags sind relativ wichtig. div: Definieren Sie die Partition oder den Abschnitt im Dokument. Sie können div zum Durchführen von Seitenlayouts und anderen Vorgängen verwenden. Darüber hinaus werden häufig Tags wie ul, li, p, button, iframe, p und table verwendet. Semantische Tags wie nav, section, Article, header, aside und footer müssen ebenfalls verstanden werden.

Zusätzlich zum Verständnis der oben genannten Tags müssen Sie auch ein gewisses Verständnis einiger neuer HTML5-APIs haben:

Audio- und Video-Tags.

Leinwand: Definieren Sie Grafiken wie Diagramme und andere Bilder.

Das Accept-Attribut des Eingabe-Tags, E-Mail, Telefon, URL und anderer Typen.

getElementByClassName ruft einen Elementknoten basierend auf dem Klassennamen ab.

Mehrere Dateiauswahl, mehrere Dateiauswahlattribute.

HTML-Import, Vorlage

Prozess-Tag, WebGL und andere Inhalte.

Es gibt auch einige Wissenspunkte, die Sie kennen müssen:

1. Die Rolle von Doctype. 2. Die Prinzipien und Unterschiede zwischen Unicode, utf8 und anderen Kodierungen. 3. So optimieren Sie die Seitenleistung. 4. Verschiedene Vorteile von Bildformaten wie PNG, JPG, WebP und GIF. 5. Der Unterschied zwischen HTML-Inline-Elementen und Elementen auf Blockebene. 6. Häufig verwendete Head-Tags in der mobilen Webentwicklung. 7. Web-Semantik. 8. Prinzip des Cachings in Browsern.

2. CSS-Teil

In Bezug auf CSS ist es meine Meinung, online ein CSS-Referenzhandbuch im CHM-Format herunterzuladen und dann jedes einzelne entsprechend den Angaben im Handbuch einzugeben.

CSS ist grob in die folgenden Wissenspunkte unterteilt:

① Positionierungslayout

1. Die 7 Werte des Positionsattributs (statisch | relativ | absolut). |. fest |. Mitte |. Sticky) Was sind die Funktionen und Unterschiede?

2. Implementieren Sie ein Glyphen-Layout oder ein Drei-Spalten-Layout (die Breite links und rechts ist festgelegt und die Mitte passt sich dem Bildschirm an).

3. Methoden zum Floaten und Löschen von Floats, Flex-Layout, Raster-Layout.

② Box-Modell

1. Rand, Polsterung und Rand sind die drei Attribute.

2. Inhalte im Zusammenhang mit der einziehbaren Box.

3.Mehrspaltiges Layoutmodul, mehrspaltiges Layoutmodell.

③ Textschriftart

1. Zeilenumbruch erzwingen oder kein Zeilenumbruch, Leerraum löschen.

2. Textausrichtung, Größe (So stellen Sie Chrome-Schriftarten ein, die kleiner als 12 Pixel sind), Einrückung und Konvertierung.

3. Einheit (em, rem, px usw.), Farbe (rgb, rgba, hls).

④ Transformation, Übergang und Animation

1. Die Rolle und Kompatibilität verschiedener Werte der Transformation.

2.Übergangsanimationstyp, das Prinzip der Bezier-Kurve.

3. Verschiedene Einstellungen der Animationsanimation, @keyframes-Regeln.

4. Neuzeichnen und Umfließen des Browsers.

⑤ Selektor

1 Die Klassifizierung, das Gewicht und die Priorität des Selektors.

2. Welche Attribute können vererbt werden und welche nicht.

3. Was sind Pseudoklassen und Pseudoelemente und welche Funktionen haben sie?

Zusätzlich zu diesen grundlegenden Inhalten müssen Sie Sass, Stylus und andere CSS-Präprozessoren verstehen. Dies wird Ihre CSS-Entwicklungseffizienz erheblich verbessern. CSS-Postprozessoren wie Autoprefixer und PostCSS.

3. JavaScript-Teil

Ich werde hier nicht über die Grundkenntnisse von js sprechen Syntaxebene und Die verwendeten Ebenen sind in zwei Teile gegliedert.

Je nach Syntaxebene:

Der erste ist der objektorientierte Aspekt von JavaScript: die Implementierung von Kapselung, Vererbung und Polymorphismus in JavaScript.

① Kapselung: In js kann die Kapselung durch Abschlüsse, Bereiche und Bereichsketten sowie die Rolle von const und let in ES6 erreicht werden. ② Vererbung: prototypkettenbasierte Vererbung, konstruktorbasierte Vererbung, kombinierte Vererbung, parasitäre Vererbung usw. sowie die ES6-Klassenschlüsselwörter „prototyp“ und „__proto__“. ③ Polymorphismus: In JavaScript wird Polymorphismus mithilfe von Argumenten implementiert. Es werden viele Inhalte über Argumente abgeleitet: 1. Die Rolle von Aufrufern, Aufrufenden und anderen Methoden von Argumenten. 2. Die Funktionen von Apply- und Call-Methoden sind unterschiedlich. 3. Verwenden Sie Array.prototype.slice.call, um ein Array-Objekt in ein Array zu konvertieren. 4. Verschiedene Array-Methoden wie Shift, Splice, Push, Filter, Map, Reduce, ForEach usw.

Dann gibt es Js-Entwurfsmuster, wie die drei Fabrikmuster, Builder-Muster usw.

Was bedeutet das schließlich in verschiedenen Situationen?

Je nach Nutzungsgrad:

Das erste und wichtigste ist Ajax, das Prinzip von Ajax und die domänenübergreifende Methode von Ajax: jsonp, location.hash mit iframe, postMessageAPI, Websocket, Server-Agents und mehr.

Dann gibt es noch die Protokollheader, Statuscodes und andere Inhalte des TCP-Protokolls, UDT-Protokolls und http-Protokolls. Browser-Cache, Client-Speicherinhalte: Localstorage, Sessionstorage, IndexDB, Cookies usw.

Schließlich gibt es einige neue js-APIs, wie z. B. Dateilesen (fileReader), fetch, Promise, Web Sockets usw. Sie können zu caniuse gehen, um zu sehen, welche neuen Dinge es gibt.

Was ich oben gesagt habe, sind nur einige allgemeine Konzepte. Ich habe einige der Dinge aufgelistet, die wir in Front-End-HTML, CSS und JavaScript beherrschen müssen im Front-End-Bereich Dies erfordert, dass jeder es im Lern- und Arbeitsprozess selbst zusammenfasst.

Wenn Sie während des Lernprozesses auf Probleme stoßen oder Lernressourcen erhalten möchten, können Sie gerne der Lernaustauschgruppe beitreten

Das obige ist der detaillierte Inhalt vonMöchten Sie Web-Frontend gut erlernen? Was müssen Sie noch beherrschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!