前言

為什么要寫這本書

筆者學習JavaScript語言并在前端開發領域工作若干年以后，發現了一些有趣的現象。例如，很多不了解前端的開發者都認為前端很簡單，因為主流的框架都提供了完備的腳手架工具，開發者很容易初始化一個前端項目，只要瀏覽一下官方文檔，復制、粘貼一些示例代碼并按照自己的業務邏輯進行相應的定制和修改就可以了，即使不是專業的前端工程師，也可以很快實現一個有模有樣的網站或者應用程序，在他們的認知里，這就是前端的全部。對此，經驗尚淺的前端工程師幾乎無力反駁，因為他們日常工作里所做的事情大抵如此，看起來非常容易，這使得許多前端工程師在團隊里沒有話語權，成為真正意義上的“碼農”，升職加薪的機會就更不用想了。

很多新人在社區里咨詢如何實現個人技術的積累或突破瓶頸，有經驗的工程師都會推薦新人在遇到瓶頸時閱讀JavaScript領域的經典書籍來積累基礎知識。部分新人對此并不理解，或者說只是人云亦云地覺得基礎很重要，畢竟每個行業做到頂尖以后，比拼的都是基本功，鞏固基礎知識總是不會錯的。于是，他們花了不少時間在JavaScript的基礎知識上，然而這么做除了對這門語言的認知在不斷增加以外，個人能力卻似乎并沒有什么變化。客觀來講，無論你是否清晰地理解自己所寫的程序，對用戶來說你所提供的價值幾乎沒有什么變化，即便你使用React或者Vue等流行的新技術重構了團隊的“祖傳代碼”，提高了可維護性，也并不會成為用戶買單的理由。2014年筆者剛接觸編程的時候，在只了解基本JavaScript語法的情況下，只用了2個多月就自學并利用開發框架和第三方服務獨立開發出了一款帶有即時通信功能的App并成功交付。那時候Angularjs1在國內才剛剛起步，連中文資料都極少。這就是框架帶來的可能性，即使編程經驗不足，依舊能編寫出界面優雅的可交付程序。從這個角度來看，花很多時間積累基礎知識似乎只是一種個人的追求罷了。

我們常聽到“技術深度”和“技術廣度”這兩個詞語，基礎知識的積累就屬于加強“技術深度”的范疇，它提升的是開發者解決問題的能力，這種技術能力在面試、技術方案評審或定位并解決問題時才會表現出價值。如果你希望自己在常規的業務開發之外承擔更多復雜度較高的工作，就需要不斷加強“技術深度”。前端領域提升“技術深度”的路線是相對明朗的，就是不斷閱讀優秀的源碼并深入原理，從JavaScript語言的基礎知識到翻過“三座大山”——設計模式、數據結構、基礎算法，再到開發框架的設計思想、核心原理和最佳實踐，最后再在工程化或者更加綜合的場景中應用自己所學。這是一個漫長且煎熬的過程，是每一個希望在行業里一直走下去的高級前端工程師必須經歷的修行。行內常有人說“前端沒有中級工程師，如果你覺得自己算不上高級工程師，那只能算是個新人”。前端領域的知識很龐雜，在積累“技術深度”的過程中，你能創造的價值或許跟之前沒什么區別，但請一定保持耐心。

而提到“技術廣度”，很多開發者都非常熱衷于“全棧工程師”的概念，覺得那是比單純的前端更高級的職業形態。許多前端工程師在擁有1～2年的開發經驗后，將技術提升的路線轉向了后端、數據庫和運維等領域，夢想著有一天能夠獨立編寫一個項目的各個組成部分，然后轉崗成為“全棧工程師”或者“架構師”，走向人生巔峰。然而現實是殘酷的，你會發現大多數奔著提升技術廣度去的開發者，最終淪為了“全棧碼農”，因為他們不得不在各個開發角色之間來回切換，但是大多數人只能做一些“搬磚”性質的低技術含量的工作。誠然，我們應該學習和了解其他開發角色所做的一些工作，拓寬知識儲備，但這并不是為了搶誰的飯碗，而是為了借鑒、交流不同的思想和經驗，也是為了更好地協作。

對于前端工程師來說，技術廣度的拓寬其實另有途徑，也就是筆者將在本書中展示的路線，即通過學習和應用優秀的第三方庫來了解JavaScript除了用來寫頁面外還能做什么。很多時候，我們缺少的并不是與某個特定語言相關的知識，而是不了解編程語言之外的思想和領域知識。要知道并不是只有先學會Java或者Go才可能成為后端工程師，也不是不懂Python就無法涉足人工智能領域。通過本書你會發現世界各地的前端工程師正在用JavaScript做著各種有趣且生動的嘗試，即便只了解JavaScript，你一樣可以了解任何你想要了解的領域，做非常多有意思的事情。在一步步了解JavaScript帶來的無限可能性以及它為你的職業規劃和人生選擇所帶來的想象空間后，你一定會喜歡上“前端工程師”這個身份，這也是筆者編寫本書的原因所在。

讀者對象

本書適合擁有0～3年開發經驗的JavaScript開發者、前端工程師、Node.js工程師以及所有對前端感到好奇或者感興趣的讀者閱讀。

如何閱讀本書

本書分為六篇，筆者挑選了圖形學、多媒體、跨端開發、游戲開發、人工智能、物聯網等領域的第三方JavaScript庫，針對基本原理、領域相關知識、最佳實踐等進行了詳細的講解，具體內容包含：

基礎篇（第1～10章）挑選了前端工程師日常開發中經常用到的工具，主要涉及編寫模擬數據、服務端開發、靜態類型檢查、模塊管理工具、實用工具庫、函數式編程等，旨在幫助初級前端工程師了解日常使用工具的原理和最佳實踐，提升開發能力。

圖形學篇（第11～15章）首先介紹前端工程師如何實現流程圖的繪制，然后給出Canvas技術、數據可視化、SVG技術及3D渲染相關的知識及實戰指南，幫助讀者掌握2D/3D渲染相關技巧。

多媒體篇（第16～20章）主要介紹如何在網頁中繪制PPT，以及高性能動畫、音頻處理和視頻處理相關的知識與應用。在短視頻技術流行的當下，一線互聯網公司中有很多前端工程師專門從事音視頻相關領域的研發工作，本篇能夠幫助讀者基本了解這個細分領域。

跨端開發篇（第21～25章）主要介紹如何使用JavaScript編寫命令行工具、Shell自動化腳本、跨端Hybrid應用和桌面應用，以及如何發送二進制消息或通過控制反轉來實現代碼解耦，旨在幫助讀者提升工程化能力和基本的跨端跨界開發能力。

游戲開發篇（第26～28章）主要介紹游戲開發相關的基本知識、開發技巧以及物理引擎相關的知識和實踐，每一章都提供了完整的可運行代碼和美術素材。

跨界實踐篇（第29～31章）主要介紹如何使用JavaScript來實現人工神經網絡，并利用工具庫實現了一個可以語音控制的“吃豆人”游戲，最后講解了如何使用JavaScript來進行物聯網的開發。

由于篇幅的原因，關于成長和職場反思的文章以及部分代碼未能放在書中，筆者將其發表在個人的掘金博客（掘金賬號：大史不說話）和本書代碼倉庫中，具體內容包括：

• 《寫作那些事兒》講述筆者寫技術博客的收獲、心得并針對讀者的寫作給出了建議。
• 《學習那些事兒》介紹筆者對于“圖像記憶”“快速閱讀”和“思維導圖”等高效學習法的理解與使用建議。
• 《職場那些事兒》講述筆者如何從個人開發者視角轉變為團隊管理者視角，并進行了反思和總結。
• 《面試那些事兒》為準備面試大廠的候選人提供了結構化備戰的建議。

書中演示的所有源代碼均可以在https://github.com/dashnowords/imfe找到。

勘誤和支持

由于筆者水平有限，書中難免會出現一些錯誤或者不準確的地方，懇請讀者批評指正。如果大家在閱讀過程中遇到問題，可以在本書的Github倉庫里提issue，筆者將盡量提供滿意的解答。如果你有更多的寶貴意見，也歡迎發送郵件至郵箱dashnowords@qq.com。期待聽到你們的真摯反饋。

致謝

感謝機械工業出版社華章分社編輯楊繡國的耐心指導，她的鼓勵和幫助引導我順利完成全部書稿，她認真仔細的工作風格給我留下了非常深刻的印象。

感謝京程一燈的創始人志佳老師在我接觸前端領域之初就為我極大地拓寬了視野，讓我喜歡上前端這個領域并不斷深入探索，不斷進步。

感謝前端早早聊的創始人Scott老師在我職業生涯面臨關鍵選擇時提供寶貴且專業的建議和方向指引。

感謝所有在本書創作過程中給予我中肯建議的朋友。

感謝我的家人，我的爸爸、媽媽和妻子，他們在我寫作的過程中給予了足夠的鼓勵和支持。

最后要感謝自己，即使花費了比預期長2倍的時間，也沒有輕言放棄，最終完成了本書的創作。

謹以此書，獻給所有熱愛前端的朋友。

史文強（大史不說話）
2022年6月于北京