Web前端开发规范

一、前端开发规范目的

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

二、基本准则

符合web标准语义化html标签;

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

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

三、html规范

1DTD统一用<!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底部;

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

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

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

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

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

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

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

四、CSS规范

1CSS ResetYUICSS Reset

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

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

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

5CSS用一行的写法,避免行数太长,不利查找;

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

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

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

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

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

五、JavaScript规范

1JavaScript尽量避免使用全局变量,通过命名空间或匿名函数将变量封装到闭包中;

2、库引入: 原则上仅引入jQuery库;

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

4、 类命名首字母大写驼峰式命名;

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

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

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

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

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

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

六、图片规范

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

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

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

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

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

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

七、注释规范

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

/**

文件用途说明

作者姓名

联系方式

制作日期

**/

2、大的模块注释方法

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

// 代码用途

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

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

// 代码说明

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。