當我談前端進階時我談些什麼

當我談前端進階時我談些什麼

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

書中，他談到，跑步跟寫做同樣：都須要堅毅隱忍，追逐超越；都須要心無雜念，鍥而不捨。全書落筆之處，沒有浮華旖旎，而是娓娓道來迷惘、失敗和掙扎。

這本書名義上是在談跑步，倒是在我的創做低潮時期對突破的不斷思考。仔細想來，這樣的思考對於一位工程師也相當重要。

前端領域，入門相對簡單，但是想要「更上一層樓」卻難上加難，也就是咱們常說的「職業天花板較低」，君不見——市場上高級/資深前端工程師百裏挑一。其實，這固然未必徹底是壞事，一旦突破瓶頸，在技能上脫穎而出，即是更廣闊的空間。 那麼，如何從夯實基礎到突破瓶頸？

接下來就讓咱們一塊兒來討論下：當我談前端進階時我談些什麼。

直面自我——前端工程師的焦慮和迷茫

說到進階，我想先談談咱們每一個人心裏的焦慮和迷茫，正視這種情緒是學習的第一步。對於每個追求進步的人來講，瓶頸期總會在各個階段「如約而至」。早在公元前某年，莊子就說過：

吾生也有涯，而知也無涯。以有涯隨無涯，殆已！已而爲知者，殆而已矣！

而現現在，信息爆炸時代，信息量呈幾何級數增加，知識彷佛唾手可得。那麼：「該學什麼？」，「到底該怎麼學？」，「學完以後又該作什麼？」，大部分人都會在知識面前焦慮、迷茫。

一樣地，對於有必定工做經驗的工程師來講：

• 「我該如何避免類似的工做作三年，而不是具有了三年的工做經驗？」
• 「我該如何從繁雜而千篇一概的業務需求中，提煉技術點並總結提升？」
• 「我該如何爲團隊帶來更大的價值，體現經驗能力？」

可以正視並解決這幾個問題，將是更進一步的關鍵。但是這些困擾對前端工程師來講貌似來得更加猛烈：前端技術發展備受矚目，前端工程師變得愈加重要的背後是相關技術的不斷擴張和更新換代。所以，咱們比以往任什麼時候候都更須要主動學習。但據我觀察，目前網絡上的學習資料每每存在如下兩個問題：

• 過於碎片化，這類知識某種程度上只能成爲緩解焦慮的精神鴉片
• 追求短平快，大牛經驗、快速搞定「面經題目」，漸漸演變成爲跳槽加薪的興奮劑

坦白來講，我也是這些「學習資料」的蒐集者，若是沒有系統針對性地學習和反覆的刻意練習，那麼結果就是覺得收藏的是知識，其實收藏的是「知道」。覺得掌握了知識，其實只是囤積了一堆「知道」。

前端的大航海時代，有舊工具淘汰，更有新力量崛起

記得我剛接觸前端編程時，jQuery 風靡一時，其清新優雅的 DOM 操做、穩如磐石的兼容性處理、靈活高效的封裝和鏈式調用，讓人如沐春風。

彼時，我幼稚地覺得「這就是顛覆」，事實倒是「這只是開始」——隨着三大框架的崛起，技術更迭就像「暴風雨前的寧靜」，jQuery 忽然就被其餘「先進的生產力」拋在背後了。因而咱們看見各大平臺技術進行「改朝換代」，引領開發潮流。

這還只是一個類庫在前端浪潮中的興衰。再想一想 ES 語言規範的演進速度，HTML5 的擴張幅度，跨端從 Ionic 到 React Native 再到 Flutter，CSS 從基本佈局模型到彈性盒模型再到原生 Grid 方案，構建工具從 Grunt 到 Gulp 再到 webpack/Rollup......

前端開發有着與生俱來的混亂，須要咱們披荊斬棘，在實踐中一往無前

前端三大方向 JavaScript、CSS、 HTML 的背後是無盡的碎片化場景。前端是最貼近用戶的「戰線」，它基因裏就須要處理「大象萬千」。同時，無論是跨平臺仍是語言特性，它都會讓開發者感到迷茫：

• 「咱們該使用哪些 HTML 標籤以達到最佳的語義化？」
• 「咱們該如何面對不一樣終端的詭異問題，並保證體驗一致性？」
• 「咱們如何寫 JavaScript 作到 bug free？」
• 「this 亂七八糟，它到底指向誰？」
• ......

前端開發工程師有廣闊的將來，但「打鐵還需自身硬」

目前咱們正在經歷所謂的「資本寒冬」，無論是大廠、二線公司仍是創業團隊，「優化人員結構（裁人）」的新聞層出不窮。可是據我觀察，「高級前端工程師」的招聘需求卻「逆流而上」，具有高水平和經驗的開發者不管在任什麼時候候都備受追捧。所以，磨練技能、積累項目經驗將是全部前端工程師的核心訴求。

做爲從業者，我也在思考如何讓前端知識更有價值，如何突破瓶頸，進而實現進階。

**好了，到如今就到了軟文時間。受於平臺所託，有了這篇文章。在此以前的部分，是我對於現代前端的一些感想，以後部分是我作的一門課程《前端開發核心知識進階》
的介紹。若是不想浪費時間的讀者能夠直接關掉頁面，感興趣的朋友不妨繼續閱讀。**

基礎和進階，理論和實踐

當 GitChat 聯繫我想要打造一門系統而全面的前端進階課程時，我欣然接受。不光是由於想把本身在海外和 BAT 服務多年積累的經驗分享給你們，也是想把長時間以來收藏的「乾貨」梳理一遍，系統性整理輸出，和你們一塊兒總結提升。最終，就是呈如今你們面前的這門《前端開發核心知識進階》。

但願這門課程不只詳述「知識」，更能體現編程「智慧」，能讓全部訂閱的朋友們一塊兒思考，一塊兒進步。

說到課程特點，我想結合上面提到的一些關鍵點來介紹。

對於前端發展的瞬息萬變，我但願這門課程，在重視「亙古不變」的語言基礎上，力求爲你們介紹更先進的開發技術。好比服務端渲染，好比 HTTP 3.0，好比使用 Lerna、yarn workspaces 構建 monorepo 項目，好比框架演進和虛擬 DOM，等等。

對於前端開發工程師的發展，這門課程中，我將穿插大量經典面試例題，其中既包括我做爲 BAT 面試官的「私房題」，又涵蓋我做爲面試者碰見的「經典題，以及和業界前輩討論過的「開放題」。在平時開發和學習中，我也收藏積累了大量精品文章，會一併分享給你們。

對於前端工程師的將來前景，我認爲從開發菜鳥到資深工程師，除了主觀能動性之外，一個關鍵瓶頸在於「不是每一個人都能有機會接觸到好項目」。這裏的「好項目」是指相似「項目重構」、「類庫遷移」、「複雜應用設計」、「疑難 bug 定位」等對開發者基礎和設計能力有高要求的項目。所以我但願，這門課程，咱們除了剖析理論，更加註重經驗指導和最佳實踐。

同時，在這門課程中，我會插入大量代碼設計模式、函數式、源碼分析、組件設計和封裝、開源庫解讀、項目代碼組織等內容，也會手把手帶領你們查閱 issue、changelog，從社區中汲取精華。構建更爲真實的開發場景，直擊實踐中的高頻痛點。

好比：

• 《性能監控和錯誤收集與上報》是分析多種場景和業界解決方案的產出；
• 《深刻淺出模塊化（含 tree shaking）》中，實戰觀摩 webpack 打包結果，對比 Rollup 解決方案，同時分析 tree shaking 的實施細節；
• 《前端工程化背後的項目組織設計》探索究竟該如何組織架構代碼，解放開發效率；
• 《不可忽視的網絡安全：單頁應用鑑權設計》不去講解 CSRF、XSS 等「死概念」，而是從鑑權角度出發，讓讀者對安全有一個立體認知。

課程簡介——8 部分 36 個主題 50 節

• 第一部分 JavaScript 基礎強化

  第二部分 JavaScript 語言進階

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

  其中前三部分介紹 JavaScript、 HTML、CSS ，對於一些熱點、重點話題，好比「this 指向」、「閉包、做用域、執行上下文」，以及一些高頻考察點進行了深刻分析；對面向對象、原型與原型鏈、異步這些內容進行強化，從實現的角度，結合具體實例分析 Promise；結合 ES Next，從 ES 的發展來看語言的演進。

• 第四部分 前端框架

  接下來進入了前端框架部分，咱們以 React 爲主，分析框架對前端到底意味着什麼，以及咱們應該如何學習 React。事實上，對 React 的學習，不能只停留在「會用」的層面，其設計原理和思想演進，對於培養編程思惟很是有益，也有利於學習者能從更高的角度看待問題。

• 第五部分 前端工程化

  資深程序員永遠逃不開的工做之一就是「基礎構建」、「項目架構」。前端工程化部分咱們從代碼組織談起，從規範實施談起，結合 webpack、Lerna 等工具，爲你們還原一個真實的「基建」場景，共同探索學習。

• 第六部分 性能優化

  性能優化是理論和實踐相結合的重要話題。

  咱們須要大量理論知識：明白緩存策略，瞭解瀏覽器渲染特色，清楚 JavaScript 異步單線程對性能意味着什麼，還要了解網絡傳輸知識，等等。咱們也須要大量實踐經驗：用得了 Chrome Devtool 分析火焰圖，跑得出準確的 benchmark，知道防抖和節流的區別，懂得資源合併、拆分的利弊，瞭解業界最新性能優化方案，等等。

  這一部分，咱們除了介紹重要大量知識點外，也會結合代碼/項目實例來展開。

• 第七部分 編程思惟和算法

  前端開發離不開編程基礎，培養良好的編程思惟，瞭解基本的算法知識，是每個工程師所必須具有的。在這一部分，咱們用 JavaScript 來描述多種設計模式，設計模式並非紙上談兵，實實在在地存在於咱們的業務代碼當中；手把手帶你們用 JavaScript 處理各類數據，說到底前端仍是處理數據，展現 UI；固然更少不了對一些常見算法的強化。

• 第八部分 網絡知識

  做爲一名前端開發者，不瞭解互聯網傳輸的奧祕，不清楚網絡細節是難以進階的。網絡知識關聯着性能優化、先後端協做等核心環節，所以這一部分咱們將重點強化網絡基礎。

• 結束語 軟技巧

  學習進步離不開社區的力量，「授人予魚不如授人予漁」。在課程的最後，我會講述個人學習方法：如何投身到社區當中，與廣大開發者一塊兒討論；如何閱讀前人的經典思想，站在巨人的肩上看得更遠；如何解讀開源庫，從中汲取營養；如何在面試和述職當中，正確地表達彙報.....

PC 端點擊瞭解更多《前端開發核心知識進階》

最後，也但願和每一位讀者保持長線聯繫，一塊兒討論問題，共同進步。