2017年5月份的時候,在博客園收到一條私信,問我有沒有興趣一起寫本關(guān)于前端的書。我自己從來沒有想過寫書,最多只是在博客園發(fā)幾篇博文而已,突然收到這么一條消息,內(nèi)心既忐忑又激動。懷著試一試的心情,加了發(fā)信人的QQ和微信,語音了幾個小時。了解到要寫一本有關(guān)前端面試方面的書,由機械工業(yè)出版社出版,主要要做的就是對前端基礎(chǔ)知識的梳理,最大的挑戰(zhàn)是堅持。這是一場持久戰(zhàn),知識點的梳理不是一朝一夕就能完成的,為此我將失去很多休息的時間。白天要忙碌的工作,晚上還得挑燈夜戰(zhàn),精神和肉體都將承受巨大的壓力。并且一寫就是一年,一直到2018年的6月,在這一年的時間中,博客完全沒有更新,甚至都很少登錄,大部分精力都投入到了創(chuàng)作中。
  雖然要面臨如此之多的困難,但是思前顧后最終還是接下了這個活。一則是為了不想讓自己留下遺憾,乘著年輕做些有意義的事;二則是為了鞏固自己所學(xué)的知識,雖然看了很多書,參與了很多項目,但是很多時候,不能學(xué)以致用,有些知識看了以后,并不會在工作中用到,也沒有做合適的記錄,慢慢就會被遺忘;三則是為了將自己所知的分享給大家,目前市面上各種高級前端技術(shù)層出不窮,令人眼花繚亂,而基礎(chǔ)知識一直不受人重視,因此我想撰寫一本這樣的書,希望讀者通過此書能快速了解各個基礎(chǔ)知識點,再為自己查漏補缺。
## 一、前期準(zhǔn)備
  前端面試必然離不開各種筆試題目,因此前期的準(zhǔn)備工作就是搜集市面上已知的前端題目。通過筆試網(wǎng)站、個人博客、Github等各種途徑,搜集到了國內(nèi)和國外的各類習(xí)題,總計大概有3、4千道,每道題目會涉及一個或多個前端知識點。這些知識點并沒有覆蓋前端的所有方面,我只挑選了書中將會用到的部分。下圖是國外某個網(wǎng)站的題目列表。
:-: 
  在搜集到這么多題后,下一步就是對它們進行分類。分類不能隨便分,是要有根據(jù)的,因此要參考一些市面上的權(quán)威技術(shù)資料。可以是[W3C標(biāo)準(zhǔn)文檔](https://www.w3.org/TR),也可以是已出版的書籍,例如CSS權(quán)威指南、JavaScript權(quán)威指南和HTML5權(quán)威指南(如下圖所示)等。最終我融合了多處資料,列出了讓我滿意的目錄,這其實也是本書目錄的雛形。之所以叫雛形,是因為在撰寫過程中,我一直在調(diào)整,有的合并、有的分開,挑出重點,更有針對性的講解,同時令其更容易讓讀者理解。搜集題目和對其進行分類,前前后后大概花了兩周不到的時間,然后就將開始正文的編寫。
:-: 
## 二、撰寫過程
**1)參考資料**
  在撰寫過程中,主要參考書籍和[標(biāo)準(zhǔn)文檔](https://www.w3.org/TR)。相比較個人分享的博文,書籍所寫的內(nèi)容措辭更嚴(yán)謹(jǐn)、描述更清晰,并且更具權(quán)威性。而標(biāo)準(zhǔn)文檔雖然內(nèi)容比較晦澀難讀,但是是官方所出,所以準(zhǔn)確性更高、術(shù)語更專業(yè),如下圖所示。當(dāng)無法理解或?qū)臀臋n中所記載的內(nèi)容有疑惑時,我會瀏覽網(wǎng)上的資料,結(jié)合這些資料后,再做出最終的判斷。這里吐槽一下網(wǎng)上的資料,很多都是抄來抄去,并且缺少深入的分析,大部分都只是告訴你怎么做,但卻不會告訴你其中的內(nèi)在原理。
:-: 
**2)措辭嚴(yán)謹(jǐn)**
  撰書和寫博文有個很大的區(qū)別就是措辭。寫博文的話可以比較隨性,想到什么就寫什么;而寫書就不一樣了,這是要印在白紙上的,比較嚴(yán)肅一點。因此要用最精準(zhǔn)的詞語來描述自己所要傳達的意思。每次遇到這種情況就會思前想后,還要搜索詞語的意思,再分別放到語句中,反復(fù)體會,最后才會敲定用哪個詞語。雖然不會像文學(xué)那樣講究,但為了更嚴(yán)謹(jǐn)一些,詞語的推敲還是有必要的。例如在編寫時遇到了“制定”和“制訂”,兩個詞語發(fā)音都是一樣的,并且字也差不多,稍不留神就會混用,最后查了詞語釋義后,才弄清楚兩者之間的區(qū)別,“制定”偏重于做出最后決定,使完全確定下來,“制訂”偏重于從無到有的創(chuàng)制、草擬而后的訂立?!爸贫ā背Ec政策、法令、方針、路線等搭配,“制訂”常與計劃、方案等搭配。再例如“的”和“地”、“判定”和“判斷”等,它們的用法都要加以區(qū)別,否則就會混用。
**3)專業(yè)術(shù)語**
  無論是CSS、HTML,還是JavaScript都包含許多專業(yè)術(shù)語,而最容易忽略的恰恰是這些專業(yè)術(shù)語。因為在平時的交流中,大家想不到或者說不必用專業(yè)術(shù)語來交流,都會用約定俗成的口語來表述。例如最常見的引用CSS樣式,可以分為內(nèi)聯(lián)樣式、內(nèi)嵌樣式和外部樣式,但我們平時可能就不這么稱呼,內(nèi)聯(lián)樣式可以叫做標(biāo)簽內(nèi)的樣式、內(nèi)嵌樣式可以叫做頁面內(nèi)的樣式、外部樣式可以叫做CSS文件內(nèi)的樣式。在平時交流中這么稱呼都沒問題,但在書中卻不能這么做,如果每次都用這么口語化的稱呼,那么難免會顯得不專業(yè),并且內(nèi)容還特別冗余,語句的前后很難連貫。自己以前也不怎么注意這些專業(yè)術(shù)語,因此每次都要翻閱好幾本技術(shù)書籍,以及瀏覽相關(guān)的標(biāo)準(zhǔn)文檔。標(biāo)準(zhǔn)文檔是最權(quán)威的,但都是英文的,當(dāng)把英文翻成中文時,又會有很多個版本。由于每個版本都會有些差異,因此我在選擇時都會反復(fù)斟酌。
**4)描述清晰**
  以前寫博文的時候,為了貫徹自己簡潔的風(fēng)格,都會跳著寫,前后并不會連貫,類似于記筆記。雖然很方便,但這種方式卻不能移植到寫書中,因為兩段內(nèi)容之間沒有承上啟下的過渡,就會不容易理解。書寫出來是為了給讀者看的,讀者如果看不懂,那么這就是一部失敗的作品。在寫書的時候,時時刻刻都在提醒自己要站在讀者的角度理解。舉個簡單的例子,在說明某個知識點的時候,通常會配一段代碼。以往我都是直接寫在相關(guān)內(nèi)容的前面或后面,而且并不會對代碼做進一步的說明。想當(dāng)然的以為讀者在瀏覽這段內(nèi)容后,就能知道這段代碼與內(nèi)容是有關(guān)聯(lián)的。這是大錯特錯,應(yīng)該避免讓讀者去猜,這樣既浪費時間,也會影響閱讀體驗,有百害而無一利。每次要描述一個知識點或術(shù)語(例如對語義化的說明)時,都會出現(xiàn)欲言又止的情況,心里明明很清楚這是什么,但就是無法用文字來準(zhǔn)確的描述出來。這種情況循環(huán)往復(fù)的出現(xiàn)著,書到用時方恨少,這種時候真的對自己的詞匯量感到無奈。每次在翻閱許許多多的資料后,才能寫出令自己滿意的文案。每當(dāng)寫完一篇章節(jié)時,都會覺得自己的身體被掏空了一次。
**5)細(xì)節(jié)把握**
  除了剛剛所說的四點,還有一點很重要,那就是細(xì)節(jié)的把握。例如全書中的寫法要統(tǒng)一,無論是標(biāo)點符號還是剛剛所說的術(shù)語,都要一樣,如果用了中文符號,那么沒有特殊情況就一律用中文符號。如果把HTML元素的style屬性中定義的樣式叫內(nèi)聯(lián)樣式,那么所有的地方都要這么叫。還有其它一些細(xì)節(jié),例如示例代碼的編排,為了提升閱讀體驗,可以將各條語句的注釋以首字母對齊;為每張圖設(shè)定一個編號,可以在閱讀時更精準(zhǔn)的定位到某張圖等;在合適的位置用句號來結(jié)束一段話。
## 三、總結(jié)
  著書的過程是痛并快樂著的,我花費了半年多的時間,將自己所有的精力都撲在了寫書上,放棄了很多業(yè)余生活。雖然每寫一篇文章的過程都很艱辛,但我的收獲也不少,我對HTML、CSS和JavaScript的認(rèn)識又上升了一個高度,并且順帶便復(fù)習(xí)了一下數(shù)學(xué)(如坐標(biāo)軸、除數(shù)和被除數(shù)等)以及網(wǎng)絡(luò)原理(如HTTP、TCP等協(xié)議)等周邊知識。看問題也不再那么片面,能從更高的點來分析問題。做事也更加細(xì)心,整本書我自己總共校驗了六次,每一次我都會認(rèn)真對待,并且將書中的示例代碼整理了一份,已上傳到[Github](https://github.com/pwstrick/FrondEndInterviewCode)中。還總結(jié)了四張思維導(dǎo)圖(也已上傳至[Github](https://github.com/pwstrick/FrondEndInterviewCode)),將書中講到的HTML、CSS、JavaScript和網(wǎng)絡(luò)相關(guān)的知識囊括進了圖中,方便平時的復(fù)習(xí)和瀏覽。本書的名字叫做《前端程序員面試筆試寶典》,封面如下圖所示,如果要支持本書,可點擊[此處](http://product.dangdang.com/25342065.html)。
:-: 
  雖然我盡了自己最大的努力,但是時間倉促,并且自己的能力也是有限的,難免會有錯誤,還望大家多多指正。本書側(cè)重的是前端基礎(chǔ)知識部分(如下圖所示),包括CSS/CSS3、HTML/HTML5和JavaScript(以ECMAScript 5為主),因此一些比較高級的知識點都沒涉及到。像如日中天的React、VUE、TypeScript等,在本書中都沒涉及到。再比如復(fù)雜一點的性能優(yōu)化、算法等,也沒有涉及到。
:-: 
*****
> 已建立一個微信前端交流群,如要進群,請先加微信號freedom20180706或掃描下面的二維碼,請求中需注明“看云加群”,在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily),歡迎閱讀。

- ES6
- 1、let和const
- 2、擴展運算符和剩余參數(shù)
- 3、解構(gòu)
- 4、模板字面量
- 5、對象字面量的擴展
- 6、Symbol
- 7、代碼模塊化
- 8、數(shù)字
- 9、字符串
- 10、正則表達式
- 11、對象
- 12、數(shù)組
- 13、類型化數(shù)組
- 14、函數(shù)
- 15、箭頭函數(shù)和尾調(diào)用優(yōu)化
- 16、Set
- 17、Map
- 18、迭代器
- 19、生成器
- 20、類
- 21、類的繼承
- 22、Promise
- 23、Promise的靜態(tài)方法和應(yīng)用
- 24、代理和反射
- HTML
- 1、SVG
- 2、WebRTC基礎(chǔ)實踐
- 3、WebRTC視頻通話
- 4、Web音視頻基礎(chǔ)
- CSS進階
- 1、CSS基礎(chǔ)拾遺
- 2、偽類和偽元素
- 3、CSS屬性拾遺
- 4、浮動形狀
- 5、漸變
- 6、濾鏡
- 7、合成
- 8、裁剪和遮罩
- 9、網(wǎng)格布局
- 10、CSS方法論
- 11、管理后臺響應(yīng)式改造
- React
- 1、函數(shù)式編程
- 2、JSX
- 3、組件
- 4、生命周期
- 5、React和DOM
- 6、事件
- 7、表單
- 8、樣式
- 9、組件通信
- 10、高階組件
- 11、Redux基礎(chǔ)
- 12、Redux中間件
- 13、React Router
- 14、測試框架
- 15、React Hooks
- 16、React源碼分析
- 利器
- 1、npm
- 2、Babel
- 3、webpack基礎(chǔ)
- 4、webpack進階
- 5、Git
- 6、Fiddler
- 7、自制腳手架
- 8、VSCode插件研發(fā)
- 9、WebView中的頁面調(diào)試方法
- Vue.js
- 1、數(shù)據(jù)綁定
- 2、指令
- 3、樣式和表單
- 4、組件
- 5、組件通信
- 6、內(nèi)容分發(fā)
- 7、渲染函數(shù)和JSX
- 8、Vue Router
- 9、Vuex
- TypeScript
- 1、數(shù)據(jù)類型
- 2、接口
- 3、類
- 4、泛型
- 5、類型兼容性
- 6、高級類型
- 7、命名空間
- 8、裝飾器
- Node.js
- 1、Buffer、流和EventEmitter
- 2、文件系統(tǒng)和網(wǎng)絡(luò)
- 3、命令行工具
- 4、自建前端監(jiān)控系統(tǒng)
- 5、定時任務(wù)的調(diào)試
- 6、自制短鏈系統(tǒng)
- 7、定時任務(wù)的進化史
- 8、通用接口
- 9、微前端實踐
- 10、接口日志查詢
- 11、E2E測試
- 12、BFF
- 13、MySQL歸檔
- 14、壓力測試
- 15、活動規(guī)則引擎
- 16、活動配置化
- 17、UmiJS版本升級
- 18、半吊子的可視化搭建系統(tǒng)
- 19、KOA源碼分析(上)
- 20、KOA源碼分析(下)
- 21、花10分鐘入門Node.js
- 22、Node環(huán)境升級日志
- 23、Worker threads
- 24、低代碼
- 25、Web自動化測試
- 26、接口攔截和頁面回放實驗
- 27、接口管理
- 28、Cypress自動化測試實踐
- 29、基于Electron的開播助手
- 30、SkyWalking使用和排查分析
- 31、IP白名單變遷史
- Node.js精進
- 1、模塊化
- 2、異步編程
- 3、流
- 4、事件觸發(fā)器
- 5、HTTP
- 6、文件
- 7、日志
- 8、錯誤處理
- 9、性能監(jiān)控(上)
- 10、性能監(jiān)控(下)
- 11、Socket.IO
- 12、ElasticSearch
- 監(jiān)控系統(tǒng)
- 1、SDK
- 2、存儲和分析
- 3、性能監(jiān)控
- 4、內(nèi)存泄漏
- 5、小程序
- 6、較長的白屏?xí)r間
- 7、頁面奔潰
- 8、shin-monitor源碼分析
- 前端性能精進
- 1、優(yōu)化方法論之測量
- 2、優(yōu)化方法論之分析
- 3、瀏覽器之圖像
- 4、瀏覽器之呈現(xiàn)
- 5、瀏覽器之JavaScript
- 6、網(wǎng)絡(luò)
- 7、構(gòu)建
- 前端體驗優(yōu)化
- 1、概述
- 2、基建
- 3、后端
- 4、數(shù)據(jù)
- 5、后臺
- Web優(yōu)化
- 1、CSS優(yōu)化
- 2、JavaScript優(yōu)化
- 3、圖像和網(wǎng)絡(luò)
- 4、用戶體驗和工具
- 5、網(wǎng)站優(yōu)化
- 6、優(yōu)化閉環(huán)實踐
- 7、后臺上傳大批量圖優(yōu)化
- 數(shù)據(jù)結(jié)構(gòu)與算法
- 1、鏈表
- 2、棧、隊列、散列表和位運算
- 3、二叉樹
- 4、二分查找
- 5、回溯算法
- 6、貪心算法
- 7、分治算法
- 8、動態(tài)規(guī)劃
- 程序員之路
- 大學(xué)
- 2011年
- 2012年
- 2013年
- 2014年
- 項目反思
- 前端基礎(chǔ)學(xué)習(xí)分享
- 2015年
- 再一次項目反思
- 然并卵
- PC網(wǎng)站CSS分享
- 2016年
- 制造自己的榫卯
- PrimusUI
- 2017年
- 工匠精神
- 2018年
- 2019年
- 前端學(xué)習(xí)之路分享
- 2020年
- 2021年
- 2022年
- 2023年
- 2024年
- 2025年
- 日志
- 2020
