摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發(fā)布在上。發(fā)布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設(shè)計快速響應的網(wǎng)絡應用，而非簡單的頁面。

本文最早為雙十一而作，原標題“雙 11 大前端工程師讀書清單”，以付費的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進行了深入的交流，現(xiàn)免費分享到這里，不足之處歡迎指教，也可以在我的 GitChat 讀者圈中進行提問，原文如下。

發(fā)布完本次 Chat 預告后，捕捉到了一個友善的吐槽：“讀書清單也要收費？”。的確，只是一個列表的話，你完全不必點進來，我也不必在這里大費周折的推薦給你。但你還是看到這篇文章了，因為你懂什么是博客，你也能理解知識付費對作者的自發(fā)性要求；更或許你認識我，看過我的《如何寫一篇優(yōu)質(zhì)的博客》而愿意相信本文的質(zhì)量——無論哪種，感謝你的到來，開始干貨吧。

本場 Chat 將嘗試建立「雙 11 期間，大前端領(lǐng)域有趣的買書薦書交流區(qū)」，并圍繞以下書籍主題進行詳細探討：

從軟件工程到大前端開發(fā)
HTML、CSS 薦書品書
JavaScript 薦書品書
計算機網(wǎng)絡薦書品書
Node.JS 薦書品書
軟件工程薦書品書
嘗試構(gòu)建大前端知識體系

同時，本場 Chat 的讀者圈也將長期維護，一起與前端領(lǐng)域的大牛們進行激烈的思維碰撞，在交流中繪制出我們專屬的書籍成長之路。

這次我們依舊從軟件工程說起。從軟件危機的誕生到現(xiàn)在，行業(yè)領(lǐng)頭的軟件工程師們給我們描繪了這么一幅專業(yè)技能培養(yǎng)方案：

對于沒有了解過軟件開發(fā)的學生，學的第一門是《計算機導論與程序設(shè)計基礎(chǔ)》。導論部分論述了計算機發(fā)展史、計算機基本組成和計算機網(wǎng)絡等概念，后期的分科都離不開這個大范圍；程序設(shè)計基礎(chǔ)部分通過快速了解 Python 語法，完成能寫出最簡潔的輸入輸出、分支/循環(huán)結(jié)構(gòu)的階段性目標。

接下來詳細學習的是面向過程的代表，C 語言。通過重溫 Python 中遇到的輸入輸出流、分支循環(huán)結(jié)構(gòu)，再引入程序編譯鏈接原理、指針/鏈接等在 C 語言中獨特的數(shù)據(jù)類型和數(shù)據(jù)結(jié)構(gòu)，讓我們打下堅實的編程基礎(chǔ) [1]。

[1]：在這個階段，我們或多或少會經(jīng)歷的挫折有：

安裝各種集成開發(fā)環(huán)境；
安裝 Linux 虛擬機/雙系統(tǒng)；
調(diào)試各種 C 語言 Bug，經(jīng)常懷疑是程序錯了而不是你錯了；

只要耐心一點，以上的經(jīng)歷對我們編程習性的養(yǎng)成都很有幫助。

第一年很快的過去后，大二和大三階段的課程各個擲地有聲——數(shù)據(jù)結(jié)構(gòu)、算法設(shè)計、數(shù)據(jù)庫原理、操作系統(tǒng)、計算機網(wǎng)絡，內(nèi)容量的安排上足以讓我們有能力去企業(yè)進行實習。

可是，這和大前端開發(fā)有什么關(guān)系？

在整個軟件工程的專業(yè)培養(yǎng)方案里，并沒有任何局限于 Web 開發(fā)領(lǐng)域的蹤跡，更沒有局限于前端開發(fā)。況且，前端開發(fā)被業(yè)界重視的時間并不是很長 [2]。因此隸屬于軟件開發(fā)一個分支的前端開發(fā)，急需大量對計算機體系有充足了解的人才的加入。為了不被“學前端人很多”現(xiàn)象造成的泡沫沖擊，我們就得拿起計算機科學素養(yǎng)來抵抗。

[2]：使用 XMLHTTPRequest 技術(shù)的 Ajax 劃分出了一個前后端分離的時代，從此業(yè)務邏輯的處理逐步向客戶端轉(zhuǎn)移，服務端更多的提供數(shù)據(jù)接口。

中文版出版時間：2013-09

前端開發(fā)走在用戶交互體驗變革的最前沿，我們所見的一切實體都可以被素描，被構(gòu)建。鍛煉我們視覺的敏銳性、發(fā)現(xiàn)瑕疵并提出自己的設(shè)計方案，成為了視覺工程師的獨特魅力。前端工程師與視覺工程師有很大的交集之處。

本書使用了豐富的圖片和漸進的過程，化繁為簡，將我們帶入了 Web 開發(fā)領(lǐng)域。同時，這本書每一頁的排版布局都很精彩，看完本書，我們在布局設(shè)計中也將會有源源不斷靈感——這也是在眾多“Head First” 系列的編程書籍下，只推薦這本書的原因所在。

通過推薦本書，我們還可以感悟到：

排版印刷行業(yè)、視覺設(shè)計領(lǐng)域與前端開發(fā)密不可分。
化繁為簡的思想，可以落實到我們寫作上，也更可以吸收進日常的代碼設(shè)計之中。

其它相關(guān)書籍，可以類比：

《 HTML & CSS設(shè)計與構(gòu)建網(wǎng)站 》

《 HTML5與CSS3權(quán)威指南(第3版) 》

中文版出版時間：2008-01

CSS 更多的是門藝術(shù)，而非科學，需要我們在大量實踐之中感受真知。至于更好的實踐，我們可以通過這本權(quán)威指南進行一場細致入微的了解。從選擇器、層疊/繼承、文字/字體到盒模型、表格布局，本書講述的 CSS 知識并不落伍，是了解 CSS3 之前版本的最佳手冊。

通過推薦本書，我們還可以感悟到：
前端新手要多讀 W3C 官方的 CSS 手冊，能做到的人并不多。

其它相關(guān)書籍，可以類比：

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

《 超越 CSS：Web 設(shè)計藝術(shù)精髓 》

中文版出版時間：2017-02

各種分辨率終端的普及，對我們的網(wǎng)頁適應性提出了更高的要求。也因此 HTML5 標準的新特性和語義化、CSS3 標準的自帶動畫、新式布局、響應式圖片、媒體查詢等概念呼之即出。

通過對這本講解響應式 Web 設(shè)計書籍的邊看邊敲，我們用代碼實現(xiàn)響應式設(shè)計的能力將有很大的提高。這也再次應證了最初的那句話，前端開發(fā)走在用戶交互體驗變革的最前沿，“響應式”功不可沒。

通過推薦本書，我們還可以感悟到：

時代對技術(shù)提出了新要求，新技術(shù)又促進了時代的飛速發(fā)展。
學好 CSS 基礎(chǔ)的下一步，就是將自己曾經(jīng)的頁面重構(gòu)成響應式的。

其它相關(guān)書籍，可以類比：

《 學習響應式設(shè)計 》

《 響應式 Web 》

中文版出版時間：2012-04

如果說我們想打好 JavaScript 基礎(chǔ)，沒有什么其他書籍可以比的過這本《 JavaScript 權(quán)威指南》了：一千頁的厚度，一百四的原價，每一節(jié)都舍不得錯過。

這本權(quán)威指南的章節(jié)安排分為兩大部分：“JavaScript 語言核心”和“客戶端 JavaScript”。正如學習編譯原理要從詞法開始分析，前半部分從 JavaScript 的詞法結(jié)構(gòu)開始講起。緊接著有基本數(shù)據(jù)類型、對象、數(shù)組、函數(shù)、類與模塊、正則表達式等章節(jié)，涵蓋了基礎(chǔ)語法的絕大部分。

通過推薦本書，我們還可以感悟到：
“權(quán)威指南”是重磅級的存在，只看不敲沒有用，只敲不想也無意義，逐章而破，反復重溫。

其它相關(guān)書籍，可以類比：

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

中文版出版時間：2012-09

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

由于 JavaScript 最初是 10 天設(shè)計出來的，我們更應在學習的過程中時刻“取其精華，去其糟粕”。這本書便成了 ES5 標準及其之前標準的精華手冊。同時，書中“鐵路圖”的引入和 JSHint 的引入向我們提倡了很好的代碼規(guī)范建議。遺憾的是，JSHint 由于作者推薦的規(guī)范沒有定制性，逐步被后來的 ESLint 取代。

通過推薦本書，我們還可以感悟到：

一門語言的流行總有其優(yōu)點所在，缺點也不會例外。掌握更多的編程語言，會讓我們對“取其精華，去其糟粕”有更深的理解。
直到現(xiàn)在，ECMAScript3 和 ECMAScript5 標準依然廣泛存在，在學習 ECMAScript6 的新特性前，不要忘了重溫這些概念。

其它相關(guān)書籍，可以類比：

《 你不知道的 JavaScript 》

中文版出版時間：2014-04

IE 瀏覽器并不是一無是處的，它最早地向開發(fā)者提供了 XMLHTTPRequest 接口，并隨著谷歌 Gmail 對其驚艷的實現(xiàn)，Ajax 快速普及，并開啟了前后分離的新時代。這本書便從 JavaScript 的異步編程講起，幫助我們設(shè)計快速響應的網(wǎng)絡應用，而非簡單的頁面。

仔細看完這本書，如果有人向我們請教關(guān)于“如何理解 JavaScript 的單線程機制”、“JavaScript 異步編程的解決方案有哪些”的時候，我們便能水到渠成的說出個一二三來。只是不要忘了，技術(shù)發(fā)展到現(xiàn)在，Ajax 也只是前后分離的一種實現(xiàn)方式，我們還有 Fetch API，我們還有 Node 網(wǎng)絡請求模塊。

通過推薦本書，我們還可以感悟到：
看來，每當談到大前端開發(fā)，我們的關(guān)注點應更多的轉(zhuǎn)在 Web 應用上了。

其它相關(guān)書籍，可以類比：

還是本書，必讀之作

中文版出版時間：2015-10

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

通過推薦本書，我們還可以感悟到：
初學階段感覺沒太大用處的技術(shù)點，或許只是我們還沒有遇到使用情景，因此不要松懈。

其它相關(guān)書籍，可以類比：

《 高性能 JavaScript 》

《 JavaScript 啟示錄 》

《 編寫可維護的 JavaScript 》

《 JavaScript 函數(shù)式編程 》

《 學習 JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法(第2版) 》

中文版出版時間：2013-06

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

目錄簡潔明了，向我們提供了設(shè)計模式的學習路線圖，這里作出引用：

第一篇，面向?qū)ο缶幊蹋?/p>

第二篇，創(chuàng)建型設(shè)計模式：其中包括六種具體模式；

第三篇，結(jié)構(gòu)型設(shè)計模式：其中包括七種具體模式；

第四篇，行為型設(shè)計模式：其中包括十一種具體模式；

第五篇，技巧型設(shè)計模式：其中包括八種具體模式；

第六篇，架構(gòu)型設(shè)計模式：其中包括六種具體模式。

通過推薦本書，我們還可以感悟到：
除了“化繁為簡”外，還有“風趣幽默”可以加入到我們的日常寫作與編程之中。

其它相關(guān)書籍，可以類比：

《 JavaScript 設(shè)計模式與開發(fā)實踐 》

《 JavaScript 設(shè)計模式 - 奧斯馬尼 》

《 JavaScript框架設(shè)計(第2版) 》

中文版出版時間：2017-06

開發(fā)者們正在積極地為 Web 瀏覽器以及 NodeJS 這些 JavaScript 宿主環(huán)境添加 ECMAScript6 的新功能，這是我們步入 JavaScript 應用開發(fā)的不可缺失的一環(huán)。塊級作用域綁定、解構(gòu)賦值、迭代器與生成器、Promise 與異步編程、代理與反射，曾因為激進而未做發(fā)布的 ECMAScript4 里，原來早都想到了這些概念，現(xiàn)在終得落實。本書由《 JavaScript 高級程序設(shè)計 》的作者撰寫。

通過推薦本書，我們還可以感悟到：
ECMAScript6+ 更好的支持了前端自動化開發(fā)和 JavaScript 應用開發(fā)，先從扎實 ECMAScript5 開始學起吧！

其它相關(guān)書籍，可以類比：

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

中文版出版時間：2017-01

“在瀏覽器中輸入網(wǎng)址到看到網(wǎng)頁內(nèi)容”過程中，到底發(fā)生了什么？”一問經(jīng)常會被提及，于是有了這本嚴謹又不失有趣的書，完完整整的講解了整個過程我們所要了解的技術(shù)點。

客戶端：Web 瀏覽器、TCP/IP、網(wǎng)卡驅(qū)動、集線器、路由器

服務端：防火墻、緩存服務器、網(wǎng)卡驅(qū)動、TCP/IP、Web 服務端程序

如果上面的關(guān)鍵字你不能輕松的說出它們的原理和聯(lián)絡的話，就看看這本這本書吧。

通過推薦本書，我們還可以感悟到：
一個簡單的問題，真的可以深挖出一本書來，如果那是由你寫出來的話，就更不一樣了。

其它相關(guān)書籍，可以類比：

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

中文版出版時間：2012-03

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

通過推薦本書，我們還可以感悟到：
圖文生動的書縱然有趣，能通讀這類更專業(yè)的計算機書籍也是一種實力。

其它相關(guān)書籍，可以類比：

《 計算機網(wǎng)絡:自頂向下方法 》

《 TCP/IP詳解 》

中文版出版時間：2013-07

從理想的 OSI 網(wǎng)絡模型到實際的 TCP/IP 模型，每個層級都有很多協(xié)議在進行管理。應用層面向我們封裝好了底層細節(jié)，只需要我們互相通過接口協(xié)議來通信。縱使這樣，大前端工程師也應掌握好這幾個模型的基礎(chǔ)。我們常常喜歡簡潔的、生動的書來介紹苦澀的概念，那么這本以“圖解”命名的網(wǎng)絡原理書將十分符合你的口味。

通過推薦本書，我們還可以感悟到：
很多理想的東西落入實際中后常會產(chǎn)生變體，學習的過程中善于抓住重點，變體的原型便會顯露的出來。

其它相關(guān)書籍，可以類比：

《 圖解服務器端網(wǎng)絡架構(gòu) 》

《 圖解 HTTP 》

中文版出版時間：2013-12

JavaScript 從誕生之初就可以運行在服務端上，只是沒有很好的展現(xiàn)機會。現(xiàn)在，NodeJS 終于將 JavaScript 在服務端上重新綻放開來。JavaScript 是單線程的，因此我們需要事件機制和異步編程來支持非阻塞模型，這在傳統(tǒng)服務端語言里都是很少用到的特性，從而讓 NodeJS 如此與眾不同。

這本書由國內(nèi)作者樸靈所注，初版了四年，依然是國內(nèi)最好的講述 Node 的書籍。每一章選題鮮明，通過對進程線程、網(wǎng)絡協(xié)議、內(nèi)存控制、前端路由的詳細講解，讓我們體驗了更多的 Linux 和編程之美。

通過推薦本書，我們還可以感悟到：
只有對 Linux 內(nèi)核機制、服務端編程的深入掌握，才能寫出這樣棒的大前端書籍來，我們學習的時候千萬不要設(shè)限自己，前端尤是如此。

其它相關(guān)書籍，可以類比：

《 Node 與 Express 開發(fā) 》

《 精通 Linux 》

中文版出版時間：2017-01

學習 Node 的時候，我們總?cè)菀壮两?npm 倉庫帶來的各種有趣的第三方模塊上，Node 核心基礎(chǔ)的知識反而被疏忽。這本書既講述了大量的核心概念，有又很多的代碼示例，仔細閱讀，能讓我們從對 Node 的一無所知到深入淺出，最終編寫自己健壯的第三方模塊。

通過推薦本書，我們還可以感悟到：
關(guān)于講述實戰(zhàn)的書籍要慎重選擇，在閱讀過程中要注意在大量的代碼中抓住重點。

其它相關(guān)書籍，可以類比：

《 Node.js 微服務 》

中文版出版時間：2016-11

掌握好 JavaScript 的核心概念、設(shè)計模式、語言標準、模塊化開發(fā)以及 Node.JS 相關(guān)知識后，可以看看這本講解 SPA (單頁面 Web 應用)開發(fā)的書。傳統(tǒng)服務器端的架構(gòu)可以分為表現(xiàn)層、服務層、業(yè)務層和數(shù)據(jù)層，向客戶端返回渲染后的頁面。SPA 架構(gòu)讓我們可以預先下載整個前端框架，渲染、前端路由等功能都能很好的在客戶端處理。

通過推薦本書，我們還可以感悟到：
SPA 帶來的時代，讓前后端數(shù)據(jù)的交流越來越需要注重接口的設(shè)計。我們可以用 RESTful 來設(shè)計我們的接口；前端在開發(fā)時，也可以使用 Mock 等技術(shù)來模擬后端還未上線的接口服務；前后端分工將再次高效起來。

其它相關(guān)書籍，可以類比：

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

中文版出版時間：2013-02

大前端開發(fā)離不開軟件工程領(lǐng)域，軟件工程又是整個計算機科學體系的一個篇章。在最后的“軟件工程薦書品書”章節(jié)，我們以這本講述早期硅谷黑客故事的書籍為引，將我們的目光重新凝聚在整個行業(yè)之上。

通過推薦本書，我們還可以感悟到：
或許當我們出生之時，這些故事注定成為了我們的歷史。未來是什么，永遠沒人能確定。在計算機里，我們可以依據(jù)一定的科學觀，無中生有的創(chuàng)造著我們想象的世界。尤其在 Linux 推動的開源世界下，程序員間跨國際的平等交流前所未有，注定將會被記錄在歷史之上。

其它相關(guān)書籍，可以類比：

《 一路編程 》

《 若為自由故 自由軟件之父理查德 斯托曼傳 》

《 只是為了好玩：Linux之父林納斯自傳 》

《 人月神話 》

《 編程珠璣(第2版) 》

《 浪潮之巔 》

《 軟件隨想錄 》

《 重構(gòu)——改善既有代碼的設(shè)計 》

《 程序員修煉之道:從小工到專家 》

《 UNIX 編程藝術(shù) 》

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

可見這些書籍是服務于具體知識點的，這些知識點又該以怎樣的形式有條理出現(xiàn)在我們的面前呢？以下內(nèi)容均由筆者整理，是為臨稿，目的是開拓視野而不是諾列客觀事實，不具有任何官方性質(zhì)，長期維護在我的 Github倉庫中，歡迎探討。

HTML -> HTML5, CSS2.1 -> CSS3 -> SASS

JavaScript -> ES3 -> ES5 -> ES6+

PWA/SPA 前端 + NodeJS 服務端 + Nginx/Apache 服務器

前端數(shù)據(jù)層：TypeScript/Flow/PropTypes

應用架構(gòu)層：MVC/MVP/MVVM

應用狀態(tài)層：Redux/Mobx/RxJS

路由管理層：History API/Hash

包管理：bower/npm/yarn

模塊化：CommonJS/RequireJS/AMD/CMD

組件化：JSX/Class

自動化：Grunt/Gulp/Webpack

腳手架工具：Yoman/creatshare-app-init

接口聯(lián)調(diào)：postman/mock/RESTful

持續(xù)集成：TravisCI/Webhook

單元測試：Jasmine/Mocha

移動原生應用：Hybrid/React Native

桌面客戶端：Electron

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