前端开发规范文档

1、文件管理规范

1) 资源文件目录

背景图片目录	图标目录	图片目录	临时图片目录	样式文件目录	脚本文件目录	flash文件目录	上传文件目录	静态文件目录
images/bg	images/ico	images/pic	images/temp	style	js	flash	upload	static

2) 文件夹及文件命名

用简短有意义的英文或者拼音（不能出现中文命名）来命名。
①文件夹命名规则: 全部小写。例如(emotions, download, mail)。
②html,js,css文件命名规则: 第一个单词首字母小写,之后每个单词首字母大写,html文件后缀名统一为.htm。例如(index.htm, customizeCity.htm, register.js, dateSelect.js, base.css, mapApply.css)。
③图片命名规则: 第一个单词首字母小写,之后每个单词首字母大写,或者全部小写,单词间用下划线连接。例如(btn_sign.gif, bgTipBox.png)。

2、XHTML书写规范

1) 文档类型声明统一为XHTML 1.0 Transitional;
2) 编码统一为utf-8;
3) 确保有Title,Description,Keywords等完整的meta标签。
4) 引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.7.1.min.js;引入插件,文件名格式为库名称 + 插件名称,比如jQuery.cookie.js;
5) 非特殊情况下样式和脚本代码必须独立于xhtml代码于外部文件中，样式文件必须外链至<head>...</head>之间，渲染执行脚本必须外链至页面底部;
6) 引入外部样式文件及脚本文件采用时间戳后缀，防止由于缓存问题导致页面不能及时更新;
7) 书写时采用制表符缩进(大小为4);
8) 编码必须遵循w3c标准,标签、属性及属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合;属性值必须用双引号包括;
9) 充分利用无兼容性问题的html自身标签,比如span,em,strong,label,等等;需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;
10) 语义化html,如标题根据重要性用h1~h6(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;
11) 尽可能减少div嵌套;
12) 必须为含有描述性表单元素(input,textarea)添加label;
13) 能以背景形式呈现的图片,尽量写入css样式中;
14) 图片必须加上alt属性;给重要的元素和截断的元素加上title;
15) 不是标签一部分的特殊符号都用编码表示:比如<(<)&>(>)&空格()&»(»)等等;
16) 给区块代码及重要功能(比如循环)加上合理的注释,方便后台添加功能:注释格式,‘–-’只能在注释的始末位置,不能出现2个或2个以上的"--";

3、CSS书写规范

1) 编码统一为utf-8;
2) 全局定义以及全站公共部分共用文件common.css,开发过程中,每个页面请务必都要引入,此文件包含reset,常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式及头部底部样式,此文件不可随意修改;
3) 选择符命名及其使用：
① 命名请尽量使用英文避免使用汉语拼音,使用驼峰式命名和划线命名法。如(searchBox, p_i_4_l, width200);驼峰式命名法用来区别不同的单词，划线命名法表示从属关系。命名要语义化,简明化,尽量使用简短的英文单词组合;
② id是唯一的并是父级的,class是可以重复的并是子级的,所以id一般使用在大的模块上,class可用在重复使用率高及子级中;
③ 严禁出现#id ul li(长度超过2以上的派生类)等类似选择器;允许.active .classname;减少使用基于元素的类选择器:div.classname;减少属性选择器：#id[title=weyoo]; ④ 严禁使用 “*” 选择符;
4) CSS属性书写顺序尽量遵循:显示属性->盒模型->文字属性->排版->其他。例如:#searchBtn{display:block;position:abtolute;left:2px;top:0;width:50px;height:19px;border:1px solid #ccc;padding:5px 2px;font:Arial 12px/19px;text-align:center;vertical-align:middle;color:#666;background:#999;cursor:pointer;}
5) 尽量使用高级语法简写代码：body{font:italic bold 12px/20px arial,sans-serif;} input{padding:2px 3px; border:1px solid #999};
6) 书写代码前,考虑并提高样式重复使用率,归类class分组，以便通用性;
7) 背景图片请尽可能使用sprite技术,减少http请求;
8) 减少使用影响性能的属性,比如position:absolute||float;性能比较:“默认” 优于 “定位” 优于 “浮动”;
9) 尽量不要使用expression等不兼容的属性;
10) 尽量不使用hack写出兼容当前主流浏览器(ie6~ie9,firefox,chrome,safari,opera)的代码。例如:float元素的父元素不能指定clear属性,务必指定width属性(尽量使用em而不是px做单位),尽量不指定margin和padding等属性(可以在float元素内部嵌套一个标签来设置margin和padding)。
11) 文件头部注释须标明作者及修改日期。必须为大区块样式添加合理注释;
12) 测试完成后压缩合并css文件,力求降低http请求;

4、JavaScript书写规范

1) 编码统一为utf-8;
2) 常用功能函数统一写在公用js文件commonToolFn.js里;
3) 书写时采用制表符缩进(大小为4);
4) 常量所有字符大写，变量所有字符小写;类命名:首字母大写驼峰式命名.如CommonTool;函数命名:首字母小写驼峰式命名.如arrEach();
5) 命名语义化,尽可能利用英文单词或其缩写;代码结构明了,提高函数重用率;
6) 文件头部注释须标明作者及修改日期。函数注释须标明函数功能，参数及返回值;
7) 书写过程过,每行代码结束必须有分号;
8) 声明变量必须用var ,包括循环遍历:如：for(var i=0;i<10;i+=1){},for(var value in obj){};注意减少全局变量的声明避免变量混乱;
9) 条件判断后执行代码块必须加花括号:if(){...};for(){...}
10) 规范json书写:必须以花括号开始和结束;
11) 测试完成后压缩合并JavaScript文件,力求降低http请求;