2017年五月份的時候，在博客園收到一條私信，問我有沒有興趣一起寫本關于前端的書。我自己從來沒有想過寫書，最多只是在博客園發(fā)幾篇博文而已，突然收到這么一條消息，內(nèi)心既忐忑又激動。懷著試一試的心情，加了發(fā)信人的QQ和微信，語音了幾個小時。了解到要寫一本有關前端面試方面的書，由機械工業(yè)出版社出版，主要要做的就是對前端基礎知識的梳理，最大的挑戰(zhàn)是堅持。這是一場持久戰(zhàn)，知識點的梳理不是一朝一夕就能完成的，為此我將失去很多休息的時間。白天要忙碌的工作，晚上還得挑燈夜戰(zhàn)，精神和肉體都將承受巨大的壓力。

　　雖然要面臨如此之多的困難，但是思前顧后最終還是接下了這個活。一則是為了不想讓自己留下遺憾，乘著年輕做些有意義的事；二則是為了鞏固自己所學的知識，雖然看了很多書，參與了很多項目，但是很多時候，不能學以致用，有些知識看了以后，并不會在工作中用到，也沒有做合適的記錄，慢慢就會被遺忘；三則是為了將自己所知的分享給大家，目前市面上各種高級前端技術層出不窮，令人眼花繚亂，而基礎知識一直不受人重視，因此我想撰寫一本這樣的書，希望讀者通過此書能快速了解各個基礎知識點，再為自己查漏補缺。

一、前期準備

　　前端面試必然離不開各種筆試題目，因此前期的準備工作就是搜集市面上已知的前端題目。通過筆試網(wǎng)站、個人博客、Github等各種途徑，搜集到了國內(nèi)和國外的各類習題，總計大概有3、4千道，每道題目會涉及一個或多個前端知識點。這些知識點并沒有覆蓋前端的所有方面，我只挑選了書中將會用到的部分。下圖是國外某個網(wǎng)站的題目列表。

　　在搜集到這么多題后，下一步就是對它們進行分類。分類不能隨便分，是要有根據(jù)的，因此要參考一些市面上的權威技術資料?？梢允?span style="color: rgba(51, 102, 255, 1)">W3C標準文檔，也可以是已出版的書籍，例如CSS權威指南、JavaScript權威指南和HTML5權威指南（如下圖所示）等。最終我融合了多處資料，列出了讓我滿意的目錄，這其實也是本書目錄的雛形。之所以叫雛形，是因為在撰寫過程中，我一直在調(diào)整，有的合并、有的分開，挑出重點，更有針對性的講解，同時令其更容易讓讀者理解。搜集題目和對其進行分類，前前后后大概花了兩周不到的時間，然后就將開始正文的編寫。

二、撰寫過程

1）參考資料

　　在撰寫過程中，主要參考書籍和標準文檔。相比較個人分享的博文，書籍所寫的內(nèi)容措辭更嚴謹、描述更清晰，并且更具權威性。而標準文檔雖然內(nèi)容比較晦澀難讀，但是是官方所出，所以準確性更高、術語更專業(yè)，如下圖所示。當無法理解或對書籍和文檔中所記載的內(nèi)容有疑惑時，我會瀏覽網(wǎng)上的資料，結合這些資料后，再做出最終的判斷。這里吐槽一下網(wǎng)上的資料，很多都是抄來抄去，并且缺少深入的分析，大部分都只是告訴你怎么做，但卻不會告訴你其中的內(nèi)在原理。

2）措辭嚴謹

　　撰書和寫博文有個很大的區(qū)別就是措辭。寫博文的話可以比較隨性，想到什么就寫什么；而寫書就不一樣了，這是要印在白紙上的，比較嚴肅一點。因此要用最精準的詞語來描述自己所要傳達的意思。每次遇到這種情況就會思前想后，還要搜索詞語的意思，再分別放到語句中，反復體會，最后才會敲定用哪個詞語。雖然不會像文學那樣講究，但為了更嚴謹一些，詞語的推敲還是有必要的。例如在編寫時遇到了“制定”和“制訂”，兩個詞語發(fā)音都是一樣的，并且字也差不多，稍不留神就會混用，最后查了詞語釋義后，才弄清楚兩者之間的區(qū)別，“制定”偏重于做出最后決定，使完全確定下來，“制訂”偏重于從無到有的創(chuàng)制、草擬而后的訂立?！爸贫ā背Ｅc政策、法令、方針、路線等搭配，“制訂”常與計劃、方案等搭配。再例如“的”和“地”、“判定”和“判斷”等，它們的用法都要加以區(qū)別，否則就會混用。

3）專業(yè)術語

　　無論是CSS、HTML，還是JavaScript都包含許多專業(yè)術語，而最容易忽略的恰恰是這些專業(yè)術語。因為在平時的交流中，大家想不到或者說不必用專業(yè)術語來交流，都會用約定俗成的口語來表述。例如最常見的引用CSS樣式，可以分為內(nèi)聯(lián)樣式、內(nèi)嵌樣式和外部樣式，但我們平時可能就不這么稱呼，內(nèi)聯(lián)樣式可以叫做標簽內(nèi)的樣式、內(nèi)嵌樣式可以叫做頁面內(nèi)的樣式、外部樣式可以叫做CSS文件內(nèi)的樣式。在平時交流中這么稱呼都沒問題，但在書中卻不能這么做，如果每次都用這么口語化的稱呼，那么難免會顯得不專業(yè)，并且內(nèi)容還特別冗余，語句的前后很難連貫。自己以前也不怎么注意這些專業(yè)術語，因此每次都要翻閱好幾本技術書籍，以及瀏覽相關的標準文檔。標準文檔是最權威的，但都是英文的，當把英文翻成中文時，又會有很多個版本。由于每個版本都會有些差異，因此我在選擇時都會反復斟酌。

4）描述清晰

　　以前寫博文的時候，為了貫徹自己簡潔的風格，都會跳著寫，前后并不會連貫，類似于記筆記。雖然很方便，但這種方式卻不能移植到寫書中，因為兩段內(nèi)容之間沒有承上啟下的過渡，就會不容易理解。書寫出來是為了給讀者看的，讀者如果看不懂，那么這就是一部失敗的作品。在寫書的時候，時時刻刻都在提醒自己要站在讀者的角度理解。舉個簡單的例子，在說明某個知識點的時候，通常會配一段代碼。以往我都是直接寫在相關內(nèi)容的前面或后面，而且并不會對代碼做進一步的說明。想當然的以為讀者在瀏覽這段內(nèi)容后，就能知道這段代碼與內(nèi)容是有關聯(lián)的。這是大錯特錯，應該避免讓讀者去猜，這樣既浪費時間，也會影響閱讀體驗，有百害而無一利。每次要描述一個知識點或術語（例如對語義化的說明）時，都會出現(xiàn)欲言又止的情況，心里明明很清楚這是什么，但就是無法用文字來準確的描述出來。這種情況循環(huán)往復的出現(xiàn)著，書到用時方恨少，這種時候真的對自己的詞匯量感到無奈。每次在翻閱許許多多的資料后，才能寫出令自己滿意的文案。每當寫完一篇章節(jié)時，都會覺得自己的身體被掏空了一次。

5）細節(jié)把握

　　除了剛剛所說的四點，還有一點很重要，那就是細節(jié)的把握。例如全書中的寫法要統(tǒng)一，無論是標點符號還是剛剛所說的術語，都要一樣，如果用了中文符號，那么沒有特殊情況就一律用中文符號。如果把HTML元素的style屬性中定義的樣式叫內(nèi)聯(lián)樣式，那么所有的地方都要這么叫。還有其它一些細節(jié)，例如示例代碼的編排，為了提升閱讀體驗，可以將各條語句的注釋以首字母對齊；為每張圖設定一個編號，可以在閱讀時更精準的定位到某張圖等；在合適的位置用句號來結束一段話。

三、總結

　　著書的過程是痛并快樂著的，我花費了半年多的時間，將自己所有的精力都撲在了寫書上，放棄了很多業(yè)余生活。雖然每寫一篇文章的過程都很艱辛，但我的收獲也不少，我對HTML、CSS和JavaScript的認識又上升了一個高度，并且順帶便復習了一下數(shù)學（如坐標軸、除數(shù)和被除數(shù)等）以及網(wǎng)絡原理（如HTTP、TCP等協(xié)議）等周邊知識?？磫栴}也不再那么片面，能從更高的點來分析問題。做事也更加細心，整本書我自己總共校驗了六次，每一次我都會認真對待，并且將書中的示例代碼整理了一份，已上傳到Github中。還總結了四張思維導圖（也已上傳至Github），將書中講到的HTML、CSS、JavaScript和網(wǎng)絡相關的知識囊括進了圖中，方便平時的復習和瀏覽。本書的名字叫做《前端程序員面試筆試寶典》，封面如下圖所示，如果要支持本書，可點擊此處。

　　雖然我盡了自己最大的努力，但是時間倉促，并且自己的能力也是有限的，難免會有錯誤，還望大家多多指正。本書側重的是前端基礎知識部分（如下圖所示），包括CSS/CSS3、HTML/HTML5和JavaScript（以ECMAScript 5為主），因此一些比較高級的知識點都沒涉及到。像如日中天的React、VUE、TypeScript等，在本書中都沒涉及到。再比如復雜一點的性能優(yōu)化、算法等，也沒有涉及到。