前端讀書清單：從入門到框架開發

來自專欄 Phodal - 手工藝人116 人贊了文章

某天，我在閱讀《JavaScript 框架設計：第 2 版》的時候，發現我在 2015 年畫的讀書路線系列中的前端篇，被收錄到其中。

大抵是因為這張圖被認可了，便想著寫篇文章，介紹一下讀書路線中相關的書。

開始之前呢，讓我們了解讀書路線的三條基本路線。Web 前端，有三個基礎元素： JavaScript、CSS、HTML。對應於學習開發則是：

• JavaScript 及其方言
• CSS 及其預處理器
• HTML 及 DOM 處理

正是這些基本的內容，構建出了一個個前端應用。

提升 ES/JavaScript

在今天（2018 年），我最喜歡的 JavaScript 方言是 TypeScript，它的類型系統幫助團隊降低了 BUG 率，構建出了更健壯的前端應用。對於那些由後端而來的開發人員來說，它與 JavaScript 相比更容易上手。

《JavaScript 高級程序設計》

本書又稱為紅皮書，基本上算是一本必推薦的入門前端書目。它詳細介紹了 JavaScript 語言的各個組成部分：語言核心、DOM、BOM、事件模型，還深入淺出地探討了面向對象編程、Ajax 與Comet 伺服器端通信等內容。

如果你是個學生，想入門 JavaScript，那麼你相當的適合你。它那恰到好處的驚人高度，可以在你不閱讀的時候，幫你治療你的頸椎病——墊顯示器。

唯一值得額外考慮的是，這本書的知識在今天看來有些舊。

可選工具書：《JavaScript 權威指南》

和上一本書類似，這本書更像是一本字典，很厚的字典。字典的好處，不僅僅在於方便查閱，還在於提供了一份索引。如我的那篇《程序員的內置索引與外置的Google》，對於新手用戶使用搜索來說，最難的就是找到合適的關鍵詞

不過這是一本 JavaScript 的字典，它詳細地介紹了 JavaScript 語言，以及瀏覽器定義的 JavaScript API 等。

同樣的，和一本書類似，它可以治療你的頸椎病，本書的知識在今天看來有些舊。

《JavaScript 語言精粹》

書很薄，內容對於讀者來說有一定的要求，它對於提升、理解 JavaScript 中的一些坑相當有幫助。書本身是介紹 JavaScript 語言好的一部分，而其厚度又決定了，需要對 JavaScript 有一定的了解。

閱讀之後，會對 JavaScript 有更深的體驗。

遺憾的是，這本書寫的也是 ES5 部分的，沒有最新的 ES6 版本。

《深入理解 ES6》

由於路線圖寫的時間比較早，還沒有 ES6 部分，所以，在這裡補充一下。

本書的作者也是之前那本《JavaScript高級程序設計》的作者，我們大可以將之視為其的續集。

不過今天 ES2017 的情況下，這本書也是缺少一些相應的資料的。

《編寫可維護的 JavaScript》

這本書放在另外的分支上是有道理的——它不是 Must to have, 是 Nice to have。

它更像是一本在工作中提升自己的書籍，書中涵蓋了編碼風格、編程技巧、自動化、測試等幾方面。以讓開發人員編寫出具備高可維護性的 JavaScript 代碼，從這一點上來看，它也更像是一本索引性書籍。對，和我的《全棧應用開發》類似。

CSS 基礎

CSS 作為 Web 應用的樣式基石，它展示了 Web 應用的豐富樣式。而關於 CSS 的書，可謂少之又少。

可選工具書：《CSS 權威指南》

作為一本 Definitive Guide（權威指南），它詳詳細細地介紹了 CSS 的方方面面。本書據說是，CSS 界權威 Meyer 大師三部曲中的一部理論書。同樣的，權威指南本身也是字典一樣的大塊頭，要啃起來並不容易。

國內目前的書是 2007 年出版的第 3 版，國外現在已經到了第 4 版（2017 年）。第 4 版中，介紹了大量的 CSS 3 相關的內容，以及Flexible box layout、2D、3D 動畫等新特性。作為發展中國家的程序員，我們只能等下一個版本了。

《CSS 世界》

考慮到上一本書，可能有些過時，所以推薦一下這本書。

如果你需要一本兼容 IE 的書，還有一本兼容字典，這本書就是適合你的。

然而，可是，大概，怎麼說，這本書我還沒看過。作者寫的文章倒是詳細地對 CSS 進行各種介紹，從各個平台（豆瓣、亞馬遜）的評論來看，這本書介紹得太詳細（啰嗦）了。

《精通 CSS：高級 Web 標準解決方案》

當時，這本書對我啟發比較大的是：布局。遺憾的是，作為僅有的幾本 CSS 書，它的翻譯有待提高。

DOM 篇

DOM，即文檔對象模型（Document Object Model，簡稱DOM）。儘管已經有 Virtual DOM 這樣了不起的技術，但是 DOM 還是要作為基礎的一部分來學習。

可選工具書：《DOM 啟蒙》

這是一本詳細的 DOM 操作指南。如果你想學習原生的 DOM 及 DOM API 相關的知識，那倒是不錯的。

這本書成為可選的原因是，因為下面一本書的存在。但是呢，《JavaScript DOM 編程藝術》一書又有些落伍了。

《JavaScript DOM 編程藝術》

本書在操作性上來說更強。在介紹 DOM 相關知識的同時，又展示了如何結合項目來操作 DOM。

對於初學者來說，這本書是相當合適的。

Web 框架

好了，我們掌握了上面的知識，就期望下一步成長。這個時候，我們就可以嘗試去構建自己的 Web 框架。它不僅可以幫助我們掌握 Web 框架背後的知識，還可以提升相關的能力。

《單頁 Web 應用: JavaScript 從前端到後端》

本書展示了從前端到後端都使用 JavaScript 來開發複雜的單頁Web應用，能讓你的團隊能夠很容易地進行設計、測試、維護和擴展，不會受到某個框架的限制。

這是一本即介紹實踐，又介紹原理相關的書籍。作為一本專門講述 SPA 的書籍，還是值得推薦一下的。

《JavaScript 框架設計》

是的，在有了上面的基礎之後，就可以進行框架設計。這是一本全面講解 JavaScript 框架設計的圖書

作者是一個開源前端框架 Anu 和 avalon 的作者，能同時做到寫出一個出名的前端框架，又寫書教怎麼寫框架的人屈指可數，這大抵是開源精神的體現。如我輪子造了很多，沒有幾個出名的，文章寫了很多，沒有幾篇出名的。不過按我看來，算我把所學的書上了，你也是學不會的——要練習。

這本書出了第 2 版，與時俱進，加入了一些虛擬 DOM、diff 演算法等內容。

《基於 MVC 的 JavaScript Web 富應用開發》

這本書在今天年來，已經有些過時了。核心點：利用前端實現 MVC。

而作為最後推薦的書，它擁有相當的難度，學會它的思想去做一個 MVC 框架吧。

結論

由於這是我過去的學習中總結的讀書路線，在應對時間代碼的時候，可能稍顯不足。

也歡迎在我的 GitHub 上 Book Tree - Developer進階書單 提出意見~~

在留言區留下你覺得不錯的書吧~。