如何突破前端開發技術瓶頸

日本作家村上春樹寫過一本富有哲理的書—《當我談跑步時我談些什麼》。

在書中，他談到，跑步跟寫作一樣，都需要堅毅隱忍，追逐超越；都需要心無雜念，持之以恆。全書落筆之處，沒有浮華旖旎，而是將迷惘、失敗和掙扎娓娓道來。

這本書名義上是在談跑步，實際卻是作者在個人創作低潮時期對突破進行的不斷思考。仔細想來，這樣的思考對於一位工程師也非常重要。

前端領域，入門相對簡單，可是想要「更上一層樓」卻難上加難，市場上的進階/ 資深前端工程師鳳毛麟角。這當然未必是壞事，一旦突破瓶頸，在技能上脫穎而出，便能擁有更廣闊的空間。那麼，如何從夯實基礎到突破瓶頸呢？

接下來我們就來討論一下，目前端工程師需要進階時，應該學些什麼。

說到進階，我想先談一談我們每個人內心的焦慮和迷茫，正視這種情緒是學習的第一步。對每一個追求進步的人來說，瓶頸期總會在各個階段「如約而至」。早在戰國時期，莊子在《庖丁解牛》中就說：「吾生也有涯，而知也無涯。以有涯隨無涯，殆已！已而為知者，殆而已矣！」而如今，在這個資訊爆炸的時代，資訊量呈幾何級數增長，知識似乎唾手可得。那麼該學什麼，到底該怎麼學，學完之後又該做什麼？大部分人都會在知識面前焦慮、迷茫。

同樣，具有一定工作經驗的工程師也面臨著很多疑慮。

■ 該如何避免相似的工作做了 5 年，卻無法具備 5 年的工作經驗？

■ 該如何從繁雜而千篇一律的業務需求中提煉技術點並加強？

■ 該如何為團隊帶來更大的價值，表現經驗和能力？

這些疑慮對前端工程師來說似乎來得更加猛烈：前端技術發展備受矚目，前端工程師變得越發重要的背後是相關技術的不斷進步和更新疊代。因此，我們比以往任何時候都更需要主動學習。

但據我觀察，目前網路上的學習資料常常存在以下兩個問題。

■ 過於碎片化，這種知識在某種程度上只能成為緩解焦慮的「精神鴉片」。

■ 追求速成，高手經驗、快速搞定「面試題目」等內容漸漸演變成跳槽加薪的「興奮劑」。

技術進階是一個系統、曲折的過程。每個學習者所接觸的知識內容和其背後的原理組成了他的思維方式。短期速成的內容或大量碎片化的知識很難幫助我們進行深度思考。坦白來說，我也是這些「學習資料」的搜集者，如果沒有系統且有針對性的學習和反覆刻意的練習，那麼結果就是，以為收藏的是知識，其實收藏的是「知道」；以為掌握了知識，其實只是囤積了一堆「知道」。

我想把自己在海外和BAT 工作多年累積的經驗分享給大家，也想把長時間以來收藏的「好料」整理一遍，系統整理輸出，和大家一起進步。因此這本書就誕生了。

愛因斯坦說過：「只是學習他人的智慧並不足夠，你需要自己想明白才行。花時間記錄、通盤考慮和深入思考你學到的東西。」

海倫• 凱勒說過：「知識使人進步，而智慧使人得道。」

希望本書不僅詳述了「知識」，更能表現程式設計「智慧」，讓所有讀者朋友一起思考，一起進步。

如何突破前端開發技術瓶頸

日本作家村上春樹寫過一本富有哲理的書—《當我談跑步時我談些什麼》。

在書中，他談到，跑步跟寫作一樣，都需要堅毅隱忍，追逐超越；都需要心無雜念，持之以恆。全書落筆之處，沒有浮華旖旎，而是將迷惘、失敗和掙扎娓娓道來。

這本書名義上是在談跑步，實際卻是作者在個人創作低潮時期對突破進行的不斷思考。仔細想來，這樣的思考對於一位工程師也非常重要。

前端領域，入門相對簡單，可是想要「更上一層樓」卻難上加難，市場上的進階/ 資深前端工程師鳳毛麟角。這當然未必是壞事，一旦突破瓶頸，在技能上...

第一部分
JavaScript 基礎強化

01 一網打盡this，對執行上下文說Yes
this 到底指向誰
實戰例題分析
開放例題分析
歸納

02 「老司機」也會在閉包上翻車
基礎
例題分析
歸納

03 我們不背誦API，只實現API
jQuery offset 方法實現
陣列reduce 方法的實現
實現compose 方法的幾種方案
apply、bind 進階實現
歸納

04 JavaScript 高頻考點及基礎題庫
JavaScript 資料類型及其判斷
JavaScript 資料類型及其轉換
JavaScript 函數參數傳遞
cannot read property of undefined
問題解決方案
type.js 原始程式解讀
歸納

第二部分
JavaScript 語言進階

05 非同步不可怕，「死記硬背」+ 實作拿下
非同步流程初體驗
紅綠燈任務控制
請求圖片進行預先載入
setTimeout 相關考驗
巨任務和微任務
歸納

06 你以為我真的想讓你手寫Promise 嗎
從「Promise 化」一個API 談起
Promise 初見雛形
Promise 實現狀態增強
Promise 非同步實現增強
Promise 細節增強
Promise then 的鏈式呼叫
鏈式呼叫的初步實現
鏈式呼叫的增強實現
Promise 穿透實現
Promise 靜態方法和其他方法實現
歸納
07 物件導向和原型——永不過時的話題
實現new 沒有那麼容易
如何優雅地實現繼承
jQuery 中的物件思想
類別繼承和原型繼承的區別
物件導向在實戰場景中的應用
歸納

08 究竟該如何學習與時俱進的ES
增加新特性的必要性
學習新特性的正確「姿勢」
新特性可以做些什麼有趣的事
Babel 編譯對程式做了什麼
歸納

第三部分
不可忽視的HTML 和CSS

09 前端面試離不開的「面子工程」
如何了解HTML 語義化
BFC 背後的版面配置問題
透過多種方式實現置中
歸納

10 進擊的HTML 和CSS
進擊的HTML
不可忽視的Web components
行動端HTML5 注意事項歸納
CSS 變數和主題切換優雅實現
CSS Modules 理論和實戰
歸納

11 響應式版面配置和Bootstrap的實現分析
上帝角度—響應式版面配置轉換方案
真實線上轉換案例分析
Bootstrap 光柵實現想法
橫向螢幕轉換及其他細節問題
面試題：% 相對於誰
深入：flex 版面配置和傳統版面配置的效能比較
歸納

第四部分
前端架構

12 觸類旁通多種架構
響應式架構基本原理
範本編譯原理介紹
發佈/ 訂閱模式簡單應用
MVVM 融會貫通
揭秘虛擬DOM
歸納

13 你真的懂React 嗎
神奇的JSX
你真的了解非同步的this.setState嗎
原生事件和React 合成事件
請不要再背誦diff 演算法了
element diff 的那些事
加上key 就一定「效能最佳」嗎
歸納

14 揭秘React 真諦：元件設計
單一職責沒那麼簡單
元件通訊和封裝
組合性是靈魂
副作用和（準）純元件
元件可測試性
元件命名是意識和態度問題
歸納

15 揭秘React 真諦：資料狀態管理
資料狀態管理之痛
Redux 到底怎麼用
Redux 的「罪與罰」
我們到底需要怎樣的資料狀態管理
歸納

16 React 的現狀與未來
React 現狀分析
從React Component 看React 發展史
顛覆性的React hook
值得關注的其他React 特性
歸納

17 同構應用中你所忽略的細節
包裝環境區分
注水和脫水
請求認證處理
樣式問題處理
meta tags 繪製
404 處理
安全問題
效能最佳化
歸納

18 透過架構和類別庫，我們該學會什麼
React 和Vue：神仙打架
新版本發佈的思考
從架構再談基礎
歸納

第五部分
前端專案化

19 深入淺出模組化
模組化簡單概念
模組化發展歷程
ES 原生時代
未來趨勢和思考
歸納

20 webpack 工程師和前端工程師
webpack 到底將程式編譯成了什麼
webpack 工作基本原理
探秘並撰寫webpack loader
探秘並撰寫webpack plugin
webpack 和Rollup
綜合運用
歸納

21 前端專案化背後的專案小組織設計
大型前端專案的組織設計
使用Lerna 實現monorepo
分析一個專案遷移案例
依賴關係簡介
複雜依賴關係分析和處理
使用yarn workspace 管理依賴關係
歸納

22 程式標準工具及技術設計
自動化工具巡禮
工具背後的技術原理和設計
自動化標準與團隊建設
歸納

第六部分
效能最佳化

23 效能監控和錯誤收集與上報效能監控指標
FMP 的智慧獲取演算法
效能資料取得
錯誤訊息收集
效能資料和錯誤訊息上報
無侵入和效能人性化的方案設計
歸納

24 如何解決效能最佳化問題
開放例題實戰
程式例題實戰
歸納

25 以React 為例，談談架構和效能
架構的效能到底指什麼
React 的虛擬DOM diff
提升React 應用效能的建議
React 效能設計亮點
從Vue 3.0 動靜結合的Dom diff談起
歸納

第七部分
程式設計思維和演算法

26 揭秘前端設計模式
設計模式到底是什麼.
設計模式原則
設計模式的3 大類型和23種策略
歸納

27 無處不在的資料結構
資料結構和學習方法概覽
堆疊和佇列
鏈結串列
鏈結串列實現
樹
圖
雜湊表
雜湊表的實現
歸納

28 古老又新潮的函數式
函數式和高品質函數
柯里化分析
偏函數
歸納

29 那些年常考的前端演算法
前端和演算法
演算法的基本概念
V8 引擎中排序方法的奧秘和演進
快速排序和插入排序
排序的穩定性
Timsort 實現
實戰
演算法學習
歸納

30 分析一道常見面試題
題意分析
想法與解答
再談流程控制和中介軟體
歸納

第八部分
網路知識

31 快取誰都懂，一問都發呆
快取概念與分類
流程圖
快取和瀏覽器操作
快取相關面試題目
快取實戰
實現一個驗證快取的輪子
歸納

32 HTTP 的深思
HTTP 的誕生
HTTP 的現狀和痛點
HTTP 2.0 的未來已經到來
從即時通訊系統看HTTP 發展
相關深度面試題目
歸納

33 不可忽視的前端安全：單頁應用驗證設計
單頁應用驗證簡介
單頁應用驗證實戰
採用Authentication cookie實現驗證
混合使用JWT 和cookie進行驗證
歸納

A 結束語
融入社區
自我修養
寫在最後

第一部分
JavaScript 基礎強化

01 一網打盡this，對執行上下文說Yes
this 到底指向誰
實戰例題分析
開放例題分析
歸納

02 「老司機」也會在閉包上翻車
基礎
例題分析
歸納

03 我們不背誦API，只實現API
jQuery offset 方法實現
陣列reduce 方法的實現
實現compose 方法的幾種方案
apply、bind 進階實現
歸納

04 JavaScript 高頻考點及基礎題庫
JavaScript 資料類型及其判斷
JavaScript 資料類型及其轉換
JavaScript 函數參數傳遞
cannot read property of undefined
問題解決方案
type.js 原始程式解讀
...