學習前端我推薦這5本書

前言

作為一名前端開發人員，如果你告訴我你沒有看過任何關於前端的書籍，那麼我完全可以認為你不是一名合格的前端開發工程師。為什麼我要以“看書”來衡量合格前端的標準？因為前端作為一個特殊的極具變化與開拓性的工種，沒有較強的自我學習與思考能力，很難在這激烈又紛雜的環境里存活而不被淘汰，而“看書”則是最基本的自我提升與補充知識的途徑。

書中自有黃金屋。不管你是想涉獵前端抑或進行系統性的學習，我都推薦大家閱讀前端的相關書籍。那麼對於想入門或者扎實前端基礎的童鞋來說我們應該挑選哪幾把適合我們的書籍呢？下麵我就推薦5本帶我踏入前端並產生較大幫助的圖書供大家參考。

書單

1. Web前端開發最佳實踐

這本書是前端開發領域的經典之作，是一本扎實前端基本功，規範我們前端代碼的實踐性書籍。本書主要講解了HTML、CSS、Javascript以及移動端開發的最佳實踐方案，能夠對缺乏良好指導的開發者產生很大的幫助。通過閱讀本書我們可以掌握如何編寫高可讀性、高維護性、高性能的HTML、CSS以及Javascript。比如：

<!-- 如果class名稱僅作為Javascript調用的“鉤子”，可在名稱中添加“js”首碼 -->
<ul id="js_mylist">
    <li class="menu js-active">Web前端開發最佳實踐</li>
    <li class="menu">編寫可維護的Javascript</li>
    <li class="menu">鋒利的jQuery</li>
    <li class="menu">圖解HTTP</li>
    <li class="menu">Javascript設計模式與開發實踐</li>
</ul>

<!-- 為了做到禁用腳本時頁面自動跳轉，百度首頁中添加瞭如下代碼 -->
<noscript>
    <meta http-equiv=refresh content="0; url=http://www.baidu.com/baidu.html?from=noscript">
</noscript>

2. 編寫可維護的Javascript

本書是我極力推薦的一本幫助大家改善Javascript編程風格與編碼規範的書籍。那麼為什麼我們要如此註重JS的編碼規範？引用高德納的一句話就是：程式是寫給人讀的，只是偶爾讓電腦執行一下。在我們的日常開發中，往往維護代碼的時間占據著很大比重， 既然這樣那麼為什麼我們不在編寫代碼的時候就重視它呢？以下是書中的兩個例子：

// 二元運算符前後必須使用一個空格來保持表達式的整潔
// 好的寫法，使用空格
for (i = 0; i < count; i++) {
    process(i);
}

// 不好的寫法，丟失了空格
for (i=0; i<count; i++) {
    process(i);
}

// 函數的第一個單詞名稱應該是動詞（而不是名詞），以避免與變數混淆。
// 好的寫法，第一個單詞是動詞
function doSomething() {
    // 代碼
}

// 不好的寫法，第一個單詞是名詞
function car() {
    // 代碼
}

3. 鋒利的jQuery

這本書應該算是學習jQuery必讀的一本書，也是講解jQuery的經典之作。在正式學習這本書之前，你有必要先瞭解下原生Javascript，才能領悟jQuery其“write less， do more”的理念。本書深入淺出的介紹了jQuery的代碼風格、選擇器、事件及動畫等，結合豐富的實例讓讀者能夠快速理解與應用。比如：

var $ul = $('ul').prev(); // 獲取緊鄰<ul>元素前的同輩元素
var $p = $('p').siblings(); // 獲取<p>元素的同輩元素

$('input').trigger('focus'); // 觸發輸入框focus事件並獲取焦點
$('input').triggerHandler('focus'); // 觸發輸入框focus事件但不會獲取焦點

4. 圖解HTTP

作為和瀏覽器打交道的前端開發者，我們理應學習關於頁面從請求開始到呈現的過程和實現方式，而這本書便是快速瞭解HTTP請求背後原理的不二之選。本書結合漫畫圖片的形式講解HTTP協議、工作機制、報文及狀態碼等，圖文並茂，通俗易懂。示例：

// 請求首部欄位
Host: www.hackr.jp  // Host會告知伺服器，請求資源所處的互聯網主機名與埠號
Range: bytes=5001-10000 // 告知伺服器資源的指定範圍

// 相應首部欄位
Age: 600 // 告知客戶端，源伺服器在多久前創建了響應
Retry-After: 120 // 告知客戶端應該在多久之後再次發送請求

5. Javascript設計模式與開發實踐

之所以把這本書放在最後是因為閱讀這本書需要一定的Javascript基礎與功底，當我們掌握了JS的語法與編碼規範後再來翻閱此書，你會獲得別樣的收穫。那麼為什麼我們要研究設計模式？使用設計模式能夠給我們解決怎樣的問題？

我想答案和小說家為什麼很少從開始設計劇情，足球教練為什麼也很少從頭開始發明戰術一樣，他們總是沿襲了一些已經存在的模式來解決問題。下麵是書中的兩種模式：

// 單例模式: 保證一個類僅有一個實例，並提供一個全局的訪問點
var getSingle = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments));
    }
};

// 策略模式：定義一系列演算法，把它們一個個封裝起來，並且使它們可以相互替換
var strategies = {
    "S": function(salary) {
        return salary * 4;
    },
    "A": function(salary) {
        return salary * 3;
    }
};

var calculateBonus = function(level, salary) {
    return strategies[level](salary);
};

結語

為什麼那些工作沒幾年的人很快就遇到了自己的技術瓶頸？ 為什麼那些工作了5年以上的人還寫著一手難以維護的代碼？我想在以上5本書中便可找到答案。

當然除了文本中推薦的5本前端入門書籍，還有很多優秀的書籍沒能在此一一推薦，請見諒。

正所謂紙上得來終覺淺，絕知此事要躬行。除了從書中汲取我們所需的知識外，我們還需要將理論化為實踐，親自動手敲擊鍵盤，從而加深並鞏固書中的知識點，才能羽化而登仙。

本文為勞卜原創文章，首發於微信公眾號：前端呼啦圈（Love-FED）

轉載請註明來自——微信公眾號：前端呼啦圈（Love-FED）

公眾號地址 簡書地址 segmentfault地址