编写高质量代码
——Web前端开发修炼之道曹刘阳　著
ISBN：978-7-111-30595-8
本书纸版由机械工业出版社于2010年出版，电子版由华章分社（北京华章图文信息有限公司）全球范围内制作与发行。
版权所有，侵权必究
客服热线：+ 86-10-68995265
客服信箱：service@bbbvip
官方网址：www.hzmedia
新浪微博 @研发书局
腾讯微博 @yanfabook
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作为信息模型（Mo
del），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。建立了这种大局观后，学习具体技术的思路就更清晰了。
代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不
同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。本书中包含着很多开发的思想和经验，都是在长期的开发实践中积累下来的，不同水平的Web前端工程师都会从中获得启发。
张克军（著名Web前端开发工程师）
2010年4月
这是一本能修炼前端开发人员内功的书，没有过多的名词解释和理论讲述，都是来自实战中的经验。本书强调的团队合作和开发习惯对于每一个前端开发团队来说都非常重要，尤其是大公司的前端开发团队，所有成员都应该了解一下这些内容。对于所有前端开发人员而言，本书是不可或缺的参考书。
——马波百度前端开发组项目经理
组织前端技术交流活动是作者最大的喜好之一，对前端技术痴迷，乐于分享。本书由浅入深地讲解了开发高质量的、易于维护的Web前端应用的技巧和注意事项。是辅助初级Web前端开发者进阶的一本好书，强烈推荐。
——赵立元　新浪产品部前端开发技术经理
前端开发工程师是一个易学难精的职业，很多企业常常抱怨招聘不到合适的人才。市面上此类书籍质量参差不齐，要么是泛泛而谈的理论知识，要么是用大量简单的代码示例和插图充数。本书的作者是一位有着丰富经验的资深前端开发工程师，无论是他的理论功底，还是实战经验，你都能在本书中有所体会。本书适合于中初级前端开发工程师、技术经理和项目经理阅读，选择此书一定不会让你失望。
——罗金网易的前端开发项目经理
对于经验不太丰富的Web前端开发者而言，本书可谓不可多得。书中丰富的编写高质量前端代码的技巧是在大量实践和总结中结出的硕果，极具学习和参考价值。
——周裕波百度前端研发工程师、Web标准化交流会发起人之一
如今的Web应用正朝着规模化和复杂化的方向发展，应用的可维护性变得越来越重要。本书从编写高
质量代码的角度探讨了如何提高Web前端代码的可维护性，包含大量难得的编程技巧，值得学习和研究。
——Ajax中国（www.okajax）
有经验的Web前端开发工程师都知道，如果要精通这一行，必须先“精通”十行。在Web前端开发工程师近乎庞杂的知识体系中，HTML、CSS、JavaScript这三大技术是最基本的，也是最核心的。本书没有系统地介绍这三个方面的基础知识，重点是讲解了大量编写高质量HTML、CSS和JavaScript代码的技巧，旨在提高中初级开发者的水平。
——jQuery中文社区（http：//）
如果你只是初窥Web前端开发的门径，强烈建议你阅读本书，它能帮助你修炼内功。它不仅从知识体系的角度为准备从事Web前端开发工作的朋友指明了学习方向，而且还从技术的角度给出了大量的技巧和最佳实践。
——一起Ext（http：//www.17ext/）
HTML、CSS、JavaScript是Web前端开发者必须精通的三把利器，本书是关于这三把利器的使用秘籍，如能善加利用，必定例无虚发。强烈推荐！
——CSS中文社区
前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过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与作者取得联系，也可以通过QQ8791223参与到“如何编写高质量前端代码”的讨论中来。
在编写本书的过程中，如何组织目录一直是让笔者非常纠结的事情：HTML、CSS和JavaScript是三门截然不同的语言，在实际应用过程中涉及的深度也各不相同，HTML需注意的事项较少，CSS次之
，JavaScript最为复杂。所以，本书虽然会同时对这三个方面进行探讨，但所用篇幅与它们的复杂度是成正比的。
感谢在本书写作过程中为我提供宝贵意见的朋友们，他们是周裕波、钟志、刘运周、李海玲、钟伟明
、邹渤一、黄海宝、胡淑芳，没有你们的反馈，这本书将失不少。
简单网页
感谢克军为我写的推荐序，很怀念我们一起吃午饭的那段日子，下次音乐节我一定到。感谢卢海军为我提供了三张精美的插图，它们真的很漂亮。
感谢华章编辑们的细心工作，谢谢你们一直耐心友好地对待我一次又一次的拖稿，与你们合作非常愉快。
感谢我的家人，谢谢你们在我最没有耐心写下去的时候一直陪着我。谢谢我的老婆张霞，没有你每天的督促，真不知道这本书要写到哪天才写得完。
1
本章内容
糟糕的页面实现，头疼的维护工作
Web标准——结构、样式和行为的分离
前端的现状
打造高品质的前端代码，提前代码的可维护性——精简、重用、有序

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。