Web前端开发规范
一、前端开发规范目的
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.
二、基本准则
符合web标准, 语义化html标签；
结构、表现、行为三者相互分离, 兼容性优良；
页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。
三、html规范
1、DTD统一用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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、CSS Reset用YUI的CSS Reset；
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、运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下。
七、注释规范
1、公共组件和各栏目的维护者都需要在文件头部加上注释说明：
/**
* 文件用途说明
* 作者姓名
* 联系方式
* 制作日期
**/
2、大的模块注释方法
//==========
// 代码用途
//==========
3、小的注释，单占一行，不要再代码后的同一行内加注释
// 代码说明
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
