学习前端我推荐这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）