随着用户体验越来越被人们重视，Web应用对前端开发的要求也越来越高。本书是国内第一本深入探讨如何编写高质量前端代码的专著，包含大量最佳实践。全书以网站重构为楔子，深入剖析了Web前端开发的现状以及存在的问题。紧接着，对HTML、CSS和JavaScript这Web开发三要素进行了深入的讨论，用大量实例和最佳实践对如何编写精简的、有序的、可重用性和可维护性好的高质量的前端代码进行了深入的阐述。
学习完本书后，读者的水平能很快上升到一个更高的层次，成为一名出色的Web前端开发工程师。
在这个用户体验为王的Web 2.0时代，Web应用所涉及的领域越来越广，规模越来越大，需求越来越多样化和复杂化，更新的速度也越来越快。如何才能让我们的应用应对规模化、多样化、复杂化和快速变化带来的种种问题？编写高质量的、易于维护的Web前端代码似乎是解决这些问题的唯一途径。
如何才能编写出高质量的、易于维护的Web前端代码？本书的主要内容围绕Web前端开发的三大技术要素——HTML、CSS和JavaScript展开，深入地讨论了编写高质量的HTML代码、CSS代码和JavaScript代码的方法、技巧、规范和最佳实践，从而为编写易于维护的Web前端代码打下坚实的基础。希望本书能帮助大家从一筹莫展的前端维护工作中走出，从此微笑地面对需求的“变化”。
作 者 简 介
曹刘阳 网名阿当，资深Web前端开发工程师，先后就职于中国雅虎和淘宝，现就职于新浪，一直从事Web前端开发工作，实战经验非常丰富，在通过提高代码质量来增强可维护性方面颇有心得。精通HTML、CSS、JavaScript等前端开发技术，对ActionScript、Flex、PHP、RoR等Web开发技术也有较深入的研究。致力于敏捷开发实践，喜欢读书，阅读过大量技术书籍；善于总结归纳，能将各种技术融会贯通。
互联网进入Web 2.0时代以后，Web应用敲响了传统桌面应用的丧钟，它一路摧城拔寨，如今几乎所有的应用都打上了“Web”的烙印。与之相应的，Web开发技术得到了空前的发展，尤其是前端技术。近年来，随着用户对使用体验的要求越来越高，前端开发的技术难度越来越大，昔日设计和制作不分的网页设计师这一职位终于“拆分”成了视觉设计师和前端开发工程师两个职位，分别向着艺术和技术的方向纵深发展。
Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间也不超过5年，这类专业人才一直供不应求。从知识体系上讲，前端开发工程师需要掌握和了解的知识非常之多，甚至可以用庞杂来形容。作为一名没有太多经验的前端开发工程师，我们应该如何去全面认识自己的工作，如何找准自己的定位，如何从合格成为优秀，最后迈向卓越？本书尝试从如何编写易于维护的、高质量的Web前端代码的角度给出答案。
如果你在思考下面这些问题，也许本书就是你想要的！
作为一名合格的Web前端开发工程师，究竟需要具备哪些技能和素质？为什么说如果要精通Web前端开发这一行，必须先精通十行？
在Web应用的实现代码中，有哪些技术因素会导致应用难以维护？
高质量的Web前端代码应该满足哪些条件？如何才能提高Web前端代码的可读性和可重用性？
在HTML代码中，为何要使用语义化标签？如何检查你使用的标签是否语义良好？语义化标签时应该注意哪些问题？
如何编写CSS代码和JavaScript代码可以避免团队合作时产生冲突？
如何组织CSS文件才能让它们更易于管理？如何让CSS模块化，从而提高代码的重用率？CSS的命名应该注意哪些问题？何谓优良的CSS编码风格？
如何在CSS编码中引入面向对象的编程思想？这样做有哪些好处？
原生JavaScript和JavaScript类库之间有何关系？如何编写自己的JavaScript类库？
JavaScript有哪些常见的跨浏览器兼容问题？如何解决这些问题？
如何组织JavaScript才能让代码的结构更清晰有序，从而更易于维护？如何才能编写出弹性良好的JavaScript代码？编写过程中应该注意哪些问题？
JavaScript的面向对象编程是如何实现的？如何用面向对象的方式重写原有的代码？
编写高质量的JavaScript代码有哪些实用的技巧？又有哪些常见的问题需要注意？
为了提高Web前端代码的可维护性，我们应该遵循哪些规范？
前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。但是，随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。
为什么它们会对自己的网站进行重构呢？有两个方面的原因：
第一，根据W3C标准进行重构后，可以让前端的代码组织更有序，显著改善网站的性能，还能提高可维护性，对搜索引擎也更友好；
第二，重构后的网站能带来更好的用户体验，用XHTML+CSS重新布局后的页面，文件更小，下载速度更快。
DHTML可以让用户的操作更炫，更吸引眼球；Ajax可以实现无刷新的数据交换，让用户的操作更流畅。对于普通用户来说，一个网站是否专业、功能是否强大，服务器端是用J2EE+Oracle的强大组合，还是用ASP+Access的简单组合，并没有太明显的区别。但是，前端的用户体验却给了用户直观的印象。
随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。前端开发技术包括三个要素：HTML、CSS和JavaScript，但随着RIA的流行和普及，Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对前端开发工程师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才算够用呢？对于很多初级前端开发工程师来说，这个问题是非常令人迷惑的。
前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，我们需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。
一位好的前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。市面上有很多关于前端开发的书，这些书籍能很好地指导读者掌握前端开发的基础知识，能让读者达到会用的水平。然而，几乎还没有书能告诉开发者们如何才能用得更好，如何才能编写出高质量的前端代码，如何才能系统有效地组织前端架构……本书弥补了这方面的市场空白，它假定读者已经具有一定的Web前端开发基础，不会对基础知识进行详细介绍，主要精力放在如何编写和组织高质量代码上，从而提高代码的可维护性。
本书的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。本书是笔者个人的经验分享，尽信书不如无书，大家可以有选择地吸收，如果对书中的观点或技巧有不同的见解，非常欢迎与笔者讨论交流。大家可以通过邮箱cly84920@gmail.com与作者取得联系，也可以通过QQ群8791223参与到“如何编写高质量前端代码”的讨论中来。
在编写本书的过程中，如何组织目录一直是让笔者非常纠结的事情：HTML、CSS和JavaScript是三门截然不同的语言，在实际应用过程中涉及的深度也各不相同，HTML需注意的事项较少，CSS次之，JavaScript最为复杂。所以，本书虽然会同时对这三个方面进行探讨，但所用篇幅与它们的复杂度是成正比的。
计算机\程序设计
互联网进入Web 2.0时代以后，Web应用敲响了传统桌面应用的丧钟，它一路摧城拔寨，如今几乎所有的应用都打上了“Web”的烙印。与之相应的，Web开发技术得到了空前的发展，尤其是前端技术。近年来，随着用户对使用体验的要求越来越高，前端开发的技术难度越来越大，昔日设计和制作不分的网页设计师这一职位终于“拆分”成了视觉设计师和前端开发工程师两个职位，分别向着艺术和技术的方向纵深发展。
Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间也不超过5年，这类专业人才一直供不应求。从知识体系上讲，前端开发工程师需要掌握和了解的知识非常之多，甚至可以用庞杂来形容。作为一名没有太多经验的前端开发工程师，我们应该如何去全面认识自己的工作，如何找准自己的定位，如何从合格成为优秀，最后迈向卓越？本书尝试从如何编写易于维护的、高质量的Web前端代码的角度给出答案。
如果你在思考下面这些问题，也许本书就是你想要的！
1. 作为一名合格的Web前端开发工程师，究竟需要具备哪些技能和素质？为什么说如果要精通Web前端开发这一行，必须先精通十行？
2. 在Web应用的实现代码中，有哪些技术因素会导致应用难以维护？
3. 高质量的Web前端代码应该满足哪些条件？如何才能提高Web前端代码的可读性和可重用性？
4. 在HTML代码中，为何要使用语义化标签？如何检查你使用的标签是否语义良好？语义化标签时应该注意哪些问题？
5. 如何编写CSS代码和JavaScript代码可以避免团队合作时产生冲突？
6. 如何组织CSS文件才能让它们更易于管理？如何让CSS模块化，从而提高代码的重用率？CSS的命名应该注意哪些问题？何谓优良的CSS编码风格？
7. 如何在CSS编码中引入面向对象的编程思想？这样做有哪些好处？
8. 原生JavaScript和JavaScript类库之间有何关系？如何编写自己的JavaScript类库？
9. JavaScript有哪些常见的跨浏览器兼容问题？如何解决这些问题？
10. 如何组织JavaScript才能让代码的结构更清晰有序，从而更易于维护？如何才能编写出弹性良好的JavaScript代码？编写过程中应该注意哪些问题？
11. JavaScript的面向对象编程是如何实现的？如何用面向对象的方式重写原有的代码？
12. 编写高质量的JavaScript代码有哪些实用的技巧？又有哪些常见的问题需要注意？
13. 为了提高Web前端代码的可维护性，我们应该遵循哪些规范？
曹刘阳 著：暂无简介
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
如何才能做得更好呢？
第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
第三，必须学会运用各种工具进行辅助开发。
第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。
可见，看似简单的网页制作，如果要做得更好、更专业，真的是不简单。这就是前端开发的特点，也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手，对于老手来说，也时常不知道下一步该学什么。
目前市面上关于Web前端开发的书主要都是针对单一技术的，本书与这些书有着本质的区别。它主要想实现两个目标：第一，为不太有经验的Web前端开发工程师建立大局观，让他们真正了解和理解这个职业；第二，帮助有一定Web前端开发经验的工程师修炼内功，通过编写高质量的代码来提高前端代码的可维护性。这是很多前端开发工程师感兴趣的内容。
本书的前两章讨论了网站重构和团队合作，这是很有必要的。网站重构的目的仅仅是为了让网页更符合Web标准吗？不是！重构的本质应该是构建一个前端灵活的MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。建立了这种大局观后，学习具体技术的思路就更清晰了。
代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。本书中包含着很多开发的思想和经验，都是在长期的开发实践中积累下来的，不同水平的Web前端工程师都会从中获得启发。
张克军（著名Web前端开发工程师）
2010年4月
推荐序
赞 誉
前 言
致 谢
第1章 从网站重构说起/1
1.1 糟糕的页面实现，头疼的维护工作/2
1.2 Web标准—结构、样式和行为的分离/4
1.3 前端的现状/6
1.4 打造高品质的前端代码，提高代码的可维护性—精简、重用、有序/8
第2章 团队合作/9
2.1 揭秘前端开发工程师/10
2.2 欲精一行，必先通十行/13
2.3 增加代码可读性—注释/15
2.4 提高重用性—公共组件和私有组件的维护/15
2.5 冗余和精简的矛盾—选择集中还是选择分散/16
2.6 磨刀不误砍柴工—前期的构思很重要/17
2.7 制订规范/18
2.8 团队合作的最大难度不是技术，是人/18
第3章 高质量的HTML/19
3.1 标签的语义/20
3.2 为什么要使用语义化标签/21
3.3 如何确定你的标签是否语义良好/26
3.4 常见模块你真的很了解吗/36
3.4.1 标题和内容/36
3.4.2 表单/38
3.4.3 表格/40
3.4.4 语义化标签应注意的一些其他问题/43
第4章 高质量的CSS/44
4.1 怪异模式和DTD/45
4.2 如何组织CSS/46
4.3 推荐的base.css/49
4.4 模块化CSS—在CSS中引入面向对象编程思想/55
4.4.1 如何划分模块—单一职责/55
4.4.2 CSS的命名—命名空间的概念/60
4.4.3 挂多个class还是新建class —多用组合，少用继承/66
4.4.4 如何处理上下margin/72
4.5 低权重原则—避免滥用子选择器/81
4.6 CSS sprite/85
4.7 CSS 的常见问题/88
4.7.1 CSS的编码风格/88
4.7.2 id和class/89
4.7.3 CSS hack/89
4.7.4 解决超链接访问后hover样式不出现的问题/93
4.7.5 hasLayout/94
4.7.6 块级元素和行内元素的区别/95
4.7.7 display:inline-block 和 hasLayout/97
4.7.8 relative、absolute和float/103
4.7.9 居中/104
4.7.10 网格布局/112
4.7.11 z-index的相关问题以及Flash和IE 6下的select元素/122
4.7.12 插入png图片/129
4.7.13 多版本IE并存方案—CSS的调试利器IETester/131
第5章 高质量的JavaScript/133
5.1 养成良好的编程习惯/134
5.1.1 团队合作—如何避免JS冲突/134
5.1.2 给程序一个统一的入口—window.onload和DOMReady/148
5.1.3 CSS放在页头，JavaScript放在页尾/159
5.1.4 引入编译的概念—文件压缩/160
5.2 JavaScript的分层概念和JavaScript库/162
5.2.1 JavaScript如何分层/162
5.2.2 base层/163
5.2.3 common层/181
5.2.4 page层/184
5.2.5 JavaScript库/185
5.3 编程实用技巧/187
5.3.1 弹性/187
5.3.2 getElementById、getElementsByTagName和getElements-
ByClassName/193
5.3.3 可复用性/196
5.3.4 避免产生副作用/199
5.3.5 通过传参实现定制/203
5.3.6 控制this关键字的指向/207
5.3.7 预留回调接口/211
5.3.8 编程中的DRY规则/212
5.3.9 用hash对象传参/215
5.4 面向对象编程/217
5.4.1 面向过程编程和面向对象编程/217
5.4.2 JavaScript的面向对象编程/224
5.4.3 用面向对象方式重写代码/245
5.5 其他问题/251
5.5.1 prototype和内置类/251
5.5.2 标签的自定义属性/255
5.5.3 标签的内联事件和event对象/260
5.5.4 利用事件冒泡机制/263
5.5.5 改变DOM样式的三种方式/267
附录A 写在规则前面的话/271
附录B 命名规则/272
附录C 分工安排/274
附录D 注释规则/276
附录E HTML规范/278
附录F CSS规范/280
附录G JavaScript规范/282
