前端代码规范
目 录
1. 通用.......................................................................................................................... 1
1.1. 字符编码............................................................................................................ 1
1.2. 文件的命名........................................................................................................ 1
1.3. 缩进................................................................................................................... 1
1.4. 目录结构............................................................................................................ 1
2. HTML........................................................................................................................ 2
2.1. 页面文件命名..................................................................................................... 2
2.2. DOCTYPE............................................................................................................ 2
2.3. 标签................................................................................................................... 3
2.4. 标签的嵌套........................................................................................................ 3
2.5. 行内CSS............................................................................................................. 4
2.6. 自定义属性........................................................................................................ 4
2.7. 图片................................................................................................................... 4
2.8. 闭合浮动元素..................................................................................................... 4
3. CSS............................................................................................................................ 5
3.1. CSS Code Style..................................................................................................... 5
3.2. 选择器的使用..................................................................................................... 6
3.3. 兼容问题............................................................................................................ 6
3.4. !important.......................................................................................................... 6
4. JavaScript................................................................................................................... 8
4.2. 文档注释............................................................................................................ 9
4.3. JavaScript文件引用在页面中的位置.................................................................... 9
4.4. 避免在HTML中直接嵌入JavaScript................................................................... 10
4.5. 减少全局变量................................................................................................... 10
5. 附录........................................................................................................................ 11
1. 通用
1.1. 字符编码
所有文件统一使用UTF-8编码。
1.2. 文件的命名
文件名应该全部小写，多个单词以下划线“_”分开。
1.3. 缩进
Tab字符缩进。
1.4. 目录结构
下图为静态资源的目录结构。所有静态资源放到一级目录：为项目名，例如（墨尔本）目录下。
墨尔本 目录下一般有三个文件夹。
- html：里边包含通用的样式表文件、图片、js、以及静态页面等文件。
- 效果图：里边包含设计出的所有的效果图（后缀为.psd）。
- 原型。该文件夹用来存放交互设计出的原型文件。
2. HTML
2.1. 页面文件命名
列出几种标准的命名：
l 创建：create.html
l 编辑：edit.html
l 显示：show.html
l 列表：list.html
对于页面中使用到的html片段页面，应以“_”隔开命名。如果为某一页面专用的片段页面，则在“_”之后加上专用页面的名字例如商品显示页中的评价片段页面：/show_comments.html。其意义为/show.html页面的一部分。
2.2. DOCTYPE
HTML页面页首必须填写DOCTYPE。DOCTYPE使用XHTML 1.0 Transitional。如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.3. 标签
按照XHTML规范，所有标签名及属性名必须全小写，属性值以双引号包裹，属性的等号两边禁止添加空格。所有标签必须闭合。例如： “<br>”必须写作“<br />”。非替换元素禁止直接结束，例如：<div></div>禁止写成<div />。
2.4. 标签的嵌套
标签的嵌套必须按照HTML规范嵌套，例如：<li>必须在<ol>或<ul>标签中，不能脱离这两个标签。
2.5. 行内CSS
尽量减少行内CSS的使用，除一些类似规定表格栏位宽度等比较具有特殊性的位置，禁止在元素内使用行内CSS。行内CSS示例：
<div style=”background: black;”></div>
2.6. 自定义属性
所有自定义属性建议以“data-”，多个单词以“-”分隔，例如“data-valid-type”，“data-field-name”等。该目的是为了兼容之后的HTML5，并且jQuery 1.6对此也有着更好的支持。
2.7. 图片
对内容型的图片和背景型的图片进行区分。对于网站LOGO，按钮图片以及边框样式等均属于背景型图片，而商品的图片，注册用户的头像等则属于内容型的图片。背景型图片应尽量避免使用<img>标签显示在页面中，而是应该采用CSS，背景型图片应采用CSS Sprite技术，将零散的图片合成为一张图片，以减少请求。关于CSS Sprit技术，请参考5.1
图片的命名应该全小写，多个单词以下划线“_”分隔。
2.8. 闭合浮动元素
对于设置了float的元素，一定要对float进行闭合。具体参考附录5.2
3. CSS
3.1. CSS Code Style
3.1.1. 样式命名
对于类的命名，采用全小写，多个单词以“_”分隔。例如：.nav，.panel_title等。命名采用英文单词，禁止使用汉语拼音，尽量避免使用数字。
3.1.2. 属性
每条属性独占一行，属性名冒号后空一格。行结束以分号“;”结尾。
属性顺序建议按照一下顺序书写：
- 布局属性（position，display，float，clear，display等）
- 盒模型属性（margin，padding，width，height，border等）
- 文本属性（font，text-decoration，text-align，line-height等）
- 其他属性（background，color，opacity等）
3.1.3. 代码示例
table.standard-table {
width: 100%;
border-spacing: 1px;
background: black;
}
3.2. 选择器的使用
尽量缩小样式的应用范围。例如有个类样式“.list-table”用于table标签，如果该样式不会应用在其他标签上的话，那么该类样式应写作“table.list-table”，避免使用通配符。
避免使用ID选择器，样式应该尽量选择类选择器，ID有可能绑定着页面的业务逻辑，有可能发生改变，因此尽量避免使用ID选择器应用样式。
避免使用IE6不兼容的选择器，如子选择器“>”以及属性选择器“[type=’checkbox’]”等。
3.3. 兼容问题
尽量避免使用CSS Hack，对于IE系列的浏览器兼容性问题，采用条件注释加载对应的CSS，覆盖默认样式的方式解决。有关CSS Hack技术及IE的条件注释技术具体请参考附录5.3和附录5.4。
3.4. !important
!important会使样式属性优先级变为最高，在使用时需要一定的谨慎，建议一般情况下不要使用该关键字。
3.5. 公用的一些css
*{
margin:0;
padding:0;
}
body{
font-family:'宋体',宋体,'Microsoft Yahei','微软雅黑',arial,'Hiragino Sans GB',Tahoma,Arial,Helvetica,STHeiti;
font-size:12px;
color:#706866;
}
img{
border:0;
}
ul,li{
list-style:none;
}
.f_left{
float:left;
}
.f_right{
float:right;
}
.clear{
font-size:0px;
clear:both;
}
a { blr:expression(this.onFocus=this.blur()) } /*针对 IE*/
a { outline:none; } /*针对firefox等*/
a :hover{ text-decoration: underline;}
以上这些css算是所有页面都需要的一些属性。
3.6. 字体规范
1. 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像数px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14px，这是经过优化的字号，黑体字或者宋体字加粗时，一般选用 11pt 和 14.7px的字号比较合适。
2. 大小为9pt时，行距为120%; 信息类最终页面采用弹出方式，标题及正文字体规定为11pt，行距为140%，所有页面字体大小建议不要超过11pt。
3.考虑字体大小的兼容性，避免使用size=2的方式定义，尽量使用 pt 或者 px 并用css 定义 。
4. 文字颜色与页面配色协调，不使用与背景相近的颜色
5. 非图像设计的字体一律采用windows 标准宋体。（如果做特殊效果需做成图）要加粗文字用 Blod，不要用strong。
6. 页面文字不使用下划线方式，也尽量少采用粗体显示。
4. JavaScript
4.1. JavaScript Code Style
l 变量与函数名采用驼峰式命名
l 常量使用全大写，多个单词以下划线“_”分隔
l 关键字后空一格
l 等号两边各空一格
l 一行语句结束时必须添加“;”
l if-else语句块必须添加“{}”，即使只有一行语句。
l 类中的方法应写入类的prototype中，私有方法以下划线“_”开头。
示例：
var foo = function (params) {
if (params.length > 0) {
doSomthing(params);
}
};
function Student(name, gender) {
this.name = name;
this.gender = gender;
}
Student.prototype.study = function (course) {
doSomething();
};
4.2. 文档注释
JavaScript的文档注释采用JSDoc文档注释，所有公共函数、类都应该添加文档注释。关于JSDoc，具体请参看http://code.google.com/p/jsdoc-toolkit/w/list。
JSDoc示例：
/**
* @function 为一个checkbox添加对一组checkbox的全选功能
* @param {String|Element} checkbox 目标element对象或id
* @param {String} checkBoxName 受控checkbox的name
* @param {String} [form] 受控checkbox所在表单的name或id，可选
*/
function addCheckAllFunction(checkbox checkboxName, form) {
}
4.3. JavaScript文件引用在页面中的位置
尽可能的将JS的引入位置放到body的结束标签之前，以减少被JavaScript载入时阻塞页面的情况。有关JavaScript阻塞的问题，请参考附录5.5。
4.4. 避免在HTML中直接嵌入JavaScript
尽量避免在html中直接嵌入JavaScript。例如：
<button id=”okButton” type=”button” onclick=”ok();”>Button</button>
建议采取无干扰的JavaScript方式，在JavaScript中注册该事件。有关无干扰的JavaScript技术，请参考附录5.6。
4.5. 减少全局变量
尽量不要在全局作用域下声明变量或者函数。他们应该被组织在各自的业务命名空间下，或在一个匿名函数中。
对于必须使用的全局变量，变量名应以“$”开头。
5. 附录
5.1. CSS Sprites
5.1.1. 原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
5.1.2. 优点
利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
5.2. 浮动元素的闭合
<div id=”f_left”></div>
<div id=”f_right”></div>
<div id=”NOTfloatC”></div>
这里的NOTfloatC并不希望继续平移，而是希望往下排 (其中f_left、f_right的属性已经设置为“float:left,float:right;”) 。原因是NOTfloatC没有设置float属性，必须将float标签闭合。在 <div class=”f_right”> <div class=”NOTfloatC”>之间加上 <div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义如下即可：
.clear{ clear:both;}
作为外部wrapper的div不要定死高度,为了让高度能自动适应，要在wrapper里面加上“overflow:hidden;”。当包含float的div的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性“zoom: 1;”，可以解决这个问题。这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper { overflow: hidden; zoom:1; margin:5px auto;}
这里还有另一种方案添加闭合的方法，把需要闭合的div加上 class="clearfix" 即可,其定义如下：
.clearfix { display: inline-block; }
.clearfix:after {
content: ".";
display: block;
height :0px;
clear: both;
visibility: hidden;
}
/* Hide from IE Mac */
.clearfix {display: block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：
.hackbox{ display: table; /*将对象作为块元素级的表格显示*/ }
5.3. CSS Hack
CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，利用了各个浏览器对CSS的支持和解析结果不一样的特点，例如： IE6能识别下划线"_"和星号"*"，IE7能识别星号"*"，但不能识别下划线"_"，而Firefox两个都不能识别。书写顺序一般是将识别能力强的浏览器的CSS写在后面。比如：
div{
background: green; /* for firefox */
*background: blue; /* for IE7 */
_background: red; /* for IE6 */
}
这样在Firefox中看到的背景是绿色，在IE7中看到的是蓝色，而IE6中看到的是红色。
利用这种方式，可以解决多种由于IE独特的文档渲染方式造成的问题。
5.4. IE的条件注释
5.4.1. 介绍
条件注释是微软IE浏览器在HTML源代码中被解释的条件语句。最早出现于IE5，支持到IE8。条件注释用于在IE浏览器中显示或隐藏一段代码。
5.4.2. 示例
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]>-->
<p>You are not using Internet Explorer.</p>
<!--<![endif]-->
5.5. JavaScript的阻塞
浏览器是按标签来解析的，每解析一段标签，就显示这段标签的内容。如果标签引入了外部文件（如图像），则会一边继续解析其他标签，一边继续下载该外部文件，直到载入完毕。
但浏览器在解析script标签时，由于JavaScript可能会改变浏览器内容，会停止所有页面元素的载入，直到这段script代码执行完毕。如果这个script标签引入了一个来自外部服务器的js文件，而这个服务器访问速度很慢，那么页面上其他元素便都得等到这个js文件载入并执行完毕才能继续载入。
5.6. 无干扰的JavaScript
无干扰的 JavaScript 的首要目标就是保持 JavaScript 代码和 HTML 标记的分离。这种让内容分离于形为的方式，与将 CSS 放入样式表而保持内容与表现分离的方式如出一辙。为了实现这一目标，把所有的 JavaScript 代码放到外部文件中。
无干扰的 JavaScript 的第二个目标是它必须降低优雅性。脚本应该基于增加 HTML 的内容来构思和设计，但是，即使没有这些 JavaScript 代码，内容也应该能用。
无干扰的 JavaScript 的第三个目标是，它不能降低一个 HTML 页面的可访问性。
浙公网安备 33010602011771号