摘要：不管你是想涉獵前端抑或進(jìn)行系統(tǒng)性的學(xué)習(xí)，我都推薦大家閱讀前端的相關(guān)書(shū)籍。那么對(duì)于想入門(mén)或者扎實(shí)前端基礎(chǔ)的童鞋來(lái)說(shuō)我們應(yīng)該挑選哪幾把適合我們的書(shū)籍呢下面我就推薦本帶我踏入前端并產(chǎn)生較大幫助的圖書(shū)供大家參考。

作為一名前端開(kāi)發(fā)人員，如果你告訴我你沒(méi)有看過(guò)任何關(guān)于前端的書(shū)籍，那么我完全可以認(rèn)為你不是一名合格的前端開(kāi)發(fā)工程師。為什么我要以“看書(shū)”來(lái)衡量合格前端的標(biāo)準(zhǔn)？因?yàn)榍岸俗鳛橐粋€(gè)特殊的極具變化與開(kāi)拓性的工種，沒(méi)有較強(qiáng)的自我學(xué)習(xí)與思考能力，很難在這激烈又紛雜的環(huán)境里存活而不被淘汰，而“看書(shū)”則是最基本的自我提升與補(bǔ)充知識(shí)的途徑。

書(shū)中自有黃金屋。不管你是想涉獵前端抑或進(jìn)行系統(tǒng)性的學(xué)習(xí)，我都推薦大家閱讀前端的相關(guān)書(shū)籍。那么對(duì)于想入門(mén)或者扎實(shí)前端基礎(chǔ)的童鞋來(lái)說(shuō)我們應(yīng)該挑選哪幾把適合我們的書(shū)籍呢？下面我就推薦5本帶我踏入前端并產(chǎn)生較大幫助的圖書(shū)供大家參考。

這本書(shū)是前端開(kāi)發(fā)領(lǐng)域的經(jīng)典之作，是一本扎實(shí)前端基本功，規(guī)范我們前端代碼的實(shí)踐性書(shū)籍。本書(shū)主要講解了HTML、CSS、Javascript以及移動(dòng)端開(kāi)發(fā)的最佳實(shí)踐方案，能夠?qū)θ狈α己弥笇?dǎo)的開(kāi)發(fā)者產(chǎn)生很大的幫助。通過(guò)閱讀本書(shū)我們可以掌握如何編寫(xiě)高可讀性、高維護(hù)性、高性能的HTML、CSS以及Javascript。比如：

    
Web前端開(kāi)發(fā)最佳實(shí)踐
    
編寫(xiě)可維護(hù)的Javascript
    
鋒利的jQuery
    
圖解HTTP
    
Javascript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐

本書(shū)是我極力推薦的一本幫助大家改善Javascript編程風(fēng)格與編碼規(guī)范的書(shū)籍。那么為什么我們要如此注重JS的編碼規(guī)范？引用高德納的一句話(huà)就是：程序是寫(xiě)給人讀的，只是偶爾讓計(jì)算機(jī)執(zhí)行一下。在我們的日常開(kāi)發(fā)中，往往維護(hù)代碼的時(shí)間占據(jù)著很大比重， 既然這樣那么為什么我們不在編寫(xiě)代碼的時(shí)候就重視它呢？以下是書(shū)中的兩個(gè)例子：

// 二元運(yùn)算符前后必須使用一個(gè)空格來(lái)保持表達(dá)式的整潔
// 好的寫(xiě)法，使用空格
for (i = 0; i < count; i++) {
    process(i);
}

// 不好的寫(xiě)法，丟失了空格
for (i=0; i
// 函數(shù)的第一個(gè)單詞名稱(chēng)應(yīng)該是動(dòng)詞（而不是名詞），以避免與變量混淆。
// 好的寫(xiě)法，第一個(gè)單詞是動(dòng)詞
function doSomething() {
    // 代碼
}

// 不好的寫(xiě)法，第一個(gè)單詞是名詞
function car() {
    // 代碼
}
3. 鋒利的jQuery

這本書(shū)應(yīng)該算是學(xué)習(xí)jQuery必讀的一本書(shū)，也是講解jQuery的經(jīng)典之作。在正式學(xué)習(xí)這本書(shū)之前，你有必要先了解下原生Javascript，才能領(lǐng)悟jQuery其“write less， do more”的理念。本書(shū)深入淺出的介紹了jQuery的代碼風(fēng)格、選擇器、事件及動(dòng)畫(huà)等，結(jié)合豐富的實(shí)例讓讀者能夠快速理解與應(yīng)用。比如：
var $ul = $("ul").prev(); // 獲取緊鄰
元素前的同輩元素
var $p = $("p").siblings(); // 獲取
元素的同輩元素
$("input").trigger("focus"); // 觸發(fā)輸入框focus事件并獲取焦點(diǎn)
$("input").triggerHandler("focus"); // 觸發(fā)輸入框focus事件但不會(huì)獲取焦點(diǎn)
4. 圖解HTTP

作為和瀏覽器打交道的前端開(kāi)發(fā)者，我們理應(yīng)學(xué)習(xí)關(guān)于頁(yè)面從請(qǐng)求開(kāi)始到呈現(xiàn)的過(guò)程和實(shí)現(xiàn)方式，而這本書(shū)便是快速了解HTTP請(qǐng)求背后原理的不二之選。本書(shū)結(jié)合漫畫(huà)圖片的形式講解HTTP協(xié)議、工作機(jī)制、報(bào)文及狀態(tài)碼等，圖文并茂，通俗易懂。示例：
// 請(qǐng)求首部字段
Host: www.hackr.jp  // Host會(huì)告知服務(wù)器，請(qǐng)求資源所處的互聯(lián)網(wǎng)主機(jī)名與端口號(hào)
Range: bytes=5001-10000 // 告知服務(wù)器資源的指定范圍
// 響應(yīng)首部字段
Age: 600 // 告知客戶(hù)端，源服務(wù)器在多久前創(chuàng)建了響應(yīng)
Retry-After: 120 // 告知客戶(hù)端應(yīng)該在多久之后再次發(fā)送請(qǐng)求
5. Javascript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐

之所以把這本書(shū)放在最后是因?yàn)殚喿x這本書(shū)需要一定的Javascript基礎(chǔ)與功底，當(dāng)我們掌握了JS的語(yǔ)法與編碼規(guī)范后再來(lái)翻閱此書(shū)，你會(huì)獲得別樣的收獲。那么為什么我們要研究設(shè)計(jì)模式？使用設(shè)計(jì)模式能夠給我們解決怎樣的問(wèn)題？
我想答案和小說(shuō)家為什么很少?gòu)拈_(kāi)始設(shè)計(jì)劇情，足球教練為什么也很少?gòu)念^開(kāi)始發(fā)明戰(zhàn)術(shù)一樣，他們總是沿襲了一些已經(jīng)存在的模式來(lái)解決問(wèn)題。下面是書(shū)中的兩種模式：
// 單例模式: 保證一個(gè)類(lèi)僅有一個(gè)實(shí)例，并提供一個(gè)全局的訪問(wèn)點(diǎn)
var getSingle = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments));
    }
};
// 策略模式：定義一系列算法，把它們一個(gè)個(gè)封裝起來(lái)，并且使它們可以相互替換
var strategies = {
    "S": function(salary) {
        return salary * 4;
    },
    "A": function(salary) {
        return salary * 3;
    }
};

var calculateBonus = function(level, salary) {
    return strategies[level](salary);
};
結(jié)語(yǔ)
為什么那些工作沒(méi)幾年的人很快就遇到了自己的技術(shù)瓶頸？ 為什么那些工作了5年以上的人還寫(xiě)著一手難以維護(hù)的代碼？我想在以上5本書(shū)中便可找到答案。
當(dāng)然除了文本中推薦的5本前端入門(mén)書(shū)籍，還有很多優(yōu)秀的書(shū)籍沒(méi)能在此一一推薦，請(qǐng)見(jiàn)諒。
正所謂紙上得來(lái)終覺(jué)淺，絕知此事要躬行。除了從書(shū)中汲取我們所需的知識(shí)外，我們還需要將理論化為實(shí)踐，親自動(dòng)手敲擊鍵盤(pán)，從而加深并鞏固書(shū)中的知識(shí)點(diǎn)，才能羽化而登仙。
本文為勞卜原創(chuàng)文章，首發(fā)于微信公眾號(hào)：前端呼啦圈（Love-FED）
轉(zhuǎn)載請(qǐng)注明來(lái)自——微信公眾號(hào)：前端呼啦圈（Love-FED）