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