寫在前面
之前就有不少小夥伴提需求說:以後想從事前端開發崗,能不能整理一波前端開發的自學資料+書籍,正好得空,這個事情還是先安排了吧!
正好不久之前,咱們這裏也詳細梳理過「前端開發的學習路線和知識點」,具體可參看這篇文章:《前端開發學習路線+知識點梳理》
之前繪製的詳細學習思維導圖,這裏也再貼一下:
本篇我們就對照着這個知識腦圖,再來梳理一下學習時具體可用的學習材料和書籍,小夥伴們好像更關心這個~
注:本文已收錄於Github開源項目:github.com/hansonwang99/JavaCollection ,裏面有詳細自學編程學習路線、面試題和麪經、編程資料及系列技術文章等,資源持續更新中
不得不說,前端技術棧更新實在太快了,框架的版本發得也是賊勤。這種情況下,除了一些經典的知識可以看書之外,還是得多培養閱讀官方文檔的習慣,這個既是必須,也是賴以生存的技能。
HTML
-
《Head First HTML與CSS》
Head Fisrt系列書你懂的,爲入門而生,文筆風趣幽默爲主,配圖也很豐富,簡單易懂就對了。
-
《HTML5 權威指南》
豆瓣評分8.5的書,書是沒問題,800
多頁的書全面性不用說,但是能不能讀得完這是一個問題,就看決心和“手速”了。
- 網絡教程
-
https://www.w3school.com.cn/h.asp
-
https://www.runoob.com/html/html-tutorial.html
-
https://developer.mozilla.org/
-
CSS
-
《CSS權威指南》
放在現在來看是本“老書”了,但是很多基礎的東西在那擺着也得學。CSS東西就是細節多,這本就當是給CSS的知識點做了一個大梳理吧,所以這本書當工具書看是可以。
-
《CSS揭祕》
這本書展示了47
個CSS的技巧,是一本注重實踐的教程,雖然算進階書,但是內容沒那麼難,看完對很多實現思路有啓發。
- 網絡教程
-
https://www.runoob.com/css/css-tutorial.html
-
https://www.w3school.com.cn/css/index.asp
-
https://developer.mozilla.org/
-
JavaScript語言
-
《你不知道的 JavaScript》
這本書是翻譯過來的,分好幾卷,黃油油的封面你懂的~ 應該說這本書把JavaScript
裏很多複雜且深度的概念進行了細緻講解,比如作用域、閉包、原型、異步等等,網上書評啥的還是可以的。
-
《JavaScript DOM編程藝術》
這本書並不厚,小白可用,初學時搞定並實踐了這本書裏的內容,應該入門沒啥問題,這樣後面就可以找一些經典甚至聖經類的書來加強和鞏固了。
-
《JavaScript 高級程序設計》
大名鼎鼎的JS
紅寶書,是權威的JavaScript
入門書籍,沒錯是入門書籍!不要被名字裏的“高級”兩個字嚇跑~ 內容循序漸進,基礎且全面,不能指望一遍就過,適合精讀也適合回味。
-
《JavaScript權威指南》
上面是“紅寶書”,這本是“犀牛書”,據說這兩本在一起更搭配哦。
這本書是淘寶前端團隊翻譯的,也算是JavaScript
開發者的聖經之一,內容太多太全,如果能多通讀幾遍並有所心得,估計成神之路也就不遠了~
- 網絡教程
-
菜鳥教程:
https://www.runoob.com/js/js-tutorial.html
-
現代JavaScript教程:
https://zh.javascript.info/
-
MDN文檔:
https://developer.mozilla.org/
-
ES
ES
和JS
的關係應該能分得清吧,對前端開發來說,ES6+
還是有必要學一下的,經典的材料有幾個。
-
《阮一峯ECMAScript 6入門教程》
https://es6.ruanyifeng.com/
-
《深入理解ES6》
豆瓣評分9.4的書,比較系統地介紹了ES的重要特性。
TypeScript
作爲一名合格的前端工程師,TypeScript
現在也是必須掌握的知識了,學習它最好的材料還是文檔。
-
《英文文檔》
https://www.typescriptlang.org/docs
-
《中文文檔》
https://www.tslang.cn/docs/home.html
-
《深入理解TypeScript》
看文檔還是最好的,至於書的話,這本《深入理解TypeScript》是原版《TypeScript Deep Dive》的翻譯本,有精力可以康康。
數據結構和算法
-
《學習JavaScript數據結構與算法(第3版)》
數據結構和算法本身其實和編程語言無關,但是如果非得讓找一本基於JavaScript
語言描述的數據結構和算法書,那這本是前端的菜就對了。除了常用數據結構、算法、以及算法思想均有涉及之外,書中專門還用一章來寫了ES
和TS
的東西。
設計模式
-
《JavaScript設計模式》
設計模式這東西本來也是和語言無關的,這是一本基於JavaScript
語言描述的設計模式落地實現,所有常見的設計模式都講到了,行文風格也不枯燥,給出的場景和實例也挺全,當然這本重在靈活運用,進階可閱。
網絡協議
對於前端開發來說,網絡協議肯定是必看,尤其應用層協議,其他底層協議能多瞭解一點當然更好。
-
《圖解TCP/IP》
-
《圖解HTTP》
這兩本網絡協議圖解書籍通俗易懂,配圖也很形象,黑皮(灰皮)版網絡協議聖經啃不下來的,可以看看這個。
-
《HTTP權威指南》
這本書並不只有HTTP
協議本身的內容,也並不僅僅針對前端開發者。它裏面將很多周邊技術和Web化過程中諸多的技術和原理都進行了闡述,內容系統龐大。跟Web開發有關的程序員在進階擴大知識面時都可以看看。
Node.js
-
《Node.js中文文檔》
http://nodejs.cn/api/
Node.js版本更新這麼快,看文檔是最靠譜的。
-
《Node.js實戰》
如果硬要找一本教材看,這本Node.js的實戰教程可以一用。
-
《深入淺出Node.js》
這本書不是寫給初學者看的,算是Node.js進階書籍,國人作者真的是長臉,對Node.js的一些關鍵原理做了剖析,如果想深入瞭解 Node,這本書值得一看。
應用框架
框架這東西更新迭代實在太快了,要麼還沒來得及出書,要麼就是那種迅速推出的快餐書,基本都是照搬框架的官方文檔,有時候翻譯和理解得還不一定準確,所以在學習前端的形形色色的框架時,官方文檔還是最靠譜和全面的資料,包括但不限於:
-
Vue.js中文官方文檔:
https://vuejs.bootcss.com/guide/
-
React.js官方文檔:
https://reactjs.org/docs/getting-started.html
-
React.js 小書:
https://github.com/huzidaha/react-naive-book
-
Webpack中文官方文檔:
https://www.webpackjs.com/concepts/
-
Sass 中文文檔:
https://sass.bootcss.com/documentation
-
Less 中文文檔:
http://lesscss.cn/usage/
-
Stylus 中文文檔:
https://stylus.bootcss.com/
-
...等等
關注性能
-
《Web性能權威指南》
看這本書之前像TCP/IP協議族的基礎最好具備,雖然書中很多篇幅也在講述這部分內容,但是加入了對應優化實踐的知識和內容,進階閱讀可用。而且這本書也不僅僅是前端開發人員可以看,所有Web應用及站點開發人員都可以閱讀,包括後端、運維、存儲、視頻、性能工程師等等。
後 記
最後小夥伴們如果有什麼要補充,或者可以推薦的不錯資料,歡迎多多補充,一起分享提高。
注:本文已收錄於Github開源項目:github.com/hansonwang99/JavaCollection ,裏面有詳細自學編程學習路線、面試題和麪經、編程資料及系列技術文章等,資源持續更新中