前端工程師學(xué)習(xí)路線(xiàn)

一、入門(mén)前端三劍客

1、HTML

html 學(xué)起來(lái)還是挺簡(jiǎn)單的，無(wú)論你是否有編程基礎(chǔ)，我覺(jué)得都可以快速入門(mén)，對(duì)于新手，我推薦找個(gè)入門(mén)的視頻看一下，然后跟著視頻打代碼就可以了，入門(mén)教程隨便在網(wǎng)上找個(gè)免費(fèi)的視頻就可以了，隨便搜索「html入門(mén)」即可，或者看菜鳥(niǎo)教程的一個(gè)入門(mén)教程也行。

看完視頻，也可以看一下文字版的教程，不知道大家有沒(méi)有看過(guò)阮一峰寫(xiě)過(guò)的教程，我覺(jué)得他寫(xiě)的教程都很棒，所以這里我也推薦下大家看一下阮一峰寫(xiě)的這份 HTML 入門(mén)教程，可以讓你理解的更加透徹：HTML 教程

大家切勿眼高手低，一定要跟著視頻或者書(shū)籍上的案例打代碼，寫(xiě)代碼的編輯器，我推薦 VS-Code，反正選一款你喜歡的編輯器就行，現(xiàn)在這些編輯器都有很多插件，像 VS-Code 這些編輯器，用好一款就可以寫(xiě)各種語(yǔ)言的代碼了。

2、CSS

沒(méi)啥好說(shuō)的，和 HTML 相輔相成，你在學(xué)習(xí) HTML 的過(guò)程中，其實(shí)也一直都在接觸 CSS，所以你學(xué)了 HTML 之后，感覺(jué)幾個(gè)小時(shí)就可以學(xué)完 CSS 了，還是一樣，推薦找個(gè)視頻快速入門(mén)，不多說(shuō)。

html 是一門(mén)標(biāo)簽語(yǔ)言，里面有各種各樣的標(biāo)簽，很多初學(xué)者學(xué)了之后可能就把這些標(biāo)簽忘了，有人可能會(huì)問(wèn)，老是忘了怎么辦？

忘了就忘了，沒(méi)事的，不需要強(qiáng)行記住這些標(biāo)簽，你需要的是：腦子里有個(gè)印象，當(dāng)你這實(shí)現(xiàn)某個(gè)功能的時(shí)候，你知道 HTML 有某個(gè)標(biāo)簽可以實(shí)現(xiàn)這樣的功能就可以了，然后翻開(kāi)對(duì)應(yīng)的教程，你能夠根據(jù)教程使用這個(gè)標(biāo)簽即可。

用的次數(shù)多了，也就記住了，所以學(xué)完 HTML 和 CSS，一定要多多實(shí)踐，隨便打開(kāi)一個(gè)網(wǎng)頁(yè)，對(duì)著葫蘆畫(huà)瓢，自己寫(xiě)一個(gè)和它類(lèi)似的就可以了。

3、JavaScript

比起 HTML 和 CSS，JavaScript 會(huì)難一些，不過(guò)如果你有其他編程語(yǔ)言基礎(chǔ)，例如學(xué)過(guò) C 語(yǔ)言，Python 或者 Java 啥的，那學(xué)起 JavaScript 也是分分鐘的事。

前面的 HTML 和 CSS，我的推薦大家找個(gè)視頻快速入門(mén)即可，但是對(duì)于 JavaScript，假如你時(shí)間不是很緊，那么我推薦你用書(shū)籍系統(tǒng)學(xué)一下，有些知識(shí)，趁著有時(shí)間，一定要系統(tǒng)學(xué)，這樣可以打下很深的底子，如果你覺(jué)得難的話(huà)，也可以先用視頻快速入門(mén)，之后再回過(guò)頭來(lái)鉆研書(shū)籍，系統(tǒng)過(guò)一遍，通過(guò)系統(tǒng)學(xué)習(xí)，你會(huì)明白很多原理，學(xué)到很多設(shè)計(jì)思想，我看過(guò)一本《高性能JavaScript-中文版》，感覺(jué)還好，就推薦這一本吧。

學(xué)了 JavaScript 之后，可以學(xué)一學(xué) ES6，面試貌似也經(jīng)常會(huì)問(wèn)到，可以看一看阮一峰寫(xiě)的一份入門(mén)教程：ES6 教程

二、框架

目前前端用的比較多的主要有 Vue 和 React ,在學(xué)習(xí)框架之前，一定要先用 HTML + CSS + JavaScript 這些做一些項(xiàng)目，因?yàn)檫@些框架的底層實(shí)現(xiàn)，其實(shí)就是 JavaScript 實(shí)現(xiàn)的，然而，居然還有人知道如何使用 Vue，但沒(méi)學(xué)過(guò) JavaScript，這顯然不合適，只有你體驗(yàn)過(guò) HTML + CSS + JavaScript ，你才能更好著明白 Vue 和 React 的好處。

不過(guò)對(duì)于初學(xué)者，可以先學(xué)習(xí) Vue，Vue 可能更好入門(mén)一些，之前實(shí)習(xí)的時(shí)候，被迫學(xué)習(xí)了幾天的 vue。你可以去B站找一些課程或者購(gòu)買(mǎi)

不過(guò)你看了課程之后，你去做項(xiàng)目的話(huà)，其實(shí)還是會(huì)遇到好多問(wèn)題的，特別是在網(wǎng)絡(luò)請(qǐng)求那塊，在解決問(wèn)題的過(guò)程中，你就能更加理解一些原理了。

學(xué)到什么程度？

對(duì)于初學(xué)者，我的一半建議就是，跟著一份教程，過(guò)一遍，然后做對(duì)應(yīng)的項(xiàng)目即可，之后遇到啥，就去搜索啥，不用糾結(jié)這個(gè)學(xué)到什么程度。

Vue 和 React 隨便選一個(gè)重點(diǎn)學(xué)習(xí)即可，我推薦 vue，不過(guò)學(xué)了 Vue 之后，有時(shí)間的話(huà)，我建議可以了解下 React，快入通過(guò)視頻了解，感覺(jué)幾個(gè)小時(shí)或者一兩天就夠了。

三、數(shù)據(jù)結(jié)構(gòu)

無(wú)論你是走什么崗位，數(shù)據(jù)結(jié)構(gòu)都是必須學(xué)習(xí)的一門(mén)課程，從面試的角度來(lái)講，面試基本比問(wèn)，特別是校招；從個(gè)人的提升上來(lái)看，學(xué)好數(shù)據(jù)結(jié)構(gòu)與算法，可以讓你走的更遠(yuǎn)。

但是，數(shù)據(jù)結(jié)構(gòu)與算法這玩意，可深可淺，不過(guò)我覺(jué)得至少得掌握如下基礎(chǔ)知識(shí)：

1、時(shí)間復(fù)雜度、空間復(fù)雜度

2、鏈表、隊(duì)列、棧

3、樹(shù)：初級(jí)：二叉樹(shù)，查找二叉樹(shù)，進(jìn)階：AVL樹(shù)，紅黑樹(shù)等，至少掌握初級(jí)吧。

4、圖（圖有好多種算法，深度/廣度搜索，最短路徑、最小生存樹(shù)等），對(duì)于圖，其實(shí)無(wú)論是面試還是工作，都挺少用到，學(xué)起來(lái)也有一定難度，假如你時(shí)間不多，我覺(jué)得可以先不學(xué)。

不過(guò)如果你是科班的，那么這些我覺(jué)得你大一第二學(xué)期把這些都學(xué)完是最好的了，沒(méi)學(xué)完也問(wèn)題不大，有些人可能是先教《離散數(shù)學(xué)》這本課，為數(shù)據(jù)結(jié)構(gòu)與算法做鋪墊。

書(shū)籍推薦：你學(xué)過(guò) JavaScript，所以可以用 Javascript 來(lái)寫(xiě)這些數(shù)據(jù)結(jié)構(gòu)，至于書(shū)籍，其實(shí)我也不知道推薦啥，網(wǎng)上根據(jù)目錄找一本：

把基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)學(xué)了之后，我覺(jué)得你要保持刷題，這個(gè)還是挺重要的，例如可以每天保持刷一兩道，剛開(kāi)始刷會(huì)挺吃力，但后面熟練了，就會(huì)快很多，不過(guò)很多人在吃力的那會(huì)，就放棄了，所以也就有了人與人之間的差距。

我覺(jué)得至少把《劍指 offer》刷完吧，刷完之后，可以去把?leetcode?中 top 100 的熱門(mén)題做了。

當(dāng)然，如果你想更加系統(tǒng)著學(xué)習(xí)算法，可以看我之前寫(xiě)的算法學(xué)習(xí)路線(xiàn)：談一談算法學(xué)習(xí)之路

95頁(yè)前端初級(jí)模塊筆記

主要內(nèi)容包括html，css，html5，css3，JavaScript，正則表達(dá)式，函數(shù)，BOM，DOM，jQuery，AJAX，vue 等等。

html5/css3

• HTML5 的優(yōu)勢(shì)

• HTML5 廢棄元素

• HTML5 新增元素

• HTML5 表單相關(guān)元素和屬性

• CSS3 新增選擇器

• CSS3 新增屬性

• 新增變形動(dòng)畫(huà)屬性

• 3D變形屬性

• CSS3 的過(guò)渡屬性

• CSS3 的動(dòng)畫(huà)屬性

• CSS3 新增多列屬性

• CSS3新增單位

• 彈性盒模型

JavaScript

• JavaScript基礎(chǔ)

• JavaScript數(shù)據(jù)類(lèi)型

• 算術(shù)運(yùn)算

• 強(qiáng)制轉(zhuǎn)換

• 賦值運(yùn)算

• 關(guān)系運(yùn)算

• 邏輯運(yùn)算

• 三元運(yùn)算

• 分支循環(huán)

• switch

• while

• do-while

• for

• break和continue

• 數(shù)組

• 數(shù)組方法

• 二維數(shù)組

• 字符串

正則表達(dá)式

• 創(chuàng)建正則表達(dá)式

• 元字符

• 模式修飾符

• 正則方法

• 支持正則的 String方法

js對(duì)象

• 定義對(duì)象

• 對(duì)象的數(shù)據(jù)訪(fǎng)問(wèn)

• JSON

• 內(nèi)置對(duì)象

• Math 方法

• Date 方法

面向?qū)ο笫且环N編程思想

• 定義對(duì)象

• 原型和原型鏈

• 原型鏈

• 原型

常用的JavaScript設(shè)計(jì)模式

• 單體模式

• 工廠(chǎng)模式

• 例模式

函數(shù)

• 函數(shù)的定義

• 局部變量和全局變量

• 返回值

• 匿名函數(shù)

• 自運(yùn)行函數(shù)

• 閉包

BOM

• BOM概述

• window方法

• frames [ ] 框架集

• history 歷史記錄

• location 定位

• navigator 導(dǎo)航

• screen 屏幕

• document 文檔

DOM

• DOM對(duì)象方法

• 操作DOM間的關(guān)系

• DOM節(jié)點(diǎn)屬性

事件

• 事件分類(lèi)

• 事件對(duì)象

• 事件流

• 事件目標(biāo)

• 事件委派(delegate)

• 事件監(jiān)聽(tīng)

jQuery

• jQuery 選擇器

• 屬性選擇器

• 位置選擇器

• 后代選擇器

• 子代選擇器

• 選擇器對(duì)象

• 子元素

• DOM操作

• JQuery 事件

• 容器適應(yīng)

• 標(biāo)簽樣式操作

• 滑動(dòng)

• 自定義動(dòng)畫(huà)

AJAX

• 工作原理

• XMLHttpRequest對(duì)象

• XML和HTML的區(qū)別

• get() 和post()

HTTP

• HTTP消息結(jié)構(gòu)

• url請(qǐng)求過(guò)程

性能優(yōu)化

• JavaScript代碼優(yōu)化

• 提升文件加載速度

webpack

• webpack的特點(diǎn)

• webpack的缺點(diǎn)

• 安裝

• webpack基本應(yīng)用

• 配置文件入門(mén)

vue

• MVC模式

• MVVM模式

• 基礎(chǔ)語(yǔ)法

• 實(shí)例屬性/方法

• 生命周期

• 計(jì)算屬性

• 數(shù)組的更新檢查

• 事件對(duì)象

• Vue組件

• 路由使用

• 路由導(dǎo)航

• 嵌套路由

• 命名視圖

獲取方式：

1.一鍵三連+關(guān)注

2.后臺(tái)主動(dòng)留下痕跡：“資料 ”（重點(diǎn)）?