文档介绍：该【WEB前端开发代码使用规范 】是由【燕子】上传分享，文档一共【14】页，该文档可以免费在线阅读，需要了解更多关于【WEB前端开发代码使用规范 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。Documentnumber:WTT-LKK-GBB-08921-EIGG-22986
WEB前端开发代码使用规范精编
WEB前端代码规范
规范目的
为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。
基本准则
符合web标准;语义化html;结构、表现、行为分离;兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
文件规范
Html,css,js,images文件均归档至相应约定的目录中。
html文件命名:英文驼峰式命名,。按实际模块需求命名。
jsp文件命名:英文驼峰式命名,。按实际模块需求命名。
css文件命名:英文驼峰式命名,。共用,首页,其他页面按实际模块需求命名。
js文件命名:英文驼峰式命名,。共用,其他依实际模块需求命名。
html书写规范
文档类型声明及编码:统一为html5的声明类型<!DOCTYPE?html>;编码统一为
<meta?charset="utf-8"/>,书写时利用IDE实现层次分明的缩进。
非特殊情况下css文件必须在<head>...</head>之间引入,选择link方式引入而非
***@import形式。
非特殊情况下js文件必须在页面底部引入。
引入样式文件或JavaScript文件时,须略去默认类型声明,写法如下:
<linkrel="stylesheet"href="..."/><style>...</style>
<script?src="..."></script>
引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如:
;
引入插件,文件名格式为库名称+插件名称,比如:。
所有HTML标签嵌套必须是正确的,禁止出现多出或者少出闭合标签的情况。
所有编码均遵循xhtml标准,标签、属性、属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(<br/
>),
hr(<hr/
>)等;属性值必须用双引号包括。
充分利用无兼容性问题的html自身标签,比如span、em、strong、optgroup、label……
需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,须以"data-"为前缀来添加自定义属性,避免使用"data:"等其他命名方式。
语义化html,如标题根据重要性用h1-h6(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块状元素。
尽可能减少div的嵌套层数。
在页面中尽量避免使用内嵌样式表,即在标签内使用style="…"。
以背景形式呈现的图片,尽量写入css样式中;重要图片必须加上alt属性;
特殊符号使用:尽可能使用代码替代:比如<(&lt;)、>(&gt;)、空格(&nbsp;)、&(&amp;)、
”(&quot;)等等;
尽量避免使用过度复杂的HTML结构。
css书写规范
编码统一为utf-8。
为了避免一些浏览器兼容性问题以及增加样式重用性,每个页面必须引入(详见附件一),此文件不可随意修改。
class与id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中。
为JavaScript预留钩子的命名,请以js_起始,比如:js_hide,js_show。
class与id命名:使用英文命名,命名要语义化,简明化,但不要使用诸如first,last之类的命名。使用驼峰式和下划线分隔相结合的命名规则,即命名应以父级加子级的命名规范,如:父级的类为simple子级的类应该为simple_first,以此类推,但是尽量避免出现超过四级的类命名。
css属性书写顺序,建议遵循:自身属性-->布局定位属性-->文本属性-->其他属性。此条可根据自身****惯书写,但尽量保证同类属性写在一起。
属性列举:
自身属性主要包括:width、height、margin、padding、border、background;
布局定位属性主要包括:display、list-style、position(相应的top、right、bottom、left)、float、clear、visibility、overflow;
文本属性主要包括:color、font、text-decoration、text-align、vertical-align、
white-space
其他:content;
书写代码前,考虑并提高样式重复使用率。
充分利用html自身属性及样式继承原理减少代码量。
样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码。
背景图片请尽可能使用sprite技术,减小http请求,考虑到多人协作开发,sprite按模块制作。
使用table标签时(尽量避免使用table标签),请不要用width、height、cellspacing、cellpadding等table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如:thead、tr、th、td、tbody、tfoot、colgroup、scope。
用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景:
_background:none;_filter:progid:
(sizingMethod=crop,src=’img/’);
避免兼容性属性的使用,比如text-shadow、css3的相关属性;
减少使用影响性能的属性,比如position:absolute、float;
代码缩进与格式:开发阶段单行书写,系统交付时可再将所有css进行压缩;使用Tab键进行缩进,每层缩进一个Tab键
背景重复,确保使用的图片在与迭代方向相同的长度要大于1像素而小于10像素。简单点说,就是x轴迭代,宽度要在1和10之间,y轴迭代,长度要在1和10之间。
JavaScript书写规范
文件编码统一为utf-8,书写过程过,每条语句必须以分号结束。
变量命名:驼峰式命名。首字母须小写,如:iTaoLun。
类命名:驼峰式命名。首字母大写,如:ITaoLun。
函数命名:驼峰式命名。首字母小写。如:iTaoLun()。
构造函数命名:全部大写。
命名语义化,尽可能利用英文单词或其缩写。
尽量避免使用存在兼容性及消耗资源的方法或属性,比如eval()、innerText。
后期优化中,JavaScript非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示。
代码结构明了,加适量注释。提高函数重用率。
注重与html分离,减小reflow,注重性能。
减少DOM访问次数。方法是将得到的元素用变量存储起来。
减少DOM事件绑定。
将自己写的JS用匿名函数包起来,避免变量冲突。
(function(){
})()
图片规范
所有页面元素类图片均放入images文件夹,测试用图片放于images/demo文件夹;
图片格式仅限于gif、png、jpg;
命名全部用小写英文字母、数字、_的组合,其中不得包含汉字、空格、特殊字符;尽量用易懂的词汇。
在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间。
尽量避免使用半透明的png图片。
运用csssprite技术集中小的背景图或图标,减小页面http请求,但注意,请务必在对应的psd源图中划参考线,并保存至images目录下。
注释规范
html注释:注释格式<!--注释-->,'--'只能在注释的始末位置,不可置入注释文字区域;
css注释:注释格式/*注释*/;
JavaScript注释,单行注释使用'
12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left;}
.tc{text-align:center;}