雙十二大前端工程師讀書清單

本文最先爲雙十一而做，原標題「雙 11 大前端工程師讀書清單」，以付費的形式發佈在 GitChat 上。發佈以後在讀者圈羣聊中和讀者進行了深刻的交流，現免費分享到這裏，不足之處歡迎指教，也能夠在個人 GitChat 讀者圈中進行提問，原文以下。

---

發佈完本次 Chat 預告後，捕捉到了一個友善的吐槽：「讀書清單也要收費？」。的確，只是一個列表的話，你徹底沒必要點進來，我也沒必要在這裏大費周折的推薦給你。但你仍是看到這篇文章了，由於你懂什麼是博客，你也能理解知識付費對做者的自發性要求；更或許你認識我，看過個人《如何寫一篇優質的博客》而願意相信本文的質量——不管哪一種，感謝你的到來，開始乾貨吧。

本場 Chat 將嘗試創建「雙 11 期間，大前端領域有趣的買書薦書交流區」，並圍繞如下書籍主題進行詳細探討：

1. 從軟件工程到大前端開發
2. HTML、CSS 薦書品書
3. JavaScript 薦書品書
4. 計算機網絡薦書品書
5. Node.JS 薦書品書
6. 軟件工程薦書品書
7. 嘗試構建大前端知識體系

同時，本場 Chat 的讀者圈也將長期維護，一塊兒與前端領域的大牛們進行激烈的思惟碰撞，在交流中繪製出咱們專屬的書籍成長之路。

從軟件工程到大前端開發

此次咱們依舊從軟件工程提及。從軟件危機的誕生到如今，行業領頭的軟件工程師們給咱們描繪了這麼一幅專業技能培養方案：

對於沒有了解過軟件開發的學生，學的第一門是《計算機導論與程序設計基礎》。導論部分論述了計算機發展史、計算機基本組成和計算機網絡等概念，後期的分科都離不開這個大範圍；程序設計基礎部分經過快速瞭解 Python 語法，完成能寫出最簡潔的輸入輸出、分支/循環結構的階段性目標。

接下來詳細學習的是面向過程的表明，C 語言。經過重溫 Python 中遇到的輸入輸出流、分支循環結構，再引入程序編譯連接原理、指針/連接等在 C 語言中獨特的數據類型和數據結構，讓咱們打下堅實的編程基礎 [1]。

[1]：在這個階段，咱們或多或少會經歷的挫折有：

1. 安裝各類集成開發環境；
2. 安裝 Linux 虛擬機/雙系統；
3. 調試各類 C 語言 Bug，常常懷疑是程序錯了而不是你錯了；

只要耐心一點，以上的經歷對咱們編程習性的養成都頗有幫助。

第一年很快的過去後，大二和大三階段的課程各個擲地有聲——數據結構、算法設計、數據庫原理、操做系統、計算機網絡，內容量的安排上足以讓咱們有能力去企業進行實習。

但是，這和大前端開發有什麼關係？

在整個軟件工程的專業培養方案裏，並無任何侷限於 Web 開發領域的蹤影，更沒有侷限於前端開發。何況，前端開發被業界重視的時間並非很長 [2]。所以隸屬於軟件開發一個分支的前端開發，急需大量對計算機體系有充足瞭解的人才的加入。爲了避免被「學前端人不少」現象形成的泡沫衝擊，咱們就得拿起計算機科學素養來抵抗。

[2]：使用 XMLHTTPRequest 技術的 Ajax 劃分出了一個先後端分離的時代，今後業務邏輯的處理逐步向客戶端轉移，服務端更多的提供數據接口。

HTML、CSS 薦書品書(3+ 本)

《 Head First HTML 與 CSS(第二版) 》

中文版出版時間：2013-09

前端開發走在用戶交互體驗變革的最前沿，咱們所見的一切實體均可以被素描，被構建。鍛鍊咱們視覺的敏銳性、發現瑕疵並提出本身的設計方案，成爲了視覺工程師的獨特魅力。前端工程師與視覺工程師有很大的交集之處。

本書使用了豐富的圖片和漸進的過程，化繁爲簡，將咱們帶入了 Web 開發領域。同時，這本書每一頁的排版佈局都很精彩，看完本書，咱們在佈局設計中也將會有源源不斷靈感——這也是在衆多「Head First」 系列的編程書籍下，只推薦這本書的緣由所在。

經過推薦本書，咱們還能夠感悟到：

• 排版印刷行業、視覺設計領域與前端開發密不可分。
• 化繁爲簡的思想，能夠落實到咱們寫做上，也更能夠吸取進平常的代碼設計之中。

其它相關書籍，能夠類比：

1. 《 HTML & CSS設計與構建網站 》
2. 《 HTML5與CSS3權威指南(第3版) 》

《 CSS 權威指南（第三版）》

中文版出版時間：2008-01

CSS 更多的是門藝術，而非科學，須要咱們在大量實踐之中感覺真知。至於更好的實踐，咱們能夠經過這本權威指南進行一場細緻入微的瞭解。從選擇器、層疊/繼承、文字/字體到盒模型、表格佈局，本書講述的 CSS 知識並不落伍，是瞭解 CSS3 以前版本的最佳手冊。

經過推薦本書，咱們還能夠感悟到：

• 前端新手要多讀 W3C 官方的 CSS 手冊，能作到的人並很少。

其它相關書籍，能夠類比：

1. 《 精通 CSS：高級 Web 標準解決方案 》
2. 《 超越 CSS：Web 設計藝術精髓 》

《 響應式 Web 設計：HTML5 與 CSS3 實戰（第二版）》

中文版出版時間：2017-02

各類分辨率終端的普及，對咱們的網頁適應性提出了更高的要求。也所以 HTML5 標準的新特性和語義化、CSS3 標準的自帶動畫、新式佈局、響應式圖片、媒體查詢等概念呼之即出。

經過對這本講解響應式 Web 設計書籍的邊看邊敲，咱們用代碼實現響應式設計的能力將有很大的提升。這也再次應證了最初的那句話，前端開發走在用戶交互體驗變革的最前沿，「響應式」功不可沒。

經過推薦本書，咱們還能夠感悟到：

• 時代對技術提出了新要求，新技術又促進了時代的飛速發展。
• 學好 CSS 基礎的下一步，就是將本身曾經的頁面重構成響應式的。

其它相關書籍，能夠類比：

1. 《 學習響應式設計 》
2. 《 響應式 Web 》

JavaScript 薦書品書(6+ 本)

《 JavaScript 權威指南（第六版）》

中文版出版時間：2012-04

若是說咱們想打好 JavaScript 基礎，沒有什麼其餘書籍能夠比的過這本《 JavaScript 權威指南》了：一千頁的厚度，一百四的原價，每一節都捨不得錯過。

這本權威指南的章節安排分爲兩大部分：「JavaScript 語言核心」和「客戶端 JavaScript」。正如學習編譯原理要從詞法開始分析，前半部分從 JavaScript 的詞法結構開始講起。緊接着有基本數據類型、對象、數組、函數、類與模塊、正則表達式等章節，涵蓋了基礎語法的絕大部分。

經過推薦本書，咱們還能夠感悟到：

「權威指南」是重磅級的存在，只看不敲沒有用，只敲不想也無心義，逐章而破，反覆重溫。

其它相關書籍，能夠類比：

• 《 JavaScript 高級程序設計(第3版) 》

《 JavaScript 語言精粹（修訂版）》

中文版出版時間：2012-09

總有一本書愛被前端學習者與一千多頁的《 JavaScript 權威指南》合影留念。那就是這本《 JavaScript 語言精粹》。在歷史背景裏，這本書讓業界開始重視 JavaScript 這門曾只在瀏覽器上處理簡單任務的腳本語言，堪比人類世界的《 權利法案 》，隨着而來的即是現代民主（SPA 單頁應用）的普及。

因爲 JavaScript 最初是 10 天設計出來的，咱們更應在學習的過程當中時刻「取其精華，去其糟粕」。這本書便成了 ES5 標準及其以前標準的精華手冊。同時，書中「鐵路圖」的引入和 JSHint 的引入向咱們提倡了很好的代碼規範建議。遺憾的是，JSHint 因爲做者推薦的規範沒有定製性，逐步被後來的 ESLint 取代。

經過推薦本書，咱們還能夠感悟到：

• 一門語言的流行總有其優勢所在，缺點也不會例外。掌握更多的編程語言，會讓咱們對「取其精華，去其糟粕」有更深的理解。
• 直到如今，ECMAScript3 和 ECMAScript5 標準依然普遍存在，在學習 ECMAScript6 的新特性前，不要忘了重溫這些概念。

其它相關書籍，能夠類比：

• 《 你不知道的 JavaScript 》

《 JavaScript 異步編程 》

中文版出版時間：2014-04

IE 瀏覽器並非一無可取的，它最先地向開發者提供了 XMLHTTPRequest 接口，並隨着谷歌 Gmail 對其驚豔的實現，Ajax 快速普及，並開啓了先後分離的新時代。這本書便從 JavaScript 的異步編程講起，幫助咱們設計快速響應的網絡應用，而非簡單的頁面。

仔細看完這本書，若是有人向咱們請教關於「如何理解 JavaScript 的單線程機制」、「JavaScript 異步編程的解決方案有哪些」的時候，咱們便能水到渠成的說出個一二三來。只是不要忘了，技術發展到如今，Ajax 也只是先後分離的一種實現方式，咱們還有 Fetch API，咱們還有 Node 網絡請求模塊。

經過推薦本書，咱們還能夠感悟到：

看來，每當談到大前端開發，咱們的關注點應更多的轉在 Web 應用上了。

其它相關書籍，能夠類比：

• 仍是本書，必讀之做

《 JavaScript 忍者祕籍 》

中文版出版時間：2015-10

講述 JavaScript 語言相關技術的圖書不少，幾乎只有這本，作到了對該語言核心部分（函數、閉包和原型）深刻、全面的介紹，由 jQuery 庫做者編寫。使用 JavaScript 的高級 Web 應用開發中，咱們還會接觸到測試、測試工具、事件處理、錯誤捕獲等初級學者很難遇到的技術。舉例來講，或許現狀有許多成型的測試框架，但這本書講述了更多的 JavaScript 測試現狀和測試原理。

經過推薦本書，咱們還能夠感悟到：

初學階段感受沒太大用處的技術點，或許只是咱們尚未遇到使用情景，所以不要鬆懈。

其它相關書籍，能夠類比：

1. 《 高性能 JavaScript 》
2. 《 JavaScript 啓示錄 》
3. 《 編寫可維護的 JavaScript 》
4. 《 JavaScript 函數式編程 》
5. 《 學習 JavaScript 數據結構與算法(第2版) 》

《 JavaScript 設計模式 》

中文版出版時間：2013-06

有三本講述 JavaScript 設計模式的書值得推薦。上圖分享的是來自百度資深前端工程師的著做。做者經過情景對話，讓JavaScript 設計模式的概念變的如此的有趣，又不失核心概念的深刻淺出。

目錄簡潔明瞭，向咱們提供了設計模式的學習路線圖，這裏做出引用：

• 第一篇，面向對象編程；
• 第二篇，建立型設計模式：其中包括六種具體模式；
• 第三篇，結構型設計模式：其中包括七種具體模式；
• 第四篇，行爲型設計模式：其中包括十一種具體模式；
• 第五篇，技巧型設計模式：其中包括八種具體模式；
• 第六篇，架構型設計模式：其中包括六種具體模式。

經過推薦本書，咱們還能夠感悟到：

除了「化繁爲簡」外，還有「風趣幽默」能夠加入到咱們的平常寫做與編程之中。

其它相關書籍，能夠類比：

1. 《 JavaScript 設計模式與開發實踐 》
2. 《 JavaScript 設計模式 - 奧斯馬尼 》
3. 《 JavaScript框架設計(第2版) 》

《 深刻理解 ES6 》

中文版出版時間：2017-06

開發者們正在積極地爲 Web 瀏覽器以及 NodeJS 這些 JavaScript 宿主環境添加 ECMAScript6 的新功能，這是咱們步入 JavaScript 應用開發的不可缺失的一環。塊級做用域綁定、解構賦值、迭代器與生成器、Promise 與異步編程、代理與反射，曾由於激進而未作發佈的 ECMAScript4 裏，原來早都想到了這些概念，如今終得落實。本書由《 JavaScript 高級程序設計 》的做者撰寫。

經過推薦本書，咱們還能夠感悟到：

ECMAScript6+ 更好的支持了前端自動化開發和 JavaScript 應用開發，先從紮實 ECMAScript5 開始學起吧！

其它相關書籍，能夠類比：

• 《 ES6 標準入門(第三版) 》

計算機網絡薦書品書(3+ 本)

《 網絡是怎樣鏈接的 》

中文版出版時間：2017-01

「在瀏覽器中輸入網址到看到網頁內容」過程當中，到底發生了什麼？」一問常常會被說起，因而有了這本嚴謹又不失有趣的書，完完整整的講解了整個過程咱們所要了解的技術點。

• 客戶端：Web 瀏覽器、TCP/IP、網卡驅動、集線器、路由器
• 服務端：防火牆、緩存服務器、網卡驅動、TCP/IP、Web 服務端程序

若是上面的關鍵字你不能輕鬆的說出它們的原理和聯絡的話，就看看這本這本書吧。

經過推薦本書，咱們還能夠感悟到：

一個簡單的問題，真的能夠深挖出一本書來，若是那是由你寫出來的話，就更不同了。

其它相關書籍，能夠類比：

• 《 計算機是怎樣跑起來的 》

《 計算機網絡(第5版) 》

中文版出版時間：2012-03

網絡硬件、網絡軟件；網絡協議、網絡安全。理論與工程結合，仔細閱讀，足見學者的深厚功底。

經過推薦本書，咱們還能夠感悟到：

圖文生動的書縱然有趣，能通讀這類更專業的計算機書籍也是一種實力。

其它相關書籍，能夠類比：

1. 《 計算機網絡:自頂向下方法 》
2. 《 TCP/IP詳解 》

《 圖解 TCP/IP(第五版) 》

中文版出版時間：2013-07

從理想的 OSI 網絡模型到實際的 TCP/IP 模型，每一個層級都有不少協議在進行管理。應用層面向咱們封裝好了底層細節，只須要咱們互相經過接口協議來通訊。縱使這樣，大前端工程師也應掌握好這幾個模型的基礎。咱們經常喜歡簡潔的、生動的書來介紹苦澀的概念，那麼這本以「圖解」命名的網絡原理書將十分符合你的口味。

經過推薦本書，咱們還能夠感悟到：

不少理想的東西落入實際中後常會產生變體，學習的過程當中善於抓住重點，變體的原型便會顯露的出來。

其它相關書籍，能夠類比：

1. 《 圖解服務器端網絡架構 》
2. 《 圖解 HTTP 》

Node.JS 薦書品書(3+ 本)

《 深刻淺出 NodeJS 》

中文版出版時間：2013-12

JavaScript 從誕生之初就能夠運行在服務端上，只是沒有很好的展示機會。如今，NodeJS 終於將 JavaScript 在服務端上從新綻開開來。JavaScript 是單線程的，所以咱們須要事件機制和異步編程來支持非阻塞模型，這在傳統服務端語言裏都是不多用到的特性，從而讓 NodeJS 如此不同凡響。

這本書由國內做者樸靈所注，第一版了四年，依然是國內最好的講述 Node 的書籍。每一章選題鮮明，經過對進程線程、網絡協議、內存控制、前端路由的詳細講解，讓咱們體驗了更多的 Linux 和編程之美。

經過推薦本書，咱們還能夠感悟到：

只有對 Linux 內核機制、服務端編程的深刻掌握，才能寫出這樣棒的大前端書籍來，咱們學習的時候千萬不要設限本身，前端尤是如此。

其它相關書籍，能夠類比：

1. 《 Node 與 Express 開發 》
2. 《 精通 Linux 》

《 Node.js 硬實戰：115個核心技巧 》

中文版出版時間：2017-01

學習 Node 的時候，咱們總容易沉浸在 npm 倉庫帶來的各類有趣的第三方模塊上，Node 核心基礎的知識反而被疏忽。這本書既講述了大量的核心概念，有又不少的代碼示例，仔細閱讀，能讓咱們從對 Node 的一無所知到深刻淺出，最終編寫本身健壯的第三方模塊。

經過推薦本書，咱們還能夠感悟到：

關於講述實戰的書籍要慎重選擇，在閱讀過程當中要注意在大量的代碼中抓住重點。

其它相關書籍，能夠類比：

• 《 Node.js 微服務 》

《 SPA 設計與架構：理解單頁 Web 應用 》

中文版出版時間：2016-11

掌握好 JavaScript 的核心概念、設計模式、語言標準、模塊化開發以及 Node.JS 相關知識後，能夠看看這本講解 SPA (單頁面 Web 應用)開發的書。傳統服務器端的架構能夠分爲表現層、服務層、業務層和數據層，向客戶端返回渲染後的頁面。SPA 架構讓咱們能夠預先下載整個前端框架，渲染、前端路由等功能都能很好的在客戶端處理。

經過推薦本書，咱們還能夠感悟到：

SPA 帶來的時代，讓先後端數據的交流愈來愈須要注重接口的設計。咱們能夠用 RESTful 來設計咱們的接口；前端在開發時，也可使用 Mock 等技術來模擬後端還未上線的接口服務；先後端分工將再次高效起來。

其它相關書籍，能夠類比：

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

軟件工程薦書品書(1+ 本)

《 黑客與畫家：硅谷創業之父Paul Graham文集 》

中文版出版時間：2013-02

大前端開發離不開軟件工程領域，軟件工程又是整個計算機科學體系的一個篇章。在最後的「軟件工程薦書品書」章節，咱們以這本講述早期硅谷黑客故事的書籍爲引，將咱們的目光從新凝聚在整個行業之上。

經過推薦本書，咱們還能夠感悟到：

或許當咱們出生之時，這些故事註定成爲了咱們的歷史。將來是什麼，永遠沒人能肯定。在計算機裏，咱們能夠依據必定的科學觀，無中生有的創造着咱們想象的世界。尤爲在 Linux 推進的開源世界下，程序員間跨國際的平等交流史無前例，註定將會被記錄在歷史之上。

其它相關書籍，能夠類比：

1. 《 一路編程 》
2. 《 若爲自由故 自由軟件之父理查德 斯托曼傳 》
3. 《 只是爲了好玩：Linux之父林納斯自傳 》
4. 《 人月神話 》
5. 《 編程珠璣(第2版) 》
6. 《 浪潮之巔 》
7. 《 軟件隨想錄 》
8. 《 重構——改善既有代碼的設計 》
9. 《 程序員修煉之道:從小工到專家 》
10. 《 UNIX 編程藝術 》

嘗試構建大前端知識體系

很感謝你耐心地看到了這裏，本文的書單分享也就到了尾聲。細心的你讀到這裏會發現，每一個配書籍封面截圖的書籍都不是憑空分享出來的。就像在「JavaScript 薦書品書」章節中，咱們主要介紹了六本書——《 JavaScript 權威指南 》、《 JavaScript 語言精粹 》、《 JavaScript 異步編程 》、《 JavaScript 忍者祕籍 》、《 JavaScript 設計模式 》和《 深刻理解 ES6 》。這六本書又分別從詳細論述、概要凝練、異步開發、重點突破、設計模式和語言標準等角度進行了很好的填充。「其它相關書籍」也告訴咱們這六本並非惟一的選擇。編程語言不設限，學習方向不設限，讀書更得不設限。這時也就能從新呼應主題，來繪製出咱們專屬的書籍成長之路。

可見這些書籍是服務於具體知識點的，這些知識點又該以怎樣的形式有條理出如今咱們的面前呢？如下內容均由筆者整理，是爲臨稿，目的是開拓視野而不是諾列客觀事實，不具備任何官方性質，長期維護在個人 Github倉庫中，歡迎探討。

• HTML -> HTML5, CSS2.1 -> CSS3 -> SASS
• JavaScript -> ES3 -> ES5 -> ES6+
• PWA/SPA 前端 + NodeJS 服務端 + Nginx/Apache 服務器
• 前端數據層：TypeScript/Flow/PropTypes
• 應用架構層：MVC/MVP/MVVM
• 應用狀態層：Redux/Mobx/RxJS
• 路由管理層：History API/Hash
• 包管理：bower/npm/yarn
• 模塊化：CommonJS/RequireJS/AMD/CMD
• 組件化：JSX/Class
• 自動化：Grunt/Gulp/Webpack
• 腳手架工具：Yoman/creatshare-app-init
• 接口聯調：postman/mock/RESTful
• 持續集成：TravisCI/Webhook
• 單元測試：Jasmine/Mocha
• 移動原生應用：Hybrid/React Native
• 桌面客戶端：Electron

• Hello，我是韓亦樂，現任本科軟工男一枚。軟件工程專業的一路學習中，我有不少感悟，也享受持續分享的過程。若是想了解更多或能及時收到個人最新文章，歡迎訂閱個人我的微信號：韓亦樂。個人簡書我的主頁中，有個人訂閱號二維碼和 Github 主頁地址；個人知乎主頁 中也會堅持產出，歡迎關注。
• 本文內部編號經由個人 Github 相關倉庫統一管理；本文可能發佈在多個平臺但僅在上述倉庫中長期維護；本文同時採用【知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議】進行許可。