Web前端开发最佳实践（1）：前端开发概述

引言

我从07年开始进入博客园，从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法。可以说，博客园是我参与技术讨论的一个主要的平台。在这其间，随着接触技术的广度和深度的增加，也写了一些得到了大家认可的技术文章，多篇文章也得到了编辑推荐。大家的认可也更激发了我写技术文章的热情，借助公司在博客园的账号葡萄城控件技术团队博客发布了多篇有关Web前端开发的文章，尤其是如下三篇前端开发最佳实践相关的文章引来了大家的热烈讨论:

1. 前端代码标准最佳实践：Javascript篇
2. 前端代码标准最佳实践：CSS篇
3. 前端代码标准最佳实践：HTML篇

也正是这三篇文章的编写促成了我的新书《Web前端开发最佳实践》的出版。多年来技术的长进都得益于在博客园技术社区的讨论和借鉴前辈们的技术思想。得益于社区，也应该回馈社区，所以从今天起，计划在博客园发布前端开发相关的系列文章，和大家讨论我所认为的Web前端开发最佳实践方法。本文为开篇，简单介绍前端开发的一些概念和方向，后续将依次从HTML、CSS、Javascript、移动端开发为主体展开讨论。

Web前端开发需要具备的技能

由于Web前端技术兴起的时间不长，因此还没有明确的界限定义，不同的Web项目中可能要求的Web前端开发技术会有所不同。比如，某些项目可能需要前端开发人员了解一些后端技术，这样前端开发人员才可以更好地与后端开发人员配合，比如在页面上留下一些后端需要调用的钩子等，而某些项目可能需要前端开发懂一些UI设计、Photoshop工具的使用方法等，以便于和UI设计师沟通和配合。尽管Web前端开发的范畴广泛，并且界限模糊，但是以下7点则是Web前端开发必备的技能。

1. 页面标记（HTML）

由于页面HTML代码结构基本固定，HTML的标签数量也不多，所以从学习的难易程度来说，HTML应该是前端技术中非常容易上手的技术。即使是一个新手也能在较短的时间里学会并编写一个结构良好的页面来。虽说入门容易，但是要编写语义良好、简洁整齐的HTML代码则需要大量的实践学习才能掌握。HTML是页面的基本结构组成，是网站的基础，臃肿混乱的HTML代码不但会影响其本身的展现，而且与其对应的CSS和Javascript代码也会变得难以编写和维护。

2. 页面样式

CSS 是 Cascading Style Sheets(层叠样式表)的简称。在标准页面设计中，CSS负责网页内容的表现，所以CSS也是前端开发需要掌握的核心内容。丰富的CSS样式能让平淡的HTML展现出绚丽的效果，使得页面更为友好。好的样式可以让用户在页面上停留的时间更久一些，也可以帮助用户更好地阅读网站内容，同时，还可以让用户在不同浏览器上有着相同的体验。CSS和HTML代码一样，没有复杂的逻辑，上手也比较容易。其主要的难点在于如何合理利用CSS的组合和继承特性来编写简洁、可维护性好的CSS代码。以上这两项基本技能是前端UI开发必备技能。

3. 前端编程

前端编程技能主要指定是Javascript编程。Javascript是一种居于对象和事件驱动的客户端脚本语言，是页面实时动态交互的技术基础。相较于HTML和CSS，编写Javascript代码更能让前端开发人员找到后端程序员的感觉。Javascript是非常灵活的脚本语言，包含了高阶函数、动态类型以及灵活的对象模型等强大的语言特性，当然，Javascript的灵活性也导致代码不易维护。此外，浏览器的兼容性也增加了Javascript编码的难度。同一个功能，可能在不同的浏览器中有不同的实现， 例如，在IE浏览器中事件绑定使用的是attachEvent()方法，但其它浏览器则使用的是addEventListener()方法。开发人员在熟悉Javascript基本语法和基本的编码规范之外，还应该掌握在不同浏览器中Javascript的兼容性问题。另外，作为前端开发工程师，必定会涉及后端的编程，一些原因是目前流行的Web编程方式会有部分后端代码存在于前端页面中，和前端的HTML、Javascript等混合在一起，比如PHP、JSP、ASP.net等，所以前端工程师也有必要了解一些后端编程技术。

4. 跨平台，跨浏览器

前端代码本来是不存在跨平台方面的问题，但是随着移动Web平台的兴起，跨平台的问题就逐渐显现出来了。移动设备如智能手机和平板电脑在近几年发展迅猛，用户通过移动设备访问Web站点的比率也是逐年增高。如何在众多移动平台、众多屏幕尺寸上展现友好的Web站点成为了一项前端技能。不过，目前跨浏览器没有像几年前表现得那么突出了，这要归功于IE6、IE7浏览器的占有率快速下降和众多浏览器对标准的重视，另外目前流行的前端框架已经很好地处理了浏览器的兼容问题。尽管如此，但是还需要熟悉常见的浏览器兼容方法，主要包括：IE7、IE8的兼容，HTML5中新特性的兼容等。

5. 前端框架

各种前端框架的出现，很大程度上降低了前端开发的难度。框架统一了编码的方式、封装了浏览器兼容问题并添加大量的扩展功能。如今的Web项目中前端框架应用非常广泛，在开源社区Github上排名靠前的开源框架也是以前端框架居多。优秀的前端框架可以很大程度上减少项目开发的周期，尤其是jQuery，几乎成为了Web项目默认的前端框架。但是前端框架的接口众多，各种框架的使用方式和编码方式也不尽相同。作为前端开发工程师，需要熟悉一些常用框架的使用方法，并且要了解如何编写常用框架的扩展插件，如：jQuery、YUI、ExtJs等。

6. 调试工具

对于前端代码，在调试过程中需要查看页面的HTML结构变化，CSS渲染效果，Javascript代码的执行情况及HTTP请求和返回的数据，并且还要查看网站各个部分的性能等，甚至需要动态更改HTML，CSS代码来查看预期的效果，模拟发起HTTP请求来查看后端返回的数据。各主流浏览器都会有对应的浏览器插件来辅助完成这些工作，如：IE中的IE Dev Toolbar、Chrome中的Developer Tools、Firefox中的Firebug等，此外还有HTTP请求监控和模拟工具，如：Fiddler等。 开发工程师需要熟练使用这些工具来辅助完成前端代码的调试。

7. 沟通能力

软件工程师向来是一个不善于沟通的群体，但是沟通却又是一项必备的基本技能，尤其是对于前端开发工程师来说。Web前端开发介于UI和后端逻辑开发之间，所以Web前端工程师在开发过程中必定会和UI设计师及后端工程师合作：前端工程师需要和UI设计师沟通，确定效果是否可以实现以及实现的代价，并对UI设计提出建议；还需要和后端工程师沟通，确定前后端交互的接口以及传输的数据实体的结构等，良好的沟通会让这些过程变得轻松许多。

Web前端开发现状

前端开发虽然起步时间短，但是发展势头迅猛，在各种新技术、新标准的推动下，各大互联网公司也开始重视Web产品的前端重构与开发了，如淘宝、腾讯、新浪、百度、搜狐等都对自己的网站进行了重构并同时使用了HTML5中的新特性。现在开发的Web新产品的页面交互也越来越丰富，视觉效果也越来越绚丽。互联网公司除了重视前端开发之外，还在积极推动互联网技术的发展，从2001年到2012年，腾讯、百度以及360先后加入了万维网联盟（W3C），共同参与互联网技术标准的研究和制定，促进国内互联网产业的发展。
在Web前端发展的过程中，浏览器的发展起着至关重要的作用。浏览器厂商在这场Web浪潮中推波助澜，表现在浏览器的版本升级周期短、对前端标准的支持也越来越好、浏览器的性能也有大幅的提升等。一向表现差强人意的IE浏览器也开始发力，最新发布的IE11浏览器无论从标准的支持或者是性能都表现突出。浏览器的快速发展使得低端的浏览器如IE6、IE7等快速退出市场。

除各大互联网公司和浏览器厂商的积极推动外，Web前端开源社区的参与热情也极为高涨，呈现出一派欣欣向荣的景象。在著名的网络代码托管系统Github上，开源的项目仍然是以前端相关项目居多。按语言排名前三的分别为Javascript、Ruby和Python。按项目分，排名靠前的大部分也是前端项目，如：prototype、bootstrap、jQuery及相关插件等，具体大家可参考Github官方网站。国内的前端社区则发展较为缓慢，多是以推广HTML5为主，靠一些酷炫的效果来吸引眼球，反而关注前端基础的较少。国内Web互联网公司（如：淘宝、百度、腾讯等）也有部分优秀的开源前端框架，这些公司的前端技术分享氛围不错，但受地域的限制，主要集中在北京和杭州等小范围内，虽然相关人员在积极推动但还是孤掌难鸣，发展很不平衡。整体来讲，国内前端技术发展还是挺迅速，也不乏顶级的前端技术人员，但缺乏的是开放的心态和与国外同行交流的能力，国内前端技术的发展任重道远。

Web前端整体技术的发展和前端工程师个人的能力是相辅相成的。目前前端工程师大都是半道出家，一部分是从页面UI开发转行为Web前端开发的，一部分则是由后端工程师转行而来，所以前端工程师普遍是自学成才，并没有受过足够的专业训练，也缺乏实际的项目经验。

除了以上这些Web前端开发的外在环境外，Web前端在技术方面也存在着大量的挑战，大量旧的网站需要重构来提高网站用户体验和性能等。这些网站的前端代码普遍存在的问题有：代码组织混乱，CSS代码和Javascript代码混合在HTML代码中；代码的格式问题突出，不够整洁；页面布局随意，HTML代码不符合标准；网站整体性能差，还没有意识到要去应用诸如缓存、动态加载、脚本压缩、图片压缩等提高性能的技术。

Web前端开发的现状可以概括为：前端技术发展迅速，但起步晚，基础薄弱；前端工程师热情高涨，但缺乏足够技能培训，对代码规范重视不足，对一些基础原理的理解不够深刻。

规范的web前端代码：更好维护、更好性能和更安全

规范的代码，这是所有软件开发中对代码的基本要求，前端开发也是一样的，要求写规范的HTML、CSS和Javascript代码。

什么样的前端代码才能称的上是规范的代码？探讨这个问题之前，首先需要强调的是规范不是标准，不是放之四海而皆准的，不同的项目中的代码规范是有可能有差异的，比如命名，有些项目规定HTML标签的id必须要以控件的缩写名作为前缀。如按钮的id名以”btn”作为前缀，有些只是规定命名有意义就可以。再比如有些项目规定Javascript代码语句结尾必须添加分号，但是有些项目并不要求，大名鼎鼎的bootstrap源代码中并没有给Javascript语句结尾添加分号。所以规范的作用只是让同一个团队代码风格的统一，减少协作时的复杂性，确保后续的维护和修改方便。不同团队中遵循的规范有可能存在部分差异，但是在同一个团队中规范必须是统一的，团队中的成员应该严格遵循。澄清了规范的作用后，接着上面的问题来探讨什么才是规范的前端代码。

Web前端的代码规范主要针对的是HTML、CSS和Javascript代码。尽管前端代码规范在不同场合会有差异，但是规范的前端代码应该具有如下的特征：

1. 符合标准

所谓的标准指的是W3C制定的Web标准，W3C制定的标准包括使用语言的规范，开发中使用的原则和解释引擎行为等。主要由3个部分组成：结构标准（Structure）、表现标准（Presentation）和行为标准（Behavior）。结构标准包括XML标准、XHTML标准和HTML标准，目前使用的标准版是HTML4.01标准，HTML5是HTML和XHTML的最新标准；表现标准主要指的是CSS样式标准，目前使用标准版的是CSS2，CSS3尚未发布最终版；行为标准主要包括ECMAScript标准和DOM标准，ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（Javascript），DOM是文档对象模型（Document Object Model）的缩写，是一个中立于语言的应用程序接口，容许程序访问并更改页面的内容、结构和样式。目前推荐遵循的是ECMAScript标准是ECMAScript 262第5版，DOM标准是DOM级别2，DOM级别3还没有发布正式版本。W3C推荐的这些标准受到了各浏览器厂商和IT互联网公司的欢迎，前端代码遵循标准则可以保证网页在不同浏览器上可以正常展现。

2. 格式规范统一

前端代码的格式主要包括命名、代码缩进、空格和空行的使用以及代码注释。命名主要有HTML元素的id和class名，Javascript中函数和变量的命名；HTML、CSS和Javascript代码中都需要通过代码的缩进来体现代码的层次关系；空格和空行主要用在CSS和Javascript代码中，用来提高代码可读性，如操作符前后添加空格、不同代码段逻辑之间添加空行等； CSS和Javascript代码中都需要添加必要的注释来解释说明代码文件及代码段，HTML代码中使用注释的情况较少。和其它代码格式规范一样，前端代码格式规范也是为了提高代码的可读性和可维护性。

3. 高性能

前端性能体现在浏览器的响应速度上，包括网页的加载速度和页面的交互响应速度。网页加载所占有的时间包括后端处理请求的时间、代码文件从服务器端传输的时间、HTML和CSS的组合展现的时间以及Javascript加载和运行的时间。除了第一条，其余都和前端代码有直接的关系，减小文件传输时间的最直接的方式就是减小文件的大小，越小的代码文件相对传输就会更快；简洁和符合标准的HTML和CSS代码能减小浏览器解析的时间，加快浏览器渲染过程；页面中请求数量越少相对页面加载时间也会越快；Javascript代码中选择性能更好的实现方案，如延迟加载、动态加载等技术，会让页面加载更快和交互更流畅。规范的前端代码应该针对这些方面来编写高性能的前端代码，提高用户的前端体验。

4. 高安全性

网站的安全很难引起互联网公司的足够重视，他们更看重的是站点的用户体验、性能等这些更直观的方面。2011年，多个网站用户信息泄露风波震惊整个互联网，网站安全也再次引起业内的重视。从技术上讲，网站的安全瓶颈主要在后端，但是随着前端技术的发展，富客户端应用越来越多，前端安全问题也随之增多，例如，跨站点攻击、COOKIE劫持等。这些攻击通过设置Javascript变量、HTML标签的值和属性、CSS属性值等方式伪造恶意代码来达到攻击的目的，那么规范的前端代码至少要针对这些方面做必要的安全校验和必要的编码，提高代码的安全性。
前端代码如果能遵守如上的几个规范点，则基本上能称之为高质量的代码。需要强调的是酷炫的技术只是浮云，良好的编码习惯和意识才是真功夫

附录

• Web前端开发最佳实践（1）：前端开发概述
• Web前端开发最佳实践（2）：前端代码重构
• Web前端开发最佳实践（3）：前端代码和资源的压缩与合并
• Web前端开发最佳实践（4）：在页面中添加必要的meta信息
• Web前端开发最佳实践（5）：正确闭合HTML标签，停止使用不标准的标签和属性
• Web前端开发最佳实践（6）：过时的块状元素和行内元素
• Web前端开发最佳实践（7）：使用合理的技术方案来构建小图标