Web前端开发规范（一）

1、前言

网页开发技术从1989年开始至今已经走过了20余年，从最初纯粹的学术交流，到门户网站、电子商务网站、博客、E-mail、Web游戏、SNS网站等，以及到如今的移动Web网站（其实可以认为是PCWeb开发的一个延伸）的开发，已经涉及到我们的工作、学习、生活等各个方面。

网页开发在外行人眼中也许有难度，高不可攀，但是对于内行人来说，是很简单的，只要有一个文本编辑器，有个入门的教程，就可以制作属于自己的网页。但是在开发网页的时候，不仅仅是要求实现心中的模型，更要考虑我们开发出来的代码的可维护性，为将来可能出现的变化做好一切的准备。

请对照你曾经开发过的网页代码，看看在你的代码中是否存在着以下的问题：

• 没有一个合理的网页布局，div布局、table布局随处可见，到处混用；

• HTML标签名称大小写不统一，一会大写，一会小写，更有甚者，同一个名称中都会出现大小写混合的场景；

• 标签属性定义的时候，有的属性值加引号，有的属性名称不加引号，甚至，同一个标签的多个属性值，有的有引号，有的没有引号；

• 代码中出现已经被淘汰不再使用的标签、属性；

• CSS样式组织混乱，<style>标签定义样式、<link>标签外链、标签内style属性直接定义这三种定义方式随处都有；

• Javascript代码随处可见，<script>标签内、直接写在HTML标签内；

• Javascript代码和CSS代码随处可见，凌乱不堪；

• Javascript代码风格不一，缩进有使用四格Tab键、八格Tab键、直接多个Space缩进，原生Javascript、jQuery编码方式等，各式各样的风格并存；

• 任何HTML代码、CSS代码、Javascript代码中看不到一点注释；

• 。。。。。。

     如果你的代码中存在上面所列出的问题的话，那你维护这样的前端代码要付出的成本，我想我不告诉你，你也是可以想象到的，要是你想象不到，那我就无话可说了。。。于是，就有了所谓的Web标准。Web标准，用最简单的话来说，就是把网页的结构（HTML）、样式（CSS）和行为（Javascript）进行分离，当然标准在哪里？那就必须是W3C这样权威的组织推行的Web标准了。       

虽然存在Web标准，但是前端工作的维护在现实中确实存在中很大的难度，之于原因，借鉴了一些权威书籍的介绍，这里简单做一个说明：

• 浏览器的角度：在现在浏览器遍地开花的时代，移动端也是同样如此，不同的浏览器对前端代码的解析存在着很多差异性，所以对于每一个做前端的开发人员来说，浏览器的兼容性是一个最为苦闷的问题；

• 技术角度：不同的公司、不同的团队、不同的工程师，对前端代码的技术实现方案都有着各自的认知，或深或浅，尤其是现在HTML5、CSS3、jQuery等各种Javascript开发框架以及多如牛毛的第三方Javascript插件，这种情况下，代码的可维护性程度就会很容易降低。

• 团队合作的角度：针对移动端的网页来说，对用户体验和网页的表现能力要求是很高的， 就会导致我们为移动端开发的前端代码复杂度就会越来越高，而对于团队合作来说，要求就更加高了。如果团队合作不默契，没有一套统一的标准和规范，那么你就需要花很多的时间去维护这些出自不同团队成员的代码。
  

其实对每一个前端开发人员来说，所追求的的目标无非就是追求高质量的前端代码，提高代码的可维护性，请每一个进行移动网页前端代码开发的人记住，要让你的代码做到：精简、重用、有序。精简就意味着你的代码文件比较小，这样利于客户端下载和访问；重用提高了开发速度，同样也可以保证代码的精简；有序要求我们很好地组织代码，便于维护。

为了提高工作效率，便于团队成员更好地阅读和修改彼此的代码，更为了便于更好地维护前端代码，也为了能让我们的开发更加规范化，所以结合了Web标准、网络资料以及个人平时的工作经历，总结出了一些前端开发过程中的一些规范化要求和建议。因为本人接触前端是从移动网站的开发做起的，所以很多规范和建议都是针对移动网页来说的，如果本文中有不对或者不合适的部分请评论提出，不甚感激。

 

2、基本Web标准

一个符合基本Web标准的网页前端代码，HTML标签中的标签名应该全部都是小写的，属性的定义需要加上引号，CSS样式和Javascript代码不要夹杂在HTML标签中，而是应该分别单独存放在CSS样式文件和Javascript脚本文件中。理想状态下，一个网页的前端代码应该由.html文件、.css文件、.js文件这基本的三部分组成。

示例代码：

helloworld.html     

<link rel=”stylesheet” type=”text/css” href=”helloworld.css” />
<script type=”text/javascript” src=”helloworld.js” />
<div class=”helloDiv”>
	<span class=”helloFont”>Hello world！</span>
	<input type=”text” name=“yourName” id=”yourName” maxlength=”20” />
</div>

helloworld.css

.helloDiv {
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
}
. helloFont {
	font-size: 14px;
	color: #cccccc;
}

helloworld.js

var inputObj = document.getElementById(“yourName”);
inputObj.onmouseover = function() {
	this.focus();
} 
inputObj.onfoucs = function() {
	this.select();
}

如示例代码一样，HTML标签只用来负责承载网页内容的显示，而样式定义交给了CSS，而所谓的行为动作定义交给了Javascript。

将HTML、CSS、Javascript分成三个文件来存放，这其实是一个最理想的状态，但是实际我们开发的过程中，会因为一些特殊原因，需要把CSS和Javascript的代码和HTML代码放在同一个文件中，但是即使这样的情况下，我们也需要在HTML文件中，将样式和行为从标签中尽量分离出来。

示例代码：

helloworld.html

<style type=”text/css”>
.helloDiv {
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
}
. helloFont {
	font-size: 14px;
	color: #cccccc;
}
	</style>

	<script type=”text/javascript”>
var inputObj = document.getElementById(“yourName”);
inputObj.onmouseover = function() {
	this.focus();
} 
inputObj.onfoucs = function() {
	this.select();
}
	</script>

<div class=”helloDiv”>
<span class=”helloFont”>Hello world！</span>
	<input type=”text” name=“yourName” id=”yourName” maxlength=”20” />
</div>

    各位看看，这样的代码组织结构是不是看上去就很舒服呢？