Web开发技术丛书：Web前端开发最佳实践

Web前端开发领域经典著作，深入分析Web前端开发中与HTML、CSS、JavaScript以及Web移动端开发相关的技术方案、技巧和最佳实践，包含大量范例，极具指导意义。

更多精彩，点击进入品牌店查阅>>

最近几年，Web前端的发展非常迅速，并呈现出一片欣欣向荣的景象。但同时层出不穷的新技术又扰乱了开发者的思绪，造成了很多开发者疲于学习新技术而忽略了最基础的技术修炼，产生了浮躁的心态。很多开发者介绍全新技术时头头是道，然而却无法写出一个符合W3C规范的HTML页面。国内Web前端开发者普遍不重视代码规范，以及网站前端性能。很多网站甚至连最基本的前端代码压缩和合并都没有。
《Web开发技术丛书：Web前端开发上佳实践》立足于Web前端开发的基础，介绍如何编写符合W3C规范、可维护性好且高性能的Web前端代码。
《Web开发技术丛书：Web前端开发上佳实践》的主要内容和特色：
以W3C Web规范为基础展开讨论，介绍Web前端开发中的上佳实践方法及编码风格。为Web前端开发人员快速成长提供了一条捷径。
介绍了大量近年来涌现出来的并已经得到广泛应用的工具和技术方案，有利于开发者从事Web前端开发打下结实的基础。
循序渐进地介绍了Web前端开发中的HTML、CSS、JavaScript编码实践方法，并同时介绍了Web移动端开发的实践。让读者能对Web前端开发有一个全面的理解和认知。

党建，资深Web前端开发工程师。毕业于西安电子科技大学，后任职于西安葡萄城信息技术有限公司，从事Web前端和Web控件开发多年。目前为西安瑞木信息技术有限公司合伙人，负责公司Web项目前端架构及Web前端开发培训工作。精通HTML、CSS、JavaScript等前端技术，对ASP。NET、Node。js等Web开发技术也有深入的研究。善于总结各种开发上佳实践，并致力于Web相关规范的推广。

★市面上的书大多以讲解API为主，仅适合入门。而本书选了不常见却极为实用的方向——实践技巧来进行创作，实为难得。这种书很难写，没有丰富的经验是写不出这种书的。API是死的，无论新手、老手，还是高手，API的用法都是一样的，而实践技巧是活的，100个人可能会有100种实践，能力高低大部分体现在这里——新手和高手写出来的代码一眼就能看出来。如果你正为进阶和实践技巧犯愁，那么本书正是你需要的；如果你已经形成个人的编程风格，不妨也来看看这本书中的实践技巧和你有多少出入，取长补短。
—— 曹刘阳（阿当） 创业中的首席架构师，《编写高质量代码：Web前端开发修炼之道》作者

★本书是近年来前端开发相关书籍和网络资料的集大成者，以广阔的视角阐述了前端开发人员需要掌握的专业知识和开发工具，同时用工程化的方式来培养编程习惯、提升开发效率，是前端开发人员和项目管理者的必备参考。目前的前端非常繁荣，也非常混乱，有太多的作品和人需要鉴别、学习；而大部分前端开发人员并非科班出身，在轻松踏入前端领域后，很快会在开发技能和项目管理上遇到瓶颈，正所谓“乱花渐欲迷人眼，浅草才能没马蹄”。本书则系统地对前端开发的历史和现状进行了思考与整理，为前端开发人员指明了一条成长之路，也为前端项目管理提供了行之有效的评估标准。
—— 高云 阿里巴巴资深前端开发工程师，《jQuery技术内幕》作者

★本书基于作者多年在实际项目中所积累的丰富编程经验，深入浅出地介绍了Web前端和移动端的代码编程技术，无论初级、中级或高级Web和移动开发编程人员，都可以从本书中学习到有用的实际项目的经验，比如：
什么是合理、有效的前端架构；
如何写出高质量、高性能、可维护的HTML/CSS/JavaScript代码；
如何重构HTML/CSS/JavaScript代码；
如何调试前端代码。
“真相只存在于代码之中。”对于一个追求高质量架构和HTML/CSS/JavaScript代码的专业编程人员来说，本书是一本不可多得的好书。
— —冯伟GrapeCity 公司技术主管

前言

第一部分 高效Web前端开发综述
第1章 Web前端开发概述
1.1 Web前端开发的范畴
1.1.1 什么是Web前端开发
1.1.2 Web前端开发需要具备的技能
1.2 Web前端开发现状
1.3 规范的Web前端代码：更易维护、更高性能和更安全
第2章 高效Web前端开发
2.1 前端代码的结构组织和文件的命名
2.2 前端代码重构
2.3 合理使用前端框架
2.4 多浏览器测试：多测试，早测试
2.5 Web前端代码开发和调试
2.5.1 Web前端集成开发环境
2.5.2 Web前端代码调试
2.5.3 Web前端性能分析
2.5.4 代码和资源的压缩与合并
2.6 前端代码基本命名规范和格式规范
2.6.1 HTML命名规范及格式规范
2.6.2 CSS命名规范及格式规范
2.6.3 JavaScript命名规范及格式规范

第二部分 HTML最佳实践
第3章 标准的HTML代码
3.1 验证代码是否符合标准
3.2 标准的HTML页面结构
3.3 正确闭合HTML标签
3.4 停止使用不标准的标签和属性，简化HTML代码
3.5 样式与结构分离
3.6 添加JavaScript禁用的提示信息
3.7 添加必要的标签
第4章 高可读性的HTML
4.1 HTML语义化
4.2 如何设置网页标题层级
4.3 如何正确设计表单
4.4 精简HTML代码
4.5 过时的块状元素和行内元素
第5章 积极拥抱HTML5
5.1 HTML5新特性的使用
5.1.1 使用HTML5中简化的定义方式
5.1.2 使用HTML5中的新标签和新属性
5.2 不要使用HTML5中已废弃的标签和属性
5.3 如何处理浏览器的兼容问题

第三部分 CSS最佳实践
第6章 高维护性的CSS
6.1 如何高效地组织CSS代码
6.2 使用CSS Reset：统一浏览器显示效果
6.3 给CSS样式定义排序
6.4 合理利用CSS的权重：提高代码的重用性
6.5 CSS代码的兼容性：如何兼容IE浏览器
6.6 em、px还是%
第7章 高性能的CSS
7.1 使用高效的CSS选择器
7.2 CSS相关的图片处理
7.3 减少CSS的代码量
7.4 其他CSS高性能实践
第8章 CSS3相关最佳实践
8.1 查看浏览器的支持情况
8.2 添加必要的浏览器前缀
8.3 做好CSS3中新特性的兼容处理

第四部分 JavaScript最佳实践
第9章 高维护性的JavaScript
9.1 养成良好的编码习惯，提高代码的可维护性
9.2 使用更严格的编码格式
9.3 事件处理和业务逻辑分离
9.4 配置数据和代码逻辑分离
9.5 逻辑与结构样式分离
9.5.1 从JavaScript代码逻辑中分离CSS样式
9.5.2 从JavaScript代码逻辑中分离HTML结构
9.6 JavaScript模板的使用
9.7 在JavaScript开发中应用MVC模式
9.8 JavaScript模块化开发
9.9 合理使用AJAX技术
第10章 高性能的JavaScript
10.1 加快JavaScript文件的加载速度
10.2 养成良好的编码习惯，提高代码运行速度
10.3 使用高性能的变量或属性值读取方式
10.4 高效的DOM操作
10.5 使用辅助工具优化JavaScript代码性能
第11章 高安全性的JavaScript
11.1 常见的Web前端攻击方式
11.2 不要轻易信任任何外部传入的数据
11.3 其他前端安全防范实践

第五部分 移动Web前端开发
第12章 移动Web前端开发最佳实践
12.1 移动Web前端开发概述
12.1.1 主流的移动终端和移动浏览器
12.1.2 移动端和桌面端Web前端开发的差异
12.1.3 如何让桌面Web页面兼容移动设备
12.1.4 开发移动Web站点的准备工作
12.2 移动Web前端开发相关技术最佳实践
12.2.1 HTML相关最佳实践
12.2.2 CSS相关最佳实践
12.2.3 JavaScript相关最佳实践

为什么要写这本书
Web前端开发入门难度并不高，但是初学者如果没有一个很好的学习和编码习惯，则开发水平的提高速度会变得很慢。下面几点是影响Web前端开发者技术提高的主要因素。
其一是开发者缺乏良好的实践指导。Web前端兴起的时间不长，很多大学都还没有来得及开一门专门讲解Web前端的课程，因此，大部分的Web前端开发者都是通过自学的方式来了解Web前端相关的技术。开发者学习前端技术的渠道很多，其中很大一部分是通过查找网络资源的方式，而网络上充斥着大量的错误或者过时的实践方法，这些实践方法很容易误导初学者，使得初学者养成了一些不良的开发习惯。因此，Web前端开发的初学者非常需要一些能帮助他们快速、正确地进行Web前端开发的最佳实践方法。
其二是开发者容易产生浮躁的情绪。Web前端虽然兴起时间不长，但是发展很迅速，技术的更新换代也非常快，这本来是一件好事情，但也使得很多Web前端开发者产生了浮躁的情绪。开发者疲于追逐各种最新的技术，而忽略了最基础的技术概念。这些开发者对Node. js、AngularJS、Polymer等相关概念相当熟悉，但对HTML标准规范、AJAX的原理、CSS选择器的优先级等基本的概念却理解得不够深入。实质上，虽然Web前端技术更新换代速度很快，但也离不开HTML、CSS、JavaScript这3个基本的技术。Web前端的开发者应该明白：只有掌握了扎实的基础知识，才能在学习新技术的时候更容易上手，并且更快地理解新技术的原理，否则只是接触新技术的皮毛而已。
其三是开发者不善于利用各种开发工具。人类文明之所以快速发展，和人类善于使用工具是分不开的。人类是感性动物，并不能保证每次都能正确地做同样的事情，但工具不一样，只要环境相同，工具每次处理的结果应该是一样的。类比到Web前端开发中，聪明的程序员应该学会利用各种辅助开发工具来提高开发效率，减少不必要的错误。Web前端开发中的工具覆盖了开发过程的方方面面，包括设计、开发、测试、部署等阶段的辅助工具。善于使用工具也是Web前端开发中必备的一项技能。
笔者从2002年开始接触软件开发，先后接触过各种主流的开发技术，包括各种Web开发技术。从2008年开始，主要从事Web前端开发的工作。在这么多年的Web网站开发过程中，笔者深知技术基础、编码规范、辅助开发工具对软件开发的重要性，因此，在平时的开发中会特别注重这方面的积累，也非常乐意分享个人的开发经验以及使用过的效果较好的开发工具。
本书综合了笔者这些年来积累的各种Web前端开发经验以及各种高效的Web前端开发实践。如果把这些实践方法称为最佳实践，则有可能会引来争议，但这些实践方法的确是认可度很高的方法。从内容上说，本书是一本介绍如何高效地从事Web前端开发的书籍，而不是讲解Web前端技术的书籍。虽然技术更新非常快，但高效的开发实践方法则相对会更新得慢一些。开发者掌握这些高效的实践方法，会在开发过程中节省大量的成本，另外，在学习新技术的过程中，也会应对自如。
读者对象
本书主要适合以下读者：
对Web前端有浓厚兴趣的读者
Web前端开发工程师
Web项目的管理人员
如何阅读本书
本书将分为五大部分，第一部分为概述，第二、三、四部分分别介绍HTML、CSS、JavaScript相关的实践方法，最后一部分简单介绍移动Web开发相关的实践方法。每个部分相对独立，读者可以从头至尾通读，也可以选择感兴趣的部分
阅读。
第一部分（第1、2章）为高效Web前端开发综述。这部分将介绍前端开发中的基本规范、代码组织、重构及测试相关话题，同时也介绍一些好用的开发辅助
工具。
第二部分（第3～5章）为HTML相关开发最佳实践。这部分贴合W3C标准，介绍如何编写符合标准的、语义化的、可维护性高的HTML代码，并简单介绍HTML5规范中新添加的标签和属性的使用。
第三部分（第6～8章）为CSS相关开发最佳实践。这部分介绍如何编写高维护性和高性能的CSS代码。并简单介绍如何高效地使用CSS3中新添加的特性。
第四部分（第9～11章）为JavaScript相关开发最佳实践。该部分同样包含了如何编写高维护性和高性能的JavaScript代码。同时，编写JavaScript代码也要考虑代码的安全性，因此，该部分也会介绍Web前端中的各种攻击及防范方法。
第五部分（第12章）为移动Web开发相关最佳实践。移动Web开发兴起的时间不长，很多开发实践方法也在总结和摸索阶段。前面四部分介绍的大部分实践方法同样适用于移动Web开发。另外，这个部分会简单介绍在移动Web开发时特别需要关注的实践方法。
勘误和支持
由于作者的水平有限，书中难免会出现一些错误或者不准确的地方，恳请读者批评指正。本书引用了大量的网络资源，但随着时间的推移，很难保证所有的资源都可以访问，因此，我把部分网络引用资源备份到我的个人网站：https://www.dang-jian.com，供读者查阅。同时，在该网站上也提供了本书中的源代码的下载。另外，在该网站上开辟了一个专门的栏目，用于勘误和问题咨询，欢迎读者提交在本书中发现的错误。如果对本书中的观点有不同的见解，也欢迎来该网站与笔者交流讨论。为方便读者，也欢迎发送邮件至我的邮箱：hunterdang@gmail.com。
致谢
首先，感谢西安葡萄城信息技术有限公司，正是借助该公司在博客园上的官方技术博客，我才能够将很多的技术思想表达出来。另外，通过在这个博客上写作，促成了本书的出版。
感谢经常和我在一起讨论技术的小伙伴们：张凌、许佳瑟、黄海涛、杨波、梁真。他们在本书的写作过程中提供了很多宝贵的意见，为本书增色不少。
感谢机械工业出版社的编辑杨绣国，感谢你容忍我多次推迟交稿时间，并且非常耐心地纠正各种表达上的错误。从你身上，我感受到了一个编辑的敬业精神。
谨以此书，献给我的妻子李莹鸽。她为了让我有更多的写作时间，毫无怨言地承担起了更多的家庭责任。如果没有她的鼓励和督促，我都不知道什么时候才能完成本书的写作。我儿子的出生也给了我很大的动力。每当我苦恼于如何把一些开发理念表达清楚时，儿子调皮的笑声缓解了我不小的压力。
党建
马来西亚吉隆坡