前端開發(fā)書籍推薦與學(xué)習(xí)路線（2022年全新推薦）

時(shí)間：2023-05-31 04:45:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-31 04:45:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

前端開發(fā)書籍推薦與學(xué)習(xí)路線（2022年全新推薦）：

可能你已經(jīng)在網(wǎng)上看過(guò)很多前端開發(fā)書籍的推薦了，不過(guò)技術(shù)的更新迭代很快，那些書不少都已經(jīng)過(guò)時(shí)，這里只推薦那些最新的且比較經(jīng)典的。

MDN技術(shù)文檔

要系統(tǒng)掌握HTML、CSS和JavaScript，可以說(shuō)MDN文檔是最重量級(jí)的終極參考，這個(gè)一定要長(zhǎng)期翻閱（哪怕你已經(jīng)工作了），怎么強(qiáng)調(diào)都不過(guò)分?？梢哉f(shuō)沒(méi)有經(jīng)常翻MDN文檔的前端開發(fā)不能稱之為前端開發(fā)工程師。

閱讀指數(shù)：必看，怎么強(qiáng)調(diào)都不過(guò)分，而且要必須能熟練翻閱（其實(shí)就是要會(huì)搜索）。

• MDN 技術(shù)文檔，必看必查

不管你今后看啥書、資料、視頻，你都要回歸到MDN技術(shù)文檔去理解（MDN技術(shù)文檔翻譯得比較一般）。

HTML 與 CSS書籍系列

菜鳥教程與w3cschool

看w3cschool或菜鳥教程的內(nèi)容：https://www.runoob.com這里有關(guān)于html、css、html5、css3、bootstrap等內(nèi)容的教程，你也可以用這個(gè)來(lái)入門，這也是大多數(shù)人入門的一個(gè)方式。不過(guò)值得一提的是這些線上教程內(nèi)容很多已經(jīng)過(guò)時(shí)，而且這種入門方式學(xué)習(xí)的知識(shí)也非常不系統(tǒng)。

盡管它們問(wèn)題很多，但是線上教程實(shí)在沒(méi)有其他更好的選擇。MDN也有入門教程，內(nèi)容新而且講解也很系統(tǒng)，不過(guò)由于容易跳轉(zhuǎn)到復(fù)雜知識(shí)的頁(yè)面，怕新手接受不了。

所以只能拿菜鳥教程和w3school作為一個(gè)最為早期的過(guò)渡，比如一周時(shí)間把里面的內(nèi)容實(shí)戰(zhàn)一遍，然后去翻MDN技術(shù)文檔。

書籍推薦

《HTML5 權(quán)威指南》、《??HTML5程序設(shè)計(jì)（第2版）》、《??Head First HTML與CSS（第2版）》像這些書以前比較推薦，但是出版也有一些年份了，部分內(nèi)容存在過(guò)時(shí)或一些知識(shí)點(diǎn)沒(méi)有講（新出了一些東西，沒(méi)有講就不稀奇了）。這里推薦一本新版的書《HTML+CSS+JavaScript入門經(jīng)典（第3版）》。

這本書把Web頁(yè)面開發(fā)的基礎(chǔ)都講解到了，是一本適合小白去入門的書。可以把這本書作為學(xué)犀牛書、紅寶書的開胃菜。

大多數(shù)培訓(xùn)班的前端開發(fā)視頻講得也非常基礎(chǔ)，而且沒(méi)有一個(gè)配套學(xué)習(xí)的參考書，如果你是轉(zhuǎn)行的新手，你也可以先看這本書。

學(xué)習(xí)提示

盡管你學(xué)了HTML、CSS以及簡(jiǎn)單的javascript這些入門知識(shí)之后，對(duì)做出一個(gè)精美的頁(yè)面仍然并不擅長(zhǎng)，但是由于網(wǎng)頁(yè)設(shè)計(jì)的知識(shí)點(diǎn)過(guò)多讓你感覺很多知識(shí)點(diǎn)好像串不起來(lái)很快就忘了。所以你學(xué)習(xí)時(shí)一定要用思維導(dǎo)圖來(lái)梳理一下，以及要學(xué)會(huì)實(shí)戰(zhàn)。

然后你可以自己實(shí)戰(zhàn)模擬一些漂亮的頁(yè)面做一些項(xiàng)目，不過(guò)值得一提的是前端開發(fā)工程師的核心并不在于通過(guò)原始的HTML和CSS進(jìn)行網(wǎng)頁(yè)開發(fā)，前期學(xué)習(xí)時(shí)不要把大量時(shí)間耗在做頁(yè)面上。

如果你平時(shí)的日常工作更多的是做頁(yè)面（已經(jīng)工作的頁(yè)面重構(gòu)師），那以下2本CSS的書可能比較適合你，但是前端開發(fā)學(xué)習(xí)者沒(méi)有必要看這兩本書。

CSS權(quán)威指南分上下兩冊(cè)，關(guān)于CSS你想知道的基本就都在這里了，而且它把內(nèi)容講得比較通透，這本書比較側(cè)重于系統(tǒng)闡述每一個(gè)知識(shí)點(diǎn)，動(dòng)物書的權(quán)威指南是難的是多翻翻的參考書（也就是像詞典一樣對(duì)待，快速擼完，以后常翻）。

這本書則側(cè)重于CSS的一些實(shí)戰(zhàn)的技巧，可以說(shuō)寫的是非常經(jīng)典了，寫書的作者是CSS的專家。

前端開發(fā)工程師學(xué)習(xí)時(shí)推薦看《深入解析CSS》，關(guān)于CSS的一些面試題，這本書基本上都涵蓋到了。

學(xué)HTML和CSS時(shí)一定要邊用VS Code+Chrome瀏覽器實(shí)戰(zhàn)，再結(jié)合MDN，寫一下筆記，做一下思維導(dǎo)圖，就可以快速入門網(wǎng)頁(yè)的開發(fā)，內(nèi)容要快看，快實(shí)戰(zhàn)，用思維導(dǎo)圖快速記憶。

JavaScript書籍系列

JavaScript可以說(shuō)是前端的大頭了，前端開發(fā)工程師要把主要的精力放在JavaScript的學(xué)習(xí)上，尤其是原生JavaScipt基礎(chǔ)。

吐血推薦，犀牛書和紅寶書一直都是前端開發(fā)最值得買的兩本書，可以說(shuō)沒(méi)有學(xué)過(guò)這兩本書的前端開發(fā)工程師基本都是不完整的半吊子。

《JavaScript高級(jí)程序設(shè)計(jì)》也就是傳說(shuō)中的紅寶書，而《JavaScript權(quán)威指南》就是傳說(shuō)中的犀牛書，這兩本書都是很多大神推薦的JavaScript經(jīng)典書，學(xué)JavaScript可以先看這兩本書，還是一樣的方法，不要光看，一定要邊實(shí)戰(zhàn)邊記筆記。

不過(guò)犀牛書、紅寶書這兩本大部頭書，仍然不夠基礎(chǔ)，很多新手依然學(xué)不太明白，雖然這兩本書是必買必看，但是入門時(shí)你可以學(xué)習(xí)《JavaScript DOM編程藝術(shù)（第2版）》（沒(méi)有必要買，網(wǎng)上找電子書即可）。

學(xué)習(xí)Javascript時(shí)，比較推薦這樣一個(gè)線上的教程，和犀牛書、紅寶書一起來(lái)看。

• 現(xiàn)代JavaScript教程

JavaScript進(jìn)階

JavaScript進(jìn)階方面的內(nèi)容適合純前端開發(fā)工程師，如果是做前端可視化、側(cè)重于前端頁(yè)面之類的，進(jìn)階內(nèi)容可以先只了解的。

《你不知道的JavaScript》可以說(shuō)是JavaScript進(jìn)階比較推薦的書了，這三本書在微信讀書App里有。

算法相關(guān)

前端開發(fā)也需要對(duì)數(shù)據(jù)結(jié)構(gòu)和算法有一個(gè)基礎(chǔ)的了解。這個(gè)方向選了三本比較基礎(chǔ)，講解比較生動(dòng)的經(jīng)典好書，平時(shí)可以看一下，不作為主力的學(xué)習(xí)路徑，但是值得花點(diǎn)時(shí)間了解一下（尤其是計(jì)算機(jī)專業(yè)想從事前端開發(fā)的學(xué)生）

計(jì)算機(jī)網(wǎng)絡(luò)與前端性能

前端開發(fā)不能不了解計(jì)算機(jī)網(wǎng)絡(luò)的相關(guān)知識(shí)，這里推薦四本書，有兩本就是講Web性能的。HTTP也有一本動(dòng)物書值得推薦（我對(duì)動(dòng)物書有點(diǎn)偏執(zhí)，書都是經(jīng)典好書）。

購(gòu)買指數(shù)：4星，推薦購(gòu)買其中一本

購(gòu)買指數(shù)：4星




學(xué)完以上這些，幾本就可以去學(xué)習(xí)Nodejs和Javacript的三大框架了，不過(guò)很遺憾的是后面沒(méi)有什么書可以推薦的，還是看技術(shù)文檔吧。現(xiàn)在前端開發(fā)工程師的門檻越來(lái)越高了，不能只會(huì)前端，不會(huì)后端，而后端這里就比較推薦大家學(xué)習(xí)Nodejs（還可以是Python、PHP或者Golang）.

可以結(jié)合whistle來(lái)學(xué)習(xí)計(jì)算機(jī)網(wǎng)絡(luò)方面的知識(shí)，它是基于Node實(shí)現(xiàn)的跨平臺(tái)web調(diào)試代理工具，參考中文文檔：https://wproxy.org/whistle/

以及需要了解Nginx、Apache等。

Nodejs入門書籍

了Nodejs基礎(chǔ)以外，還需要掌握express、koa之類的Web開發(fā)框架。

關(guān)于異步、函數(shù)式編程，除了零散在幾本書里的內(nèi)容，可以看一下這些技術(shù)文檔：

• JavaScript Promise 迷你書

而關(guān)于組件化、工程化的一些工具鏈、可復(fù)用、持續(xù)集成、測(cè)試等相關(guān)的內(nèi)容還沒(méi)有很好的書，這方面也是前端開發(fā)工程師必須要掌握的基礎(chǔ)，所以還是要閱讀技術(shù)文檔才能更加系統(tǒng)的接觸到相關(guān)的知識(shí)。

閱讀指數(shù)：必看

• webpack 中文文檔 | webpack 中文網(wǎng)
• express技術(shù)文檔
• eslint技術(shù)文檔
• koa技術(shù)文檔

bootcss、印記中文里面有不少前端的技術(shù)文檔推薦大家來(lái)學(xué)習(xí)，這個(gè)非常值得大家閱讀一下。

計(jì)算機(jī)基礎(chǔ)知識(shí)

數(shù)據(jù)庫(kù)MySQL

前端開發(fā)工程師，不能不了解數(shù)據(jù)庫(kù)相關(guān)的知識(shí)，至少要學(xué)會(huì)關(guān)系型數(shù)據(jù)庫(kù)Mysql，了解一下NoSQL的MongoDB和Redis。

購(gòu)買指數(shù)：4.5星

這里推薦MySQL必知必會(huì)和SQL必知必會(huì)，這兩本算是比較基礎(chǔ)的知識(shí)了，如果需要更加深入，可以閱讀一下:

購(gòu)買指數(shù)：4.5星

MongoDB

而MongoDB相關(guān)的，了解一下 騰訊云 · 云開發(fā)自帶的數(shù)據(jù)庫(kù)就可以了，也可以去看一下MongoDB的技術(shù)文檔，這個(gè)目前暫時(shí)沒(méi)有中文

Redis

Redis是內(nèi)存存儲(chǔ)的數(shù)據(jù)結(jié)構(gòu)服務(wù)器，也是學(xué)習(xí)是最為重要的數(shù)據(jù)庫(kù)之一了，除了上面三個(gè)數(shù)據(jù)庫(kù)，其他的數(shù)據(jù)庫(kù)可以根據(jù)情況了解。

Linux命令行

除此以外還需要對(duì)Linux服務(wù)器有一個(gè)基礎(chǔ)性的了解，自己搭建或者買一臺(tái)Linux服務(wù)器把書里面的一些命令大致跑一遍就可以了。

三大框架之二Vue和React

技術(shù)文檔是必看的，也必須認(rèn)真研究的

以上內(nèi)容主要是圍繞原生JavaScript基礎(chǔ)來(lái)展開的，要從事前端開發(fā)的工作需要了解一下三大框架，三大框架目前推薦Vue和React，看它們的技術(shù)文檔就可以，下面也只以Vue和React為例：

Vue生態(tài)

Vuejs中文文檔，Vue是前端開發(fā)目前使用最多的框架之一了；

vuex技術(shù)文檔，Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式;

vue-router技術(shù)文檔，Vue Router 是Vue官方的路由管理器；

還有vue devtools以及vue cli、webpack這些基礎(chǔ)的工具鏈，也是很有必要掌握的。想更全面了解Vue，當(dāng)然少不了Github 里的awesome Vue了

https://github.com/vuejs/awesome-vue

UI框架

element ui技術(shù)文檔，應(yīng)該是目前用的最多的UI框架之一

Ant Design技術(shù)文檔，一整套的設(shè)計(jì)體系，支持Vue和React，從這里可以學(xué)到很多相關(guān)知識(shí)，比如https://scaffold.ant.design/#/ 腳手架等

目前UI框架，就是這兩個(gè)比較多一些。

React 生態(tài)

React中文文檔，前端開發(fā)大公司都需要了解的框架

next.js技術(shù)文檔，服務(wù)端渲染

React Router技術(shù)文檔，React路由解決方案

Redux技術(shù)文檔，React狀態(tài)管理

相應(yīng)的也有awesome React https://github.com/enaqx/awesome-react

其實(shí)前端開發(fā)分的方向也有很多，比如前端可視化，React Native，Electron、甚至可以轉(zhuǎn)Flutter之類的，這些建議在學(xué)習(xí)的時(shí)候了解，在工作的時(shí)候根據(jù)情況來(lái)學(xué)，不要啥都學(xué)，最重要的還是打好基礎(chǔ)。

小程序以及小程序云開發(fā)特別適合前端開發(fā)工程師作為零基礎(chǔ)入門來(lái)學(xué)，它也是目前前端開發(fā)應(yīng)用的一個(gè)比較有錢途的方向。