Web前端开发规范

一、前端开发规范目的

为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改.

二、基本准则

符合web标准,语义化html标签；

结构、表现、行为三者相互分离,兼容性优良；

页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。

三、html规范

1、DTD统一用<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">；

2、统一UTF-8编码；

3、一般情况下CSS文件外链至head之间，js文件外链至body底部；

4、html应在保证弹性的基础上尽量减少嵌套层数；

5、标签语义化，去样式后可读性良好；

6、在页面中尽量避免使用style属性；

7、能以背景形式呈现的图片,尽量写入css样式中；

8、重要图片必须加上alt属性；给重要的元素和截断的元素加上title；

9、书写页面过程中,请考虑向后扩展性；

10、方便服务端程序员套模板，html需为模板添加注释，格式为：“<!—xxx开始{-->content<!--}xxx结束-->”；

四、CSS规范

1、CSSReset用YUI的CSSReset；

2、CSS采用base.css+common.css+app.css形式；

3、app.css采用分工制，一个前端工程师负责一个栏目，如果多人维护，需要添加注释；

4、优先对已存在的common.css中的类进行组合，减少自定义类的数量；

5、CSS用一行的写法，避免行数太长，不利查找；

6、充分利用html自身属性及样式继承原理减少代码量

7、使用table标签时请不要用table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现，最好先在base.css文件中初始化表格样式；

8、避免兼容性属性的使用,比如text-shadow||css3的相关属性；

9、减少使用影响性能的属性,比如position:absolute||float；

10、正式发布前应进行压缩，压缩后文件的命名应添加“_min”后缀；

五、javaScript规范

1、Javascript尽量避免使用全局变量，通过命名空间或匿名函数将变量封装到闭包中；

2、库引入：原则上仅引入jQuery库；

3、JS采用base.js+common.js+app.js形式；

4、类命名:首字母大写,驼峰式命名；

5、函数命名:首字母小写驼峰式命名；

6、命名语义化,尽可能利用英文单词或其缩写；

7、尽量避免使用存在兼容性及消耗资源的方法或属性,比如eval()&innerText；

8、代码结构明了,加适量注释.提高函数重用率；

9、注重与html分离,减小reflow,注重性能；

10、正式发布前应进行压缩，压缩后文件的命名应添加“_min”后缀；

六、图片规范

1、所有页面元素类图片均放入img文件夹,测试用图片放于img/demoimg文件夹；

2、图片格式仅限于gif||png||jpg；

3、命名全部用小写英文字母||数字||_的组合，其中不得包含汉字||空格||特殊字符；尽量用易懂的词汇,便于团队其他成员理解；另外,命名分头尾两部分,用下划线隔开,比如ad_left01.gif||btn_submit.gif；

4、在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间；

5、尽量避免使用半透明的png图片；

6、运用csssPRite技术集中小的背景图或图标,减小页面http请求,但注意,请务必在对应的spritePSD源图中划参考线,并保存至img目录下。

七、注释规范

1、公共组件和各栏目的维护者都需要在文件头部加上注释说明：

/**

*文件用途说明

*作者姓名

*联系方式

*制作日期

**/

2、大的模块注释方法

//==========

//代码用途

//==========

3、小的注释，单占一行，不要再代码后的同一行内加注释

//代码说明