2017年五月份的(de)(de)(de)(de)時候，在博(bo)客園收到(dao)(dao)一條私信(xin)，問我(wo)有沒有興(xing)趣一起(qi)寫(xie)本(ben)關于前端(duan)(duan)(duan)的(de)(de)(de)(de)書。我(wo)自己(ji)從來沒有想過(guo)寫(xie)書，最(zui)多(duo)只是(shi)在博(bo)客園發幾篇博(bo)文而已(yi)，突(tu)然收到(dao)(dao)這么(me)一條消息，內心既忐忑又激動。懷著試一試的(de)(de)(de)(de)心情，加了發信(xin)人的(de)(de)(de)(de)QQ和(he)(he)微信(xin)，語音了幾個小時。了解到(dao)(dao)要寫(xie)一本(ben)有關前端(duan)(duan)(duan)面試方面的(de)(de)(de)(de)書，由機械(xie)工業出(chu)(chu)版(ban)社出(chu)(chu)版(ban)，主要要做(zuo)的(de)(de)(de)(de)就是(shi)對(dui)前端(duan)(duan)(duan)基礎知(zhi)識(shi)的(de)(de)(de)(de)梳(shu)理，最(zui)大的(de)(de)(de)(de)挑(tiao)戰是(shi)堅持(chi)(chi)。這是(shi)一場持(chi)(chi)久戰，知(zhi)識(shi)點(dian)的(de)(de)(de)(de)梳(shu)理不是(shi)一朝一夕就能完成的(de)(de)(de)(de)，為此我(wo)將失去(qu)很(hen)多(duo)休(xiu)息的(de)(de)(de)(de)時間(jian)。白(bai)天要忙碌的(de)(de)(de)(de)工作(zuo)，晚上還得挑(tiao)燈夜戰，精神和(he)(he)肉體都將承受巨大的(de)(de)(de)(de)壓力。

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

一、前期準備

　　前端(duan)面(mian)試(shi)必然離不開各種(zhong)筆試(shi)題(ti)(ti)目(mu)，因此前期的(de)(de)準備工作就是搜(sou)集市面(mian)上已(yi)知(zhi)的(de)(de)前端(duan)題(ti)(ti)目(mu)。通過筆試(shi)網(wang)站(zhan)、個人(ren)博客、Github等(deng)各種(zhong)途徑，搜(sou)集到了(le)國(guo)內和國(guo)外的(de)(de)各類習題(ti)(ti)，總計大概有3、4千道(dao)，每道(dao)題(ti)(ti)目(mu)會涉及(ji)一個或多個前端(duan)知(zhi)識點。這些知(zhi)識點并沒有覆蓋前端(duan)的(de)(de)所有方(fang)面(mian)，我只挑(tiao)選了(le)書中將會用到的(de)(de)部分(fen)。下圖是國(guo)外某個網(wang)站(zhan)的(de)(de)題(ti)(ti)目(mu)列表。

　　在搜集到這么多題后，下一步就是對它們進行分類。分類不能隨便分，是要有根據的，因此要參考一些市面上的權威技術資料。可以是，也可以(yi)是已出(chu)版的(de)(de)書籍，例如(ru)CSS權(quan)威(wei)指南、JavaScript權(quan)威(wei)指南和HTML5權(quan)威(wei)指南（如(ru)下圖(tu)所示(shi)）等。最終我融合了(le)(le)多處資料，列出(chu)了(le)(le)讓我滿意的(de)(de)目(mu)錄，這其實也是本書目(mu)錄的(de)(de)雛形。之所以(yi)叫雛形，是因為在撰寫(xie)過(guo)程中，我一直在調整，有(you)的(de)(de)合并、有(you)的(de)(de)分開(kai)，挑出(chu)重點，更有(you)針對性的(de)(de)講解，同時令其更容易讓讀者理解。搜集(ji)題目(mu)和對其進行分類，前前后后大(da)概花了(le)(le)兩(liang)周不到(dao)的(de)(de)時間，然后就將(jiang)開(kai)始正文的(de)(de)編寫(xie)。

二、撰寫過程

1）參考資料

　　在撰寫過程中，主要參考書籍和。相(xiang)比(bi)較(jiao)個人分(fen)享的(de)博文(wen)，書(shu)籍所(suo)寫的(de)內(nei)容措(cuo)辭更嚴謹、描述更清晰，并(bing)且(qie)更具(ju)權威性。而標(biao)準文(wen)檔雖然內(nei)容比(bi)較(jiao)晦澀(se)難讀，但(dan)(dan)是(shi)(shi)是(shi)(shi)官方所(suo)出(chu)，所(suo)以準確性更高(gao)、術語更專業，如(ru)下(xia)圖所(suo)示。當無法(fa)理解(jie)或對書(shu)籍和(he)文(wen)檔中(zhong)所(suo)記(ji)載的(de)內(nei)容有(you)疑惑時，我會瀏覽網上的(de)資(zi)料，結合這些資(zi)料后，再做出(chu)最終的(de)判(pan)斷。這里吐槽一下(xia)網上的(de)資(zi)料，很多都(dou)是(shi)(shi)抄(chao)來抄(chao)去，并(bing)且(qie)缺少(shao)深入的(de)分(fen)析，大(da)部分(fen)都(dou)只是(shi)(shi)告訴你怎么做，但(dan)(dan)卻不(bu)會告訴你其中(zhong)的(de)內(nei)在原(yuan)理。

2）措辭嚴謹

　　撰書和(he)寫博文(wen)(wen)有(you)個(ge)很(hen)大的(de)區(qu)(qu)別就(jiu)是(shi)措辭。寫博文(wen)(wen)的(de)話可以比(bi)(bi)較隨性，想到(dao)什么就(jiu)寫什么；而寫書就(jiu)不一樣了，這是(shi)要印(yin)在白紙上的(de)，比(bi)(bi)較嚴肅一點(dian)。因此要用最精準的(de)詞(ci)(ci)語(yu)來描述自己(ji)所要傳(chuan)達(da)的(de)意(yi)思(si)(si)。每次遇到(dao)這種情況就(jiu)會(hui)思(si)(si)前(qian)想后(hou)，還要搜索(suo)詞(ci)(ci)語(yu)的(de)意(yi)思(si)(si)，再分別放到(dao)語(yu)句中，反復體會(hui)，最后(hou)才(cai)會(hui)敲(qiao)定(ding)(ding)用哪個(ge)詞(ci)(ci)語(yu)。雖(sui)然不會(hui)像文(wen)(wen)學那樣講究，但為了更(geng)嚴謹一些，詞(ci)(ci)語(yu)的(de)推敲(qiao)還是(shi)有(you)必要的(de)。例(li)如(ru)在編(bian)寫時遇到(dao)了“制(zhi)(zhi)定(ding)(ding)”和(he)“制(zhi)(zhi)訂(ding)”，兩個(ge)詞(ci)(ci)語(yu)發音都是(shi)一樣的(de)，并且字也差不多(duo)，稍不留(liu)神就(jiu)會(hui)混(hun)用，最后(hou)查了詞(ci)(ci)語(yu)釋義后(hou)，才(cai)弄清楚兩者(zhe)之間的(de)區(qu)(qu)別，“制(zhi)(zhi)定(ding)(ding)”偏(pian)重于做出最后(hou)決定(ding)(ding)，使完全確(que)定(ding)(ding)下(xia)來，“制(zhi)(zhi)訂(ding)”偏(pian)重于從(cong)無到(dao)有(you)的(de)創制(zhi)(zhi)、草(cao)擬而后(hou)的(de)訂(ding)立。“制(zhi)(zhi)定(ding)(ding)”常(chang)與政策(ce)、法(fa)令(ling)、方針、路線等(deng)搭配，“制(zhi)(zhi)訂(ding)”常(chang)與計劃、方案等(deng)搭配。再例(li)如(ru)“的(de)”和(he)“地(di)”、“判定(ding)(ding)”和(he)“判斷”等(deng)，它們的(de)用法(fa)都要加以區(qu)(qu)別，否則就(jiu)會(hui)混(hun)用。

3）專業術語

　　無論是(shi)CSS、HTML，還是(shi)JavaScript都(dou)包含(han)許多專(zhuan)業術語(yu)，而最(zui)容(rong)易忽(hu)略的(de)(de)(de)恰(qia)恰(qia)是(shi)這(zhe)些(xie)專(zhuan)業術語(yu)。因(yin)為(wei)在(zai)(zai)平時的(de)(de)(de)交流(liu)(liu)中(zhong)(zhong)，大家想不(bu)到或者說不(bu)必(bi)用(yong)專(zhuan)業術語(yu)來交流(liu)(liu)，都(dou)會(hui)用(yong)約定俗成(cheng)的(de)(de)(de)口語(yu)來表述。例(li)如最(zui)常見的(de)(de)(de)引(yin)用(yong)CSS樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)，可以(yi)分為(wei)內(nei)聯(lian)樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)、內(nei)嵌(qian)樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)和(he)外(wai)部樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)，但(dan)我(wo)們平時可能(neng)就不(bu)這(zhe)么稱(cheng)呼，內(nei)聯(lian)樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)可以(yi)叫做(zuo)標簽(qian)內(nei)的(de)(de)(de)樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)、內(nei)嵌(qian)樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)可以(yi)叫做(zuo)頁(ye)面內(nei)的(de)(de)(de)樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)、外(wai)部樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)可以(yi)叫做(zuo)CSS文(wen)件內(nei)的(de)(de)(de)樣(yang)(yang)(yang)式(shi)(shi)(shi)(shi)。在(zai)(zai)平時交流(liu)(liu)中(zhong)(zhong)這(zhe)么稱(cheng)呼都(dou)沒問題，但(dan)在(zai)(zai)書中(zhong)(zhong)卻(que)不(bu)能(neng)這(zhe)么做(zuo)，如果每(mei)(mei)次(ci)都(dou)用(yong)這(zhe)么口語(yu)化的(de)(de)(de)稱(cheng)呼，那么難(nan)免會(hui)顯得不(bu)專(zhuan)業，并且內(nei)容(rong)還特別冗余，語(yu)句的(de)(de)(de)前后很(hen)(hen)難(nan)連貫。自己(ji)以(yi)前也不(bu)怎(zen)么注意這(zhe)些(xie)專(zhuan)業術語(yu)，因(yin)此每(mei)(mei)次(ci)都(dou)要翻閱好幾本技術書籍(ji)，以(yi)及瀏覽(lan)相關的(de)(de)(de)標準文(wen)檔。標準文(wen)檔是(shi)最(zui)權威的(de)(de)(de)，但(dan)都(dou)是(shi)英文(wen)的(de)(de)(de)，當把英文(wen)翻成(cheng)中(zhong)(zhong)文(wen)時，又會(hui)有(you)很(hen)(hen)多個版本。由于每(mei)(mei)個版本都(dou)會(hui)有(you)些(xie)差異，因(yin)此我(wo)在(zai)(zai)選擇(ze)時都(dou)會(hui)反復斟酌。

4）描述清晰

　　以(yi)前(qian)(qian)寫(xie)(xie)博(bo)文的(de)(de)(de)(de)(de)(de)(de)(de)時(shi)(shi)(shi)候，為了貫徹(che)自己(ji)簡潔的(de)(de)(de)(de)(de)(de)(de)(de)風格，都(dou)會跳(tiao)著寫(xie)(xie)，前(qian)(qian)后并不(bu)會連貫，類似于記(ji)筆記(ji)。雖然(ran)(ran)很方(fang)(fang)便，但這(zhe)(zhe)種(zhong)方(fang)(fang)式(shi)卻不(bu)能(neng)(neng)移植(zhi)到寫(xie)(xie)書中，因(yin)為兩段(duan)(duan)內(nei)(nei)容(rong)(rong)之(zhi)間沒有承上啟下(xia)的(de)(de)(de)(de)(de)(de)(de)(de)過渡，就會不(bu)容(rong)(rong)易理解。書寫(xie)(xie)出(chu)來是(shi)(shi)為了給讀(du)(du)者看的(de)(de)(de)(de)(de)(de)(de)(de)，讀(du)(du)者如(ru)果(guo)看不(bu)懂，那么這(zhe)(zhe)就是(shi)(shi)一部失敗(bai)的(de)(de)(de)(de)(de)(de)(de)(de)作品。在(zai)寫(xie)(xie)書的(de)(de)(de)(de)(de)(de)(de)(de)時(shi)(shi)(shi)候，時(shi)(shi)(shi)時(shi)(shi)(shi)刻(ke)刻(ke)都(dou)在(zai)提醒自己(ji)要(yao)站在(zai)讀(du)(du)者的(de)(de)(de)(de)(de)(de)(de)(de)角度(du)理解。舉個簡單的(de)(de)(de)(de)(de)(de)(de)(de)例子，在(zai)說明某個知(zhi)識(shi)點的(de)(de)(de)(de)(de)(de)(de)(de)時(shi)(shi)(shi)候，通(tong)常(chang)會配(pei)一段(duan)(duan)代碼。以(yi)往我(wo)都(dou)是(shi)(shi)直接寫(xie)(xie)在(zai)相關內(nei)(nei)容(rong)(rong)的(de)(de)(de)(de)(de)(de)(de)(de)前(qian)(qian)面或(huo)后面，而(er)且并不(bu)會對(dui)代碼做進(jin)一步(bu)的(de)(de)(de)(de)(de)(de)(de)(de)說明。想當然(ran)(ran)的(de)(de)(de)(de)(de)(de)(de)(de)以(yi)為讀(du)(du)者在(zai)瀏(liu)覽這(zhe)(zhe)段(duan)(duan)內(nei)(nei)容(rong)(rong)后，就能(neng)(neng)知(zhi)道這(zhe)(zhe)段(duan)(duan)代碼與內(nei)(nei)容(rong)(rong)是(shi)(shi)有關聯(lian)的(de)(de)(de)(de)(de)(de)(de)(de)。這(zhe)(zhe)是(shi)(shi)大錯(cuo)特錯(cuo)，應該避免讓讀(du)(du)者去猜，這(zhe)(zhe)樣(yang)既浪費時(shi)(shi)(shi)間，也會影響(xiang)閱(yue)(yue)讀(du)(du)體驗，有百害而(er)無一利。每次(ci)要(yao)描述一個知(zhi)識(shi)點或(huo)術語(yu)（例如(ru)對(dui)語(yu)義(yi)化的(de)(de)(de)(de)(de)(de)(de)(de)說明）時(shi)(shi)(shi)，都(dou)會出(chu)現(xian)欲言又止的(de)(de)(de)(de)(de)(de)(de)(de)情況，心里明明很清楚這(zhe)(zhe)是(shi)(shi)什么，但就是(shi)(shi)無法用(yong)(yong)文字來準確的(de)(de)(de)(de)(de)(de)(de)(de)描述出(chu)來。這(zhe)(zhe)種(zhong)情況循環往復的(de)(de)(de)(de)(de)(de)(de)(de)出(chu)現(xian)著，書到用(yong)(yong)時(shi)(shi)(shi)方(fang)(fang)恨少(shao)，這(zhe)(zhe)種(zhong)時(shi)(shi)(shi)候真的(de)(de)(de)(de)(de)(de)(de)(de)對(dui)自己(ji)的(de)(de)(de)(de)(de)(de)(de)(de)詞匯(hui)量感到無奈。每次(ci)在(zai)翻閱(yue)(yue)許許多多的(de)(de)(de)(de)(de)(de)(de)(de)資料后，才能(neng)(neng)寫(xie)(xie)出(chu)令(ling)自己(ji)滿意的(de)(de)(de)(de)(de)(de)(de)(de)文案。每當寫(xie)(xie)完一篇章節時(shi)(shi)(shi)，都(dou)會覺得自己(ji)的(de)(de)(de)(de)(de)(de)(de)(de)身體被(bei)掏(tao)空了一次(ci)。

5）細節把握

　　除(chu)了剛(gang)剛(gang)所(suo)說的(de)(de)四(si)點(dian)，還(huan)有(you)一(yi)(yi)(yi)點(dian)很重要(yao)(yao)，那(nei)就是細節的(de)(de)把握(wo)。例(li)如(ru)全書(shu)中的(de)(de)寫法要(yao)(yao)統一(yi)(yi)(yi)，無論是標(biao)點(dian)符號(hao)(hao)還(huan)是剛(gang)剛(gang)所(suo)說的(de)(de)術語，都要(yao)(yao)一(yi)(yi)(yi)樣(yang)，如(ru)果(guo)用了中文(wen)符號(hao)(hao)，那(nei)么沒有(you)特殊情況(kuang)就一(yi)(yi)(yi)律用中文(wen)符號(hao)(hao)。如(ru)果(guo)把HTML元素的(de)(de)style屬性中定(ding)義的(de)(de)樣(yang)式叫內(nei)聯樣(yang)式，那(nei)么所(suo)有(you)的(de)(de)地方(fang)都要(yao)(yao)這么叫。還(huan)有(you)其它一(yi)(yi)(yi)些(xie)細節，例(li)如(ru)示例(li)代碼的(de)(de)編排，為(wei)了提升閱(yue)讀體驗，可(ke)以將(jiang)各條語句(ju)的(de)(de)注釋以首(shou)字母對齊；為(wei)每(mei)張(zhang)圖設定(ding)一(yi)(yi)(yi)個編號(hao)(hao)，可(ke)以在閱(yue)讀時更精準的(de)(de)定(ding)位(wei)到(dao)某張(zhang)圖等；在合適的(de)(de)位(wei)置用句(ju)號(hao)(hao)來結束一(yi)(yi)(yi)段話。

三、總結

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

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