Das umfassendste Ressourcen-Tutorial zu Github – alle am Front-End beteiligten Wissenssysteme

Front-End ist zweifellos die heißeste Technologie im Jahr 2016, ohne Ausnahme.

Verschiedene Front-End-MVC-Frameworks entstehen in endlosen, eckigen JS-, Vue- und React-Frameworks, und das Konzept der Front-End-Komponentenentwicklung ist tief in den Herzen der Menschen verwurzelt. Die Front-End-Gehälter sind bereits höher als die der mobilen Entwicklung.

Als persönlicher Webmaster ist es auch notwendig, Front-End-Design zu lernen. Erstens können Sie einige kleine Designprobleme selbst lösen und gleichzeitig Ihre eigene Ästhetik verbessern und das UI-Designniveau verbessern die Website.

Wesentliche Grundkenntnisse

Zusammenfassung der Front-End-Fähigkeiten In diesem Projekt werden
alle Wissensaspekte von Front-End-Ingenieuren detailliert erfasst. Nachdem Sie über grundlegende Fähigkeiten verfügen, können Sie die Lernrichtung finden
und Ihre Fähigkeiten und Kenntnisse verbessern.

frontend-dev-bookmarks ist eine von Ausländern zusammengefasste Front-End-Entwicklungsressource. Die Abdeckung ist sehr breit. Mit verschiedenen Wissenspunkten, Werkzeugen und Techniken ist es sehr umfassend.

Die folgenden grundlegenden Fähigkeiten sollten meiner Meinung nach auf der Einstiegsebene beherrscht werden:

• HTML4-, HTML5-Syntax, Tags, Semantik
• CSS2.1, CSS3-Spezifikation, kombiniert mit HTML, um verschiedene Layouts und Effekte zu erzielen
• Der durch Ecma-262 definierte Sprachkern von Javascript, natives Client-Javascript, DOM-Operationen, neue Funktionen von HTML5
• Jquery ist eine ausgereifte clientseitige Javascript-Bibliothek und wird empfohlen
• Eine serverseitige Sprache: Wenn Sie über Erfahrung in der serverseitigen Entwicklung verfügen, können Sie die Sprache verwenden, die Sie bereits kennen. Wenn Sie keine Erfahrung in der serverseitigen Entwicklung haben, können Sie Servlet wählen Wenn Sie damit nicht vertraut sind, können Sie PHP wählen, das einfache Anmelde- und Registrierungsfunktionen realisieren kann. Es reicht aus, die Front-End-Entwicklung zu unterstützen. Die grundlegendste Voraussetzung ist die Implementierung einfacher Funktionssimulationen ,
• HTTP

Nachdem Sie die oben genannten Grundkenntnisse beherrschen, können Sie schnell die Technologien erlernen, die Sie bei der Arbeit benötigen.

Grundlegende Entwicklungstools

Geeignete Tools können die Lerneffizienz effektiv verbessern, sich auf das Wissen selbst konzentrieren und Probleme schnell lokalisieren und
lösen. Die folgenden Front-End-Entwicklungstools sind meiner Meinung nach notwendig:

• Texteditor: Sublime Text wird empfohlen, unterstützt verschiedene Plug-Ins, Themen und Einstellungen und ist einfach zu verwenden
• Browser: Google Chrome wird empfohlen, er aktualisiert sich schnell und bietet sehr gute Unterstützung für verschiedene Frontend-Standards
• Debugging-Tools: Es wird empfohlen, die mit Chrome gelieferten Chrome-Entwicklungstools zu verwenden, mit denen Sie problemlos die DOM-Struktur und den DOM-Stil anzeigen, Debugging-Informationen über die Konsole ausgeben, Javascript debuggen und das Netzwerk anzeigen können. usw.
• Hilfswerkzeuge: PhotoShop zum Bearbeiten von Bildern, Auswählen von Farben, Messen von Größen mit Fireworks, Vergleichen von Größen mit AlloyDesigner und die oben genannten Chrome-Entwicklungstools,
• FQ Tools: Laterne, Gecko-Spaziergang

Lernmethoden und Lernziele

Methode:

1. Lesen Sie während der Einstiegsphase wiederholtChinesische Version klassischer Bücher, implementieren Sie jedes Beispiel im Buch und sehen Sie sich die Wirkung im Browser an
2. Sobald Sie über eine gewisse Grundlage verfügen, können Sie online nach verschiedenen Tutorials und Demos suchen, um mehr über die tatsächliche Verwendung verschiedener Funktionen und die Implementierung allgemeiner Funktionen zu erfahren
3. Lesen Sie die umfassenden und vollständigen Wissenspunkte zu HTML-, CSS- und Javascript-Standards
4. Lesen Sie die Blogs und Artikel von Front-End-Experten, um Ihr Wissensverständnis zu verbessern
5. Nutzen Sie Suchmaschinen sinnvoll

Ziel:

1. Merken Sie sich die wichtigen Konzepte in den vorherigen Wissenspunkten und gewinnen Sie Ihr eigenes Verständnis basierend auf Ihrer Lernerfahrung
2. Seien Sie mit den Implementierungsmethoden gängiger Funktionen vertraut, z. B. dem allgemeinen CSS-Layout, der Tab-Steuerung usw.

Erste Schritte

Im Folgenden finden Sie gute Bücher und Materialien für die Einführungsphase

1. Für HTML lesen Sie zuerst die Kapitel 1–9 von „HTML & CSS: Websites entwerfen und erstellen“ und dann die Kapitel 1–4 von „HTML5: Das fehlende Handbuch“.
2. CSS las zuerst „CSS: The Missing Manual“ und dann „CSS Definitive Guide“
3. Für Javascript lesen Sie zuerst „Javascript Advanced Programming“ und dann „Javascript Definitive Guide“
4. HTTPSiehe den endgültigen Leitfaden zu HTTP
5. Im gesamten Lernprozess müssen HTML, CSS und JavaScript an vielen Stellen miteinander kombiniert werden. Dies ist auch in der tatsächlichen Arbeit der Fall. Ein einfaches Funktionsmodul erfordert die Kombination der drei.
6. Praxis ist ein wichtiger Teil des Lernens. Bücher konzentrieren sich auf die Erläuterung von Wissenspunkten, und Beispiele reichen möglicherweise nicht aus. Daher müssen Sie Suchmaschinen verwenden, um einige einfache Tutorials zu finden und den Tutorials zu folgen, um Funktionen zu implementieren. Hier sind einige bessere Tutorial-URLs
   • Sie können nach schriftlichen Testinterviewfragen für Front-End-Campus-Rekrutierung von großen Unternehmen als Übungsfragen oder von anderen zusammengefassten Front-End-Interviewfragen und persönlich zusammengefassten Interviewfragen (mit Referenzantworten) suchen
   • http://code.tutsplus.com bietet verschiedene Tutorials
   • MDN bietet auch viele Tutorials und, was noch wichtiger ist, eine detaillierte Dokumentation. Wenn Sie eine bestimmte Funktion finden müssen, suchen Sie bei Google: xxx site:https://developer.mozilla.org
   • http://www.html5rocks.com/zh/ bietet auch viele hochwertige Tutorials
   • http://www.sitepoint.com/
   • http://alistapart.com/
7. Natives Javascript ist eine Fähigkeit, die beherrscht werden muss. Auf der Grundlage der Beherrschung von nativem Javascript wird empfohlen, über Kenntnisse in jQuery zu verfügen, was für die tatsächliche Arbeit sehr nützlich ist. Zu den Büchern in diesem Bereich gehören „Erlernen von jQuery“. zur offiziellen jQuery-Website
8. Erstellen Sie ein https://github.com/-Konto, um verschiedene Codes und Projekte zu speichern, die Sie normalerweise studieren.
9. Sobald Sie eine bestimmte Grundlage haben, können Sie einen persönlichen Blog einrichten, um die während des Lernprozesses aufgetretenen Probleme und Lösungen aufzuzeichnen, sodass Sie diese leicht überprüfen und auch anderen helfen können. Sie können auch zu http://www.cnblogs.com/ oder http://www.csdn.net/ gehen, um ein Konto zu registrieren, was bequem und praktisch ist
10. Verwenden Sie Google häufig, um nach englischsprachigen Informationen zu suchen. Wenn Sie Fragen haben, können Sie hier direkt suchen, indem Sie ein Konto registrieren Auch die Beantwortung von Fragen für andere kann eine große Hilfe sein, die persönlichen Fähigkeiten zu verbessern.
11. Nachdem Sie sich mit klassischen Büchern vertraut gemacht haben, können Sie den Link zum vorherigen Abschnitt über wesentliche Grundkenntnisse öffnen. Lesen Sie die entsprechenden Standards sorgfältig durch und beherrschen Sie das Wissen vollständig

Weiter verbessern

Nachdem die vorherige Grundlage geschaffen wurde, beginnt im Grunde das Frontend. Zu diesem Zeitpunkt hat möglicherweise jeder eine Lernrichtung im Sinn, wenn nicht.
Sie können sich auf die beiden im vorherigen Abschnitt über wesentliche Fähigkeiten erwähnten Projekte beziehen und einige davon für die Entwicklung und das Lernen auswählen. Hier sind einige schöne Aspekte:

• Grunt: Front-End-Automatisierungstool zur Verbesserung der Arbeitseffizienz
• weniger CSS: ausgezeichneter CSS-Präprozessor
• Bootstrap: Ausgezeichnetes CSS-Framework, sehr gut für Teams ohne Designer, perfekt in Kombination mit weniger
• Anforderungen: AMD-Standardmodullader, ein unverzichtbares Tool für den Front-End-Modularisierungstrend
• Node.js: JavaScript kann auch als Backend verwendet werden, und der Status von Front-End-Ingenieuren wird verbessert
• AngularJS: Ein gutes Tool für Single Page Application
• Mobile Web-Entwicklung: Mit der Beliebtheit von Smartphones holt der mobile Datenverkehr allmählich den PC-Datenverkehr ein
• Javascript-Speicherverwaltung: Sie müssen auf Speicherlecks achten, wenn Sie SPA über einen längeren Zeitraum ausführen
• Hochleistungs-JavaScript (Schnellere Webanwendungsschnittstellen erstellen)
• Best Practices zur Beschleunigung Ihrer Website: Wichtige Fähigkeiten

Einige persönliche Erfahrungen

LingyuCoders Lernerfahrung

Die Meister oben haben es so ziemlich zusammengefasst, also mache ich hier einfach ein bisschen Unsinn

####Werkzeuge

• Chrome-Entwicklungstools: Ein leistungsstarkes Tool für die Front-End-Entwicklung und das Debuggen, das sich auf mehrere Funktionen konzentriert:
  • Konsole (Unsinn)
  • Elemente: Anpassung des Elementstils, sehr häufig verwendet
  • Quellen: Fügen Sie Haltepunkte im Code hinzu, führen Sie das Debuggen in einem Schritt durch und zeigen Sie Objekte im Speicher während des Debuggens in einem Schritt an.
    • Ausdruck beobachten: Sehen Sie sich den Wert im aktuellen Speicher durch Ausdruck an
    • Aufrufstapel: Sehen Sie sich den Aufrufstapel an, aktivieren Sie Async, und Sie können den asynchronen Aufrufstapel sehen (dies ist sehr nützlich, insbesondere beim Debuggen von Ajax)
    • Bereichsvariablen: Variablen in der Bereichskette, sehr nützlich
  • Netzwerk: Erfassen Sie Pakete, um jede Anfrage anzuzeigen, sehr wichtig, notwendig für das gemeinsame Debuggen von Front-End und Back-End
  • Zeitleiste: Analysieren Sie Rendering, JS-Ausführung und andere Phasen, ein leistungsstarkes Tool zur Leistungsoptimierung
  • Emulation: Simulieren Sie eine mobile Umgebung, wichtig für die Entwicklung mobiler Seiten
  • Einige Plugins:
    • Liveload: Automatische Aktualisierung nach Änderung der Seite, kein Drücken von F5 erforderlich
    • Abmessungen: ein leistungsstarkes Tool zum Messen direkt auf der Seite
    • Livestyle: Der CSS-Stil wird nach der Änderung automatisch wirksam, eine Aktualisierung ist nicht erforderlich, und Elemente können nach der Änderung auch mit dem Code synchronisiert werden
    • Bildtool: Messung, Farbauswahl
    • UC-QR-Code: Unverzichtbar zum Debuggen und Scannen auf mobilen Endgeräten
    • pagespeed, YSlow: Plug-in zur Analyse und Optimierung der Seitenleistung
    • Mark Feixiang: Hervorragender Online-Markdown-Editor, schnell wöchentliche Berichte schreiben und Notizen machen
• sublime text2: bequeme Codierung, viele Plug-Ins, hohe Geschwindigkeit und gute Leistung
  • emmet: Unverzichtbar zur Verbesserung der HTML-Kodierungsgeschwindigkeit
  • Sublimelinter Lint und Hinweis in verschiedenen Sprachen: Codekorrektur
  • Einige Ausschnitte: Automatische Vervollständigung zur Verbesserung der Entwicklungseffizienz
• Intellij IDEA und WebStorm: Integrierte Entwicklungsumgebung, die verschiedene Funktionen integriert, die Entwicklung ist bequemer als großartig, kostet aber mehr Leistung
• Mark Men: Ein leistungsstarkes Tool zum Messen, Farbwählen und Markieren, die erste Software, die nach Erhalt des visuellen Entwurfs geöffnet wird
• GFW Fucker: Ich benutze Hongxing, wenn möglich, kaufe einen virtuellen Server, den ich als Leiter verwenden kann
• iHosts: Sehr ausgezeichnete Hosts-Verwaltungssoftware, einfach zu ändernde Hosts, unerlässlich für Entwicklung und Debugging
• Charles: Das beste Tool zur Paketerfassung und -analyse auf der Mac-Plattform
• Rythem: Die von AlloyTeam hergestellte Proxy-Paketerfassungssoftware ist sehr leicht, einfach zu installieren und einfach für die Entwicklung und das Debuggen mobiler Endgeräte (realer Maschinen) zu verwenden
• Wunderlist: Eine sehr gute Todo-Liste, die sehr praktisch ist, wenn es viele Aufgaben und Bedürfnisse gibt

####FÄHIGKEITEN
Tatsächlich gibt es neben JavaScript (einschließlich NodeJS), HTML und CSS viele Frontend-Fähigkeiten. Tatsächlich ist der Front-End-Skill-Tree sehr umfangreich. Ich kann nur einige auflisten, die ich während der Entwicklung gesehen habe.
#####Sprachgrundlagen
JavaScript:

• Bereichskette, Abschluss, Laufzeitkontext, dies
• Prototypenkette, Vererbung
• NodeJS-Grundlagen und allgemeine APIs

CSS:

• Selektor
• Browserkompatibilität und häufige Hacks
• CSS-Layoutmethoden und -prinzipien (Boxmodell, BFC, IFC usw.)
• CSS 3, wie Animation, Farbverlauf usw.

HTML:

• Semantische Tags

#####Erweitert
JavaScript:

• Asynchrone Steuerung (Promise, ES6-Generator, Async)
• Modulare Entwicklungsmethode (AMD, CMD, KMD usw.)
• Einige verwandte Kenntnisse über den JavaScript-Interpreter
  • Asynchrone IO-Implementierung
  • Müllabfuhr
  • Ereigniswarteschlange
• Häufig verwendete Frameworks und ihre Prinzipien
  • jQuery: Ein selektorbasiertes Framework, aber ich persönlich denke, dass es nicht als Toolbibliothek bezeichnet werden kann, da es keinen Modullademechanismus hat. Der Quellcode ist sehr gut zum Lesen und Studieren geeignet 🎜>
  MVVM-Frameworks wie AngularJS/Avalon: Fokus auf das Verständnis des Konzepts des MVVM-Musters selbst und der Implementierung der bidirektionalen Bindung sowie deren Entkopplung
  Unterstreichung: Hervorragende Tool-Bibliothek, leicht verständliche Implementierung häufig verwendeter Tool-Code-Snippets
  Polymer/React: Komponentenentwicklung, Blick in die Zukunft, Verständnis der Prinzipien der Komponentenentwicklung

DOM-Baum, CSSOM-Baum, Rendering-Baum-Konstruktionsprozess und Seiten-Rendering-Prozess
Blockierung beim Parsen von HTML, CSS und JavaScript
HTML5-bezogen
• SVG- und Vektorgrafikprinzipien
  Canvas-Entwicklungs- und Animationsprinzipien (Frame-Animation)
  Video und Audio
Flex-Box-Layout-Methode
Verwendung von Symbolschriftarten

Koa
Express
Unterstrich
asynchron
schlucken
grunzen
verbinden
Anfrage

Responsives Web
Anmutiger Abbau, fortschreitende Verbesserung
don
• t make me think

Benutzerfreundlichkeit, Zugänglichkeit und Bedeutung der Webseite
SEO-Suchmaschinenoptimierung, verstehen Sie die Prinzipien von Suchmaschinen
Vorteile und Probleme von SPA

• Reduzieren Sie die Anzahl der Anfragen (Sprite, Combo)
• Machen Sie den Cache gut aus (Anwendungscache, HTTP-Cache, CDN, lokaler Speicher, Sitzungsspeicher, Memomodus)
• Reduzieren Sie den Selektorverbrauch (von rechts nach links), reduzieren Sie DOM-Operationen (Trennung von DOM und JavaScript-Interpreter)
• CSS-Reflow und Neuzeichnen

#####Projekt

• Versionsverwaltung: Git wird zuerst empfohlen. Wenn Sie Git verwendet haben, werden Sie SVN nie wieder verwenden wollen.
  • Git: Mechanismus zur lokalen Versionsverwaltung
  • SVN: Remote-Center-Versionsverwaltungsmechanismus
• Automatisierte Konstruktion: hauptsächlich Vorverarbeitung von weniger, Vorlagen, Kaffee usw. sowie Codekomprimierung und -zusammenführung
  • Gulp: auf Flows basierend aufgebaut, schnell und mit guter Modulqualität
  • Grunzen: Unabhängige Aufgabenkonstruktion, langsame Geschwindigkeit, schmerzhafte Konfiguration, hohe Flexibilität
• Vorverarbeitungs- und Vorlagen-Engine
  • weniger: einfache Syntax, aber eingeschränkte Funktionalität
  • Jade, EJS, Velocity und andere Template-Engines, jede hat ihre eigenen Stärken
  • Kaffee: Der Favorit der Python-Ingenieure, ich habe ihn noch nie benutzt
• Umgebungsaufbau: Hauptsächlich Zuordnung des Online-Codes zum lokalen und Starten eines Demo-Servers vor Ort. Was das Verspotten simulierter Daten betrifft, haben verschiedene Personen unterschiedliche Meinungen.
  • Lokaler Proxy: ihosts
• Automatisierte Tests: Wenn das Unternehmen relativ stabil ist, können automatisierte Tests verwendet werden, um Testvorfälle zu reduzieren. Wenn jedoch die Nachfrage hoch ist, sind die Kosten für die Wartung von Testfällen hoch und automatisierte Tests können den gegenteiligen Effekt haben.
  • Jasmin
  • Mokka
• Ökosystem
  • npm
  • Laube
  • spm
• Erstellen Sie einen eigenen Blog
  • Git-Seiten
  • hexo
  • jekyll

#####Zukunft

• Web Components: ein zukunftsorientierter Komponentenentwicklungsansatz
  • HTML-Vorlage
  • Shadow DOM
  • Benutzerdefinierte Elemente
  • HTML-Import
• Native Entwicklung mobiler Endgeräte: Dies ist auch etwas, das Sie verstehen müssen. In Zukunft werden sich Front-End-Ingenieure häufig mit Webview befassen, und sie müssen auch die native Entwicklung verstehen

#####Sonstiges
Manche Dinge lassen sich nicht durch einfaches Eintippen des Codes lösen. Als ich am Praktikum teilgenommen habe, habe ich das Gefühl, dass dies nicht der Fall ist

• Über das Geschäft nachdenken: Persönlich fehlt mir dieser Aspekt sehr, deshalb setze ich ihn ganz oben und denke mehr über das Geschäft nach, bevor ich schreibe
• Kommunikation und Kommunikationsfähigkeiten: Das Front-End muss sich gleichzeitig mit dem Projektmanager, dem Produkt, der Interaktion und dem Backend befassen. Eine schlechte Kommunikation führt zu viel Aufwand und verzögert das Projekt
• Wissensmanagement, Zeitmanagement: Gleichgewicht zwischen Input und Output, Output ist der beste Input. Wie man gut teilt, sich an der Community beteiligt, gut kommuniziert und gute Aufzeichnungen führt
• Lust auf neue Technologien und Mut zum Ausprobieren

####Einführungsbuch
Sie können mit dem Lesen von Büchern beginnen, aber beim Lesen von Büchern müssen Sie auch weiterhin auf neue Entwicklungen in der Technologie achten. Hier sind ein paar Bücher, die ich gut finde:

• „Advanced JavaScript Programming“: Es kann als Einführungsbuch verwendet werden, es ist aber auch ein Buch für Fortgeschrittene. Sie können die Grundlagen schnell erlernen und es erneut lesen, wenn Sie Fortschritte machen
• „The Definitive Guide to JavaScript“: Nicht für den Einstieg geeignet, aber notwendig. Wenn Sie etwas nicht verstehen, schauen Sie es sich einfach an, es ist sehr hilfreich.
• Wartbares JavaScript schreiben und:
• „Node.js Development Guide“: Ein gutes Einführungsbuch zu Nodejs
• „Einführung in Node.js in einfacher Sprache“: Buch für Fortgeschrittene in Nodejs, ein Muss
• „JavaScript Asynchronous Programming“: Verstehen Sie das Konzept der asynchronen JS-Programmierung
• „JavaScript Pattern“ und „JavaScript Design Pattern“: JavaScript-Codemuster und Designmuster, Entwicklungsdenken in JavaScript umwandeln, sehr gutes Buch
• „JavaScript Framework Design“: Während Sie das Rad verwenden, sollten Sie wissen, wie sich das Rad dreht. Es erklärt die Implementierung jedes Teils des Frameworks auf der Ebene des Quellcodes Lesen Sie es mit einem vorhandenen Framework

• Das bringt mich nicht zum Nachdenken》: Das Konzept des Webdesigns und das Verständnis des Benutzerverhaltens sind sehr gut《Don
„CSS Zen Garden“: ein bleibendes Werk, das auch die Konzepte des Webdesigns und Themen vermittelt, auf die beim Design geachtet werden muss
„Hochleistungs-JavaScript“ und „Hochleistungs-HTML5“: Bücher mit Schwerpunkt auf Leistung, bei denen es sich nicht nur um Leistungsoptimierung handelt, sondern auch um viele grundlegende Dinge, die es wert sind, gelernt zu werden
„HTML5 Canvas Core Technology“: Ein Buch, das ich gerade lese, ist sehr hilfreich für die Verwendung von Canvas, die Implementierung von Animationen und die Entwicklung eines Animations-Frameworks
„HTTP Authoritative Guide“: Grundlegende Kenntnisse im Zusammenhang mit dem HTTP-Protokoll, das häufig bei der Front-End-Entwicklung und beim Debuggen eine Rolle spielt
„Responsive Web Design“: Die Technologie an sich ist nicht schwierig, wichtig ist das Designkonzept responsiver Webseiten und der Mobile-First-Gedanke
"The Essence of JavaScript Language": Ein erfahrenes Buch, es ist auch ein gutes Buch zur Popularisierung des JavaScript-Entwicklungsdenkens, sehr gut für den Einstieg geeignet

• Github: Es gibt nicht viel zu sagen, lesen Sie mehr Quellcode anderer Leute, laden Sie mehr von Ihrem eigenen Quellcode hoch und lernen Sie von Experten aus der ganzen Welt
• codepen: Ein Muss, um die Schönheit des Frontends zu erleben, es gibt viele coole Effekte und hervorragende Plug-Ins
• echojs: Eine Website, um schnell neue JS-Informationen kennenzulernen
• Stackoverflow und Segmentfault: Grundsätzlich können dort alle möglichen Fragen beantwortet werden
• Google Web-Grundlagen: Jeder Artikel ist zum sorgfältigen Lesen geeignet
• Statische Dateien: CDN öffnen, einfach zu verwenden
• iconfont: Alibabas Vektor-Icon-Bibliothek, sehr gut, unterstützt CDN und unterstützt Projekte
• HTML5 rockt: Eine gute Website, auf der Sie Artikel zu vielen neuen Browserfunktionen und modernsten Technologien finden
• CSS-Tricks: Wie Sie CSS optimal nutzen und die neuen Funktionen von CSS kennenlernen, hier können Sie zufrieden sein
• JavaScript Secret Garden Ein Muss für JavaScript-Anfänger, sehr gut
• w3cplus: Eine Website für Front-End-Lernen, die Qualität der darin enthaltenen Artikel ist recht gut
• node school: eine gute Node-Lernwebsite
• Learn Git Branch: eine Git-Lernwebsite mit toller Interaktion
• Front-End Stew: Eine Community zum Teilen von Front-End-Artikeln mit vielen hervorragenden Artikeln
• Reguläre Ausdrücke: Ein sehenswertes Einführungs-Tutorial zu regulären Ausdrücken
• Ruan Yifengs Blog und Zhang Xinxus Blog: Abkürzungen, um bestimmtes Wissen schnell zu verstehen, aber wenn Sie tiefer graben müssen, benötigen Sie andere Ressourcen
• Blogs von verschiedenen Experten: Es gibt zu viele, daher werde ich keine vollständige Liste veröffentlichen.
• Offizielle Websites mit verschiedenen Vorschriften, falls Sie nicht wissen, wie man die Vorschriften liest

####Prozess
Ich habe früher Java SSH gemacht und bin mittendrin Front-End-Entwickler geworden, sodass meine Fähigkeiten relativ schwach waren und ich auf mehr Probleme stieß. Grundsätzlich können Sie damit beginnen, Bücher und Tutorials zur W3C School sowie einige Front-End-Blogs wie den Blog von Uncle Tom zu lesen. In der Vergangenheit habe ich nur jQuery verwendet und nicht viel in nativem js gelernt. Später habe ich nach und nach viele Tierbücher gelesen, wie zum Beispiel die Essenz der Sprache von erfahrenen Leuten. Ich habe aus diesen Büchern viel Wissen auf Sprachniveau gelernt. Aber das reicht offensichtlich nicht aus, deshalb gehe ich oft in die Community, um zu sehen, worüber alle reden, und schaue mir dann die relevanten Informationen an. Wenn ich interessiert bin, suche ich nach weiteren Informationen oder schreibe eine Demo. Dies ist die wichtigste Möglichkeit, CSS zu lernen. Später begann ich, den Blogs verschiedener Experten und einigen relativ ausführlichen Büchern sowie einigen neuen Kenntnissen und Frameworks mehr Aufmerksamkeit zu schenken, und übte weiterhin die Übermittlung von Codes an Github, wodurch ich auch viel Wissen lernte. Während des Praktikums war ich persönlich an der tatsächlichen Projektentwicklung beteiligt und lernte viele Konzepte und Denkweisen kennen, die ich in der Schule nicht lernen konnte, was ebenfalls eine große Hilfe war. Kein Reden mehr, ich werde Steine ​​bewegen und nach Angeboten fragen...

MrRaindrops Lernerfahrung

Auf Einladung von Qiu God möchte ich meine Front-End-Lernerfahrung hier nicht zusammenfassen. Die Zusammenfassung der Master ist bereits vorhanden Einige Links, die ich persönlich für nützlich halte, recherchieren einfach und teilen dann hauptsächlich die Probleme, auf die ich während des Front-End-Lernprozesses gestoßen bin, und die gewonnenen Erkenntnisse, wenn es FE-Anfängern helfen kann, damit anzufangen. Ich gehe davon aus, dass dies die Zielgruppe dieses Artikels ist. Am besten wäre es, wenn sie weniger Umwege machen und bei jedem Schritt wissen, in welche Richtung sie weitergehen. Eine Zusammenfassung und Weitergabe der Meister finden Sie unter FE-Learning, organisiert von Qiu God.

Lassen Sie mich zunächst sagen, dass jeder seine eigene Art haben kann, das Frontend zu lernen. Dieser Artikel dient nur als Referenz. Er ist etwas chaotisch, Sie können ihn also einfach lesen.

Herkunft

Ich bin durch Zufall in die Richtung gekommen, Spiele zu machen. Ich habe Spiele-Websites erstellt, mit kommerziellen Engines wie Unity und Unreal gespielt und an mehreren Spielprototypen herumgebastelt . , aber sobald ich als Forscher ins Labor kam, wurde ich direkt von meinem Tutor zum Schreiben einer Datenanzeigeseite auf Basis der Baidu Map API geschickt Großzügig, aber vorher habe ich nicht viel JS geschrieben und weiß nicht, wie man die Karten-API verwendet. Deshalb habe ich den „Javascript Authoritative Guide“ (Rhinoceros Book) gelesen und dabei auf den „Code“ verwiesen, den die Vorgänger von hinterlassen haben das Labor und schrieb schließlich alle Funktionen aus. Diese Seite gilt als meine Einführung in js und ist auch der Beginn meiner Front-End-Lernroute.

Wenn ich jetzt darüber nachdenke, muss ich mich, obwohl mir die Arbeit im Frontend zugeteilt wurde, immer noch auf das Interesse verlassen, damit ich es weiterhin gut machen kann. Natürlich ist Frontend ein interessantes technisches Gebiet, und Die Community ist jeden Tag sehr „beschäftigt“.

Projekt, nächstes Projekt

Ich persönlich denke, dass man sich in der Anfangsphase des Front-End-Lernens völlig von Büchern lösen und projektorientiert sein kann. Obwohl ich persönlich angefangen habe, aus dem Rhinoceros-Buch zu lesen, sollten Sie nicht wie ich sein, wenn Sie nicht genug Zeit haben oder das Lesen großer Bücher langweilig finden. Wenn Sie sich entscheiden, ein Buch zu lesen, ist es natürlich am besten, alle Beispiele im Buch zu befolgen. Ich hatte vor meinem Studium noch nie Kontakt zu js. Im April, bevor die Schule begann, erzählte mir mein Tutor direkt vom Baidu Map API-Projekt, und dann kamen verschiedene ERP- und Kartendatenanzeigen, obwohl es auf unterschiedliche Weise anders war , es war nicht dasselbe, aber es ist im Grunde alles Frontend-Arbeit. Ich habe auch SSH- und Android-Entwicklung gemacht. Können Sie glauben, dass ich der einzige bin, der das Frontend im gesamten Labor schreibt? Das Backend im Zeitalter von Rich Client SPA ist eine erholsame Schnittstelle, und die Menge an Code befindet sich im Wesentlichen im Frontend. Wie kann ich es so gut schreiben? Während dieser Zeit folgte ich dem Mentor, um Unternehmertum zu erleben, und ich Da wir jeden Tag von 19.00 bis 22.00 Uhr daran arbeiten, kann man von einer Phase schnellen Wachstums ausgehen.

Um eine Technologie zu beherrschen, müssen Sie zunächst ihren allgemeinen Rahmen beherrschen, sich eine Idee ausdenken, die umgesetzt werden kann, eine lauffähige Demo erstellen und dann deren Details verbessern. Wenn die Demo abgeschlossen ist, werden Sie ein Wahrnehmungsverständnis davon haben Wenn Sie es verstehen und das Buch noch einmal lesen, werden Sie viel mehr gewinnen. Ich fing an, von nativem js zu jquery, dann zu extjs und dann zu Angularjs zu schreiben. Von der vom Lehrer festgelegten Technologie bis hin zu meiner eigenen Technologieauswahl übte ich ein Projekt nach dem anderen, genau wie das Bekämpfen von Monstern und das Aktualisieren. Wenn Sie kein Projekt haben, macht es natürlich Spaß und ist erfüllend, ein eigenes Projekt zu erstellen und Ihre eigenen Ideen zu verwirklichen.

Sucht sammeln und Wissensmanagement

Front-End-Lernen hat die Eigenschaft, dass viele Dinge fragmentiert und verstreut sind und Sie sie selbst organisieren, zusammenfassen und zusammenfassen müssen. Vielen großen Meistern auf Weibo und Zhihu zu folgen dient nicht nur dazu, Klatsch und Tratsch anzuhören. Manchmal hinterlassen die Worte der großen Meister einen endlosen Nachgeschmack. Es ist sehr wahrscheinlich, dass ein Wort, das versehentlich erwähnt wird, zu Ihrem nächsten Lernziel wird. Sammeln Sie diese Informationen, nutzen Sie Google sinnvoll, stellen Sie Fragen und denken Sie nach. Genau wie die Sammlungselemente im Spiel ist auch Front-End-Lernen ein „Spiel“ voller Sammlungselemente, aber Sie benötigen ein Wissensmanagement-Tool, das als Inventar und Lager fungiert. Alle Experten, die ich kenne, sind Wissensmanagement Starker Benutzer von Werkzeugen. Ich habe zuvor oneNote verwendet, das zu diesem Zeitpunkt nicht an den Cloud-Speicher gebunden war. Jetzt verwende ich grundsätzlich Evernote und meine Notizen haben sich auf 1.200 angesammelt. Ich habe immer geplant, Delicious für Lesezeichen zu verwenden, da es auf Tag-Management basiert, aber es wurde noch nie verwendet. Natürlich stehen diese Tools nicht im Vordergrund, aber praktische Tools können Ihre Lerneffizienz verbessern. Das Wichtigste ist natürlich, jederzeit eine starke Lernlust aufrechtzuerhalten Ihr Ziel ist es, alles über das Frontend zu verstehen (natürlich nicht alles, denn schließlich ist Ihre Energie begrenzt, und realistisch gesehen ist dies unwahrscheinlich.

Folge Gott

Das scheint nicht sehr kontrollierbar zu sein ... Ich werde nicht näher auf den Chef eingehen. Es hängt bis zu einem gewissen Grad vom Glück ab. Allerdings ist es wichtig, mehr mit den Experten um Sie herum zu kommunizieren. Dieser Experte muss nicht sehr hochkarätig sein, aber er muss eine Leidenschaft für Technologie haben. Als ich im ersten Jahr der Graduiertenschule war, war ich sehr begeistert, als ich jeden Tag um 7 Uhr die Labortür betrat, und dann stellte ich fest, dass da ein Typ war, der früher als ich ankam. Später fand ich heraus, dass dieser Typ morgens ging und nachmittags zurückkam, und der Lehrer war daran gewöhnt. Es stellte sich heraus, dass dieser Typ die ganze Nacht wach blieb, um Code zu schreiben, und dann am Morgen wieder einschlief. Später besprach ich oft Probleme mit diesem Gott und jedes Mal hatte ich das Gefühl, dass meine Erfahrungspunkte stetig stiegen. Dann gibt es noch einen anderen Gott im Labor, den der All-Night-Gott vor ihm als „nur ein entfernter Zweiter, immer hinterherjagend, nie einholend“ beschrieb. Die Eigenschaften der beiden Götter sind, dass sie ein wenig wissen über alles, damit sie alles mit Ihnen besprechen können. Ich habe einen Leseplan für eine Weile erstellt, von C/C über VC/MFC bis hin zu Unix-Netzwerkprogrammierung. Am Ende habe ich Java Core Technology und den C#-Programmierleitfaden gesehen auf MSDN, und ich konnte sehr gut mit den Göttern reden.

Kurz gesagt, diese beiden Götter haben mich in eine Grube gezogen oder sind von einer Grube zur anderen gesprungen. Obwohl sich keiner der beiden Götter mit Front-End beschäftigt, gibt es immer Ähnlichkeiten zwischen den Technologien.

Lesen

Lesen Sie, lesen Sie mehr, lesen Sie gute Bücher. Ich habe in Liu Weipengs Blog eine Formel gesehen: Ihr erstes Monatsgehalt entspricht der Summe der Preise der Fachbücher, die Sie zuvor gekauft (gelesen) haben (Die hier genannten Fachbücher beziehen sich auf die klassischen und anerkannten gute Bücher Buch). Es scheint sinnlos, die Richtigkeit dieser Formel zu diskutieren, aber ihre Rationalität steht außer Zweifel, das heißt, lesen Sie mehr klassische Fachbücher. Das extremste Beispiel: Xu You von Google sagte an meiner Universität, er habe das gesamte TP312-Bücherregal in der Bibliothek gekehrt ... Für Front-End-Klassiker gibt es eine Liste der Front-End-Bücher, die ich gesammelt habe (falls welche fehlen). (Front-End-Klassiker, das ist in Ordnung) Bücher, hinterlassen Sie bitte eine Nachricht und lassen Sie es mich wissen. Wenn möglich, können Sie versuchen, diese Bücher in Vollzeit zu lesen. Wie bereits erwähnt, sind Front-End-Wissenspunkte lose, sammeln verstreute Wissenspunkte, lernen schnell aus Blogs usw. Dies ist nur ein Aspekt des Front-End-Lernens. Wenn Sie ein Wissenssystem tiefgreifend verstehen möchten, müssen Sie seine Besonderheiten verstehen Um ein systematisches Verständnis dafür zu entwickeln, ist das Lesen klassischer Bücher immer noch unerlässlich.

Ich habe das Rhinoceros-Buch von Anfang an zu Ende gelesen und dann einige andere klassische technische Bücher gelesen, die wenig mit dem Front-End zu tun hatten. Später wurde ich durch Laborprojekte und einige kleine Projekte, die ich durchführte, allmählich dazu Ich bin mit dem Front-End-Bereich vertrauter und habe „Javascript-Modus“, „Javascript-Entwurfsmuster“ und „Wartbares Javascript schreiben“ gelesen. Später habe ich etwas über Node gelernt und angefangen, damit einige Gadgets zu erstellen up and run“ und „Mongodb“. „The Authoritative Guide“, aber ich habe das Gefühl, dass ersteres eine Art Falle ist. Zu diesem Zeitpunkt war Pu Lings Buch „Ausführliche und einfache Erklärungen“ noch nicht erschienen. Als es herauskam, ging ich in die Bibliothek, um es auszuleihen und zu lesen Ich hatte das Gefühl, zu wenig gelesen zu haben und muss trotzdem mit Brush fortfahren (siehe Buchliste oben).

Positionierung des Frontends

Die Positionierung des Frontends hängt davon ab, welche Art von Wissen und Fähigkeiten Sie erwerben müssen, und bestimmt, worauf Sie in der technischen Welt besonders sensibel sein müssen. Wenn Sie der Meinung sind, dass es beim Frontend nur darum geht, Seiten zu schneiden und Interaktion und visuelle Anforderungen zu realisieren, dann befindet sich Ihr Verständnis des Frontends noch im Anfangsstadium. Während des Abschlussinterviews mit Alibaba habe ich dem Prüfer folgende Frage gestellt: Die Front-End-Technologie verändert sich mit jedem Tag, der Anwendungsbereich wird immer größer und die Standards werden immer umfangreicher. Es scheint, dass jeder Tentakel weit reichen kann . Wie gibt man der Frontpartie eine passende Position? Der Prüfer hat es für mich lange analysiert und es dann in einem Satz zusammengefasst: Es ist die Verbindung zwischen Benutzern und der Website, der Schöpfer der Benutzererfahrung (das ist nicht das ursprüngliche Wort, aber das ist die allgemeine Bedeutung). Mit anderen Worten, das ultimative Ziel des Frontends besteht tatsächlich darin, eine Benutzererfahrung zu schaffen und die Benutzererfahrung zu verbessern, wobei die Benutzererfahrung im Mittelpunkt steht . Unabhängig davon, ob Sie mit dem Interaktionsdesign, der Leistungsoptimierung oder der Verbesserung des Workflows zur Verbesserung der Workflow-Effizienz beginnen, geht es letztendlich um die Schaffung und Verbesserung des Benutzererlebnisses, und dies muss sich letztendlich im Benutzererlebnis widerspiegeln. Ich denke, diese Zusammenfassung ist sehr vernünftig (natürlich ist der Begriff „Benutzererfahrung“ zu weit gefasst und betrifft nicht nur die Kategorie der Front-End-Ingenieure. Beispielsweise verbessert die Optimierung eines Datenverarbeitungsprozesses bei der Entwicklung des Backends die Gesamtleistung , was auch für die Benutzer eine Verbesserung des Benutzererlebnisses darstellt.

Die heutigen Front-End-Ingenieure werden unweigerlich mit viel tiefergehenden Problemen in Kontakt kommen als mit dem Schneiden von Seiten, der Implementierung visueller Anforderungen und der Implementierung von Interaktionen in einer bestimmten Phase, wie z. B. Front-End-Automatisierung, Bildprogrammierung, Leistungsoptimierung usw ., und etwas weiter zurückschieben Es handelt sich um PHP/JSP/ASP/nodeJs. In der Vergangenheit gehörten Back-End-Vorlagen im Allgemeinen zur Back-End-Kategorie. Jetzt, mit der Entwicklung der Front-End-Architektur, werden Sie möglicherweise dazu aufgefordert Schreiben Sie Back-End-Vorlagencode, der die Verwendung von Back-End-Sprachen (PHP/Java/C# usw.) erfordert. Dies ist das sogenannte große Front-End (dies ist jedoch der Fall). Nicht im Widerspruch zur Positionierung des Frontends. Das große Frontend befasst sich immer noch mit den Teilen, die mit Benutzern in Kontakt kommen, und optimiert dennoch das Benutzererlebnis. Die vielleicht am weitesten verbreitete oder diskutierte Technologie ist Node. Tatsächlich kann jede dieser drei BAT-Unternehmen ausgewählt werden. Baidu verwendet mehr PHP und Alibaba verwendet mehr Node.

Onkel Yu erwähnte in seinem Blog, dass das sogenannte Full-End horizontal und der Full-Stack vertikal ist. Vollständiges Ende Das heißt, alle Terminals sind Front-Ends, da sie alle mit der Benutzererfahrung zusammenhängen und in direktem Kontakt mit den Benutzern stehen. Um sich an die Multi-Terminal-Entwicklung anzupassen, müssen Sie Ihr Wissen über die Android-Entwicklung und die iOS-Entwicklung auf der Grundlage von Web-Front-Ends erweitern. Aufgrund der Beliebtheit hybrider Entwicklungsmethoden sind die Fähigkeiten für die Verwendung der nativen Sprachentwicklung glücklicherweise nicht vorhanden -Tiefe. .

Full Stack gilt als der am besten geeignete Entwicklungstyp für Start-up-Unternehmen. Im Großen und Ganzen wird davon ausgegangen, dass er von der Entwicklung bis zum Betrieb und der Wartung reicht . Die meisten Leute werden sich wahrscheinlich nicht in diese Richtung entwickeln wollen. Wenn Sie in diesem Sinne ein Full-Stack-Entwickler werden möchten, müssen Sie meinen Artikel möglicherweise nicht lesen Full-Stack im engeren Sinne bezieht sich speziell auf die Verwendung der js-Sprache zum Schreiben vom Front-End bis zum Back-End, das auf NodeJs basiert. Das Front-End und das Back-End verfügen über eine einheitliche Sprache und ein einheitliches Programmiermodell und teilen sogar dasselbe Satz Code. Um mehr über die Full-Stack-Entwicklung zu erfahren, können Sie Yu Bos Artikel über Full-Stack-Ingenieure lesen.

Das Obige ist mein oberflächliches Verständnis des Front-Ends und der daraus abgeleiteten technischen Routen. Es ist sehr wichtig, ein Gebiet kennenzulernen und seine allgemeine Richtung und Trends zu verstehen. Wenn Sie außerdem ein umfassendes Verständnis der Front-End-Lernrichtung und des Karrierewachstumspfads erhalten möchten, wird empfohlen, diesen von Ba Chi zusammengefassten Front-End-Entwicklungsvortrag zu lesen.

Endlich

Stellen Sie ein paar hilfreiche Links für Front-End-Lernen und Interviews bereit:

• Front-End-Entwickler-Interview-Fragensammlung
• Zusammenfassung der Front-End-Fähigkeiten (JacksonTian)
• Eine weitere Übersichtstabelle für Front-End-Fähigkeiten
• Dinge zum Frontend (Buchliste)

Vorschläge von yiyizym im Byr-Forum

Im Vergleich zum Grunzen ist das Erlernen des Schluckens einfacher

Für SPA empfehlen wir backbone.js und backbone.marionette.js

FQ Machen Sie sich keine Sorgen, geben Sie einfach zehn Yuan aus, um rote Aprikosen im Wert von einem Monat zu kaufen.

Es ist kein Problem, diese Dinge zu lernen, nachdem man eine solide Grundlage gelegt hat.

HTML Es gibt nicht viel zu sagen, ich werde HTML5 lernen, wenn ich Zeit habe.

Css Versuchen Sie, die Dokumentation so oft wie möglich zu lesen, da viele chinesische Materialien unterschiedliche Meinungen haben und zu viel Lesen Sie verwirrt.

Es gibt eine Website, auf der Sie den Unterstützungsstatus von HTML/CSS-Tags und -Attributen in verschiedenen Browsern überprüfen können, was sehr nützlich ist.

Javascript Schauen Sie sich einfach JavaScript Advanced Programming an. Aber nachdem man so ein dickes Buch gelesen hat, wird man es vergessen. Hier ist ein guter Artikel zur Erläuterung der Kernkonzepte von JavaScript: Objekt/Prototypkette/Konstruktor/Ausführungskontext/Bereichskette/Abschluss/dies.

Wenn Sie Zeit haben, können Sie sich Ecmascript 6 ansehen, das voraussichtlich im Juni nächsten Jahres veröffentlicht wird. Auf der Website von Ruan Yifeng finden Sie einführende Informationen.

jquery verfügt über viele APIs, die leicht auf dieser Website zu finden sind. Nehmen Sie sich Zeit, um die Verwendung von JQuery Deferred herauszufinden.

Installieren Sie weitere Plug-Ins für Sublimetext, z. B. zur Überprüfung auf Codefehler, zum Erstellen neuer Verzeichnisdateien und zum Organisieren von Code.

Umfassende Kategorie

Einstiegsklasse

Werkzeuge