謹以此書獻給相信“努力有用”的你

先講個故事

2019年，我和機械工業出版社簽了協議，約定用1年半時間交付一本15萬字的前端技術書籍，起名為《我是前端-JavaScript工程師的自我修養》；

2022年，書稿終於寫完了，但編輯老師似乎覺得原書名不太嚴肅，和出版社氣質不符，幾經商議最終將新書定名為 《前端跨界開發指南-JavaScript工具庫原理解析與實戰》 ，正式出版發行，歷時3年，共計28萬字。

我高估了自己的產能，也低估了自己的耐心。今天，我想和你聊聊關於這本書的故事。

再做個自我介紹

大家好，我是大史不説話，是一名前端工程師，曾經因為一篇《10000小時後，我從外包走進了字節跳動》而出圈，被朋友們戲稱為“萬時大佬”😂。我2017年走進前端領域，2018年開始技術寫作，除了產出上百篇技術博客外，大概每年會有一個小爆款，或許你也曾經讀過其中的一些：

• 2018年 -《筆耕不輟，無問西東》
• 2019年 - 《仰望星空的人不應該被嘲笑》
• 2020年 - 《10000小時後，我從外包走進了字節跳動》
• 2021年 - 《字節半年，我的認知升級》
• 2022年 - 不知道會不會是本篇呢

有的文章點贊多，有的文章噴子多，但從標題裏也許能夠拼湊出一個我的樣子：

一個相信“努力有用”的、不太聰明的、行動力還可以的程序員 。

是的，這就是我。

看完本書能收穫什麼

這是一本致力於拓展前端技術廣度的書籍，我在書中挑選了30多個經典的JavaScript工具庫，對它們進行了詳細地解析，從基本的使用方式到設計原則，從原理源碼到周邊知識，希望為讀者呈現出一個有深度、有廣度的立體的JavaScript世界。全書分為6個大的部分，內容涵蓋基礎工具、圖形學、多媒體、跨端開發、遊戲開發、人工智能、物聯網：

第一部分 基礎篇（第1~10章）

筆者挑選了前端工程師日常開發中經常用到的工具，內容主要涉及編寫Mock數據、服務端開發、靜態代碼檢查、模塊管理工具、實用工具庫、函數式編程等內容，幫助初級前端工程師瞭解日常使用工具的原理和最佳實踐，提升開發能力。

第二部分 圖形學篇（第11~15章）

主要介紹前端如何實現流程圖繪製、Canvas技術使用、數據可視化、SVG技術及3D渲染相關的知識及實戰指南，幫助讀者瞭解2D/3D渲染相關的知識，為進軍元宇宙打好基礎。

第三部分 多媒體篇（第16~20章）

主要介紹如何在網頁中繪製PPT、做高性能動畫、音頻處理和視頻處理相關的知識和應用，在短視頻技術流行的當下，一線互聯網公司中有很多前端工程師專門從事音視頻相關領域的研發工作，本章的內容能夠幫助你建立對這個細分領域的基本瞭解。

第四部分 跨端開發篇（第21~25章）

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

第五部分 遊戲開發篇（第26~28章）

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

第六部分 跨界實踐篇（第29~31章）

主要介紹如何使用JavaScript來實現人工神經網絡，利用工具庫實現了一個可以語音控制的“吃豆人”遊戲，並講解了如何使用JavaScript來進行物聯網的開發。

希望你能夠看到，前端技術不僅僅是一個需要持續優化打磨的生產工具，更是一個能夠陪你一起探索技術世界的萬花筒。

瀏覽器，並不是前端的邊界。

為什麼想寫這本書

一半好奇心，一半強迫症

早在正式成為前端工程師之前，我就以個人開發者的身份利用框架和第三方服務實現過完整的產品交付，這樣的經歷帶給我極大的成就感，以至於在剛成為前端工程師的時候，其他同學都致力於討論框架、源碼和前端工程化的時候，只有我像個孩子似的樂此不疲地到處蒐羅“JavaScript工具庫”，想知道前端除了開發頁面以外還能做哪些有趣的事情，漸漸地我才知道，原來世界各地的前端工程師早就在嘗試把JavaScript應用在跨平台開發、桌面應用開發、命令行工具、AR、VR、音視頻、遊戲開發、神經網絡、物聯網等等各種不同的領域，這時我才知道把“前端”等同於“頁面工程師”這種觀點真的是有些無知。當週圍的同事大多都在努力提升自己的“技術深度”時，我卻秉持着“好讀書，不求甚解”的精神在技術世界裏玩得不亦樂乎，感覺這個也好神奇，那個也好有趣。我在自己的技術博客開了一個專欄——《一統江湖的大前端》（也就是本書的前身），希望在這裏記錄並分享自己在探索 JavaScript 的花花世界時的反思和收穫，在那時的意識形態裏，前端技術首先應該是帶給我快樂的，其次才是謀生的手段。 當連載寫到第7篇的時候，不知道怎麼就被編輯老師發現了，於是才有了今天的這本書。

寫書的另一半原因大概是輕度的強迫症吧，在學習的過程中免不了需要查資料，那時優秀的前端博主並不多，網上很多文章也都是抄來抄去的，你經常會發現那些比較簡單的知識在很多文章裏被翻來覆去地講，但那些真正令自己困惑的細節卻很難找到答案，同類的事情發生得多了，反而容易讓人變得自我懷疑，不知道那些細節真的是“不言自明的常識”，還是很多博客作者自己壓根都沒弄明白，以至於看了很多博文後，不知道的東西還是不知道，這令我覺得非常沮喪；另一個現象就是那時前端的沙箱技術並不是很普及，很多博客作者只會在文章裏展示一些代碼片段（現在可以直接接沙箱程序去運行，就方便多了），而當你嘗試把這些代碼粘貼下來去運行時，可能就會得到各種各樣莫名其妙的報錯，初學者往往很難搞清楚到底是博主提供的代碼有問題，還是某個工程配置或是插件導致了錯誤，結果就變成了“道理都懂，就是Run不起來”的尷尬境地。這種“一知半解”的體驗對我來説真的太難受了，於是給自己立了Flag，下定決心對常見的前端技術進行深入學習，並在後續的寫作中都儘量提供完整可運行的示例代碼。我一直相信，那些困擾自己的問題，絕不可能只困擾着我一個人。

為什麼敢寫這本書

提到寫書或是技術博客，很多人可能會覺得，自己需要先成為一名專家，然後才“有資格”去寫書，這種認知模式通常被稱為“HAVE-BE-DO”模式，我們來舉個例子：如果我有（have）很多錢，那麼我就會成為（be）一個有錢人，這樣我就可以像富人那樣去做（do）事情。看起來順理成章，沒毛病，同理可知：如果我有（have）足夠的知識，那麼我就會成為（be）一名專家，這樣我就可以嘗試對外做（do）知識輸出了，比如寫書。它們之間的區別是什麼呢？或許你已經有所察覺，對於“擁有更多知識”這個前提而言，實現路徑是相對清晰的，但對於“擁有很多錢”這個前提，大多數人並不知道如何實現，這就形成了一個悖論，因為如果你知道如何實現的話，實現的過程就可以直接跳到do的環節了，壓根不需要經過HAVE-BE-DO的流程。

事實上，HAVE-BE-DO這三件事並不是線性關係，而是一個反饋循環。 也就是説，DO通常會對HAVE產生增益或減益的效果，繼而讓這個循環持續下去。於是有人提出，BE-DO-HAVE或許會是一種更有效的認知模式 ， 也就是先擁有身份認同，繼而去做與這個身份相符合的事情，最終擁有與這個身份相匹配的回報，這份回報又會幫助你強化自己的身份認同，從而形成循環。

以寫作這件事為例，它的實現路徑就變成了，我先要相信自己能夠像作家一樣寫出好的作品（這可能本身源自於自己寫博客時獲得的正反饋），然後不斷地嘗試不斷地寫，如果內容優質，那麼最終我會擁有自己的讀者粉絲。這種認知模式的好處在於它能夠讓你把注意力集中在“如何做有效的事情” 上，而不僅僅是看着遠方的目標不知所措，而最簡單的行動方式，就是找一個榜樣去模仿，先動起來再優化。事實證明寫博客和寫書完全是兩碼事，我確實也沒有什麼寫作的天賦，交付的28萬字書稿背後，是大約2~3倍字數的底稿刪刪改改才得到的。

如果你覺得生活中有什麼不如意的地方，也可以試試BE-DO-HAVE的思考方式，沒準就能夠找到改變的契機。

推動我決定寫書的另一個關鍵詞叫做 “知識詛咒” 。第一次聽到這個詞語是在樊登老師推薦的《可複製的領導力》一書中。 “知識詛咒”是指一旦我們知道了某樣東西后，就很難想象自己不知道它時會是什麼樣子。 隨着工程師技術水平的增加，越來越多的知識在他們的意識裏變得“理所當然”，當你向他們諮詢的時候，他提供的答案可能確實是對的，但初學者聽不懂可能也確實是真的，越是資深的專家，或許越難理解“為什麼初學者連這麼顯而易見的道理都不明白”，但事實上他們自己當年可能也面臨過這樣的尷尬境地，對於剛剛涉足一個領域的初學者而言，很多事情其實並沒有那麼“顯而易見”。從自己技術博客的閲讀量上就可以看到，很多自己覺得寫的非常值得思考的技術剖析文章，評論區可能更多的只是點贊，而一些科普性質的文章，反而會引發更多的討論，作為一個轉行進入前端領域的大齡程序員，也許我更容易理解初學者所需要的東西是什麼。我想，如果現在不寫，當自己有一天真的成為技術專家時，可能就寫不出真正對初學者友好的內容了。我知道成長的路有多難走，只希望能留下一些可供參考的路標，給那些仍然願意前行的朋友。

編輯説：書太厚了

本書的原稿是有附錄的，其中分享了我關於成長和職場總結的四篇文章，對於初級工程師來説，它們可能比技術本身更重要，但厚度直逼500頁的書籍遭到了編輯老師的嫌棄，最終還是決定將這些覆盤筆記直接發表在個人掘金博客（掘金賬號：大史不説話）以及【隨書代碼倉】 ，內容包括：

• 寫作那些事兒- 講述筆者技術博客寫作的收穫、心得和建議
• 學習那些事兒 - 講述筆者對於“圖像記憶”、“快速閲讀”和“思維導圖”等高效學習法的看法和建議；
• 職場那些事兒 - 講述筆者如何從個人開發者視角轉變為團隊管理者視角的反思和總結；
• 面試那些事兒 - 為準備面試大廠的候選人提供結構化備戰建議。
• 我的技術博客 - 分享框架之外的前端知識

觀點是有待驗證的假設，而不是一成不變的原則。既然是個人筆記，就不免會帶有主觀性和侷限性，只希望能夠為初學者帶來一些啓發。

致謝

再次感謝機械工業出版社的各位老師！

也感謝所有在本書創作過程中給予我關注、鼓勵和反饋的朋友和家人！

硬廣時間

如果你是一名前端初學者：那麼我真誠地向你推薦這本書，相信它能夠有效地幫助你擴展技術視野，進一步提升技術能力；

如果你是一名資深前端人：希望你能把它推薦給其他需要的朋友，幫助他們在肉眼可見的就業低潮期厚積薄發，靜待花開；

如果你不是前端工程師：這本書或許也適合你，因為只需要基本的JS知識，就可以快速瞭解前端技術的應用場景，做好跨界知識儲備；

如果你只是單純覺着我這人還行：那就直接掃碼買它就完事了~