前端代码规范.doc

前端开发规范

基本准则

符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码规定简洁明了有序,尽也许的减小服务器负载,保证最快的解析速度.

二、文献规范

1.html,css,js,images文献均归档至约定的目录中;

2.html文献命名:英文命名,后缀.html.同时将相应界面稿放于同目录中,若界面稿命名为中文,请重命名与html文献同名,以方便后端添加功能时查找相应页面;

3.css文献命名:英文命名,后缀.css.共用global.css,首页index.css,其他页面依实际模块需求命名.;

4.Js文献命名:英文命名,后缀.js.共用global.js,其他依实际模块需求命名.

书写规范

HTML

基本架构请参照template.html,移动端参照template-mobile.html

1.文档类型声明及编码:统一为html5声明类型!DOCTYPEHTML;编码统一为metacharset=utf-8/,书写时运用IDE实现层次分明的缩进;

2.非特殊情况下样式文献必须外链至head/head之间;非特殊情况下JavaScript文献必须外链至页面底部;

3.引入样式文献或JavaScript文献时,须略去默认类型声明.

CSS:linkrel=”stylesheet”href=”css/global.css”/

JS:scriptsrc=js/jquery.js/script

4.引入JS库文献,文献名须包含库名称及版本号及是否为压缩版,比如jquery-1.7.1.min.js;引入插件,文献名格式为库名称+插件名称,比如jQuery.cookie.js;

5.所有编码均遵循xhtml标准,标签属性属性命名必须由小写字母及中、下划线数字组成,且所有标签必须闭合;属性值必须用双引号涉及;

6.充足运用无兼容性问题的html自身标签,比如span,em,strong,optgroup,label,等等;需要为html元素添加自定义属性的时候,一方面要考虑下有没有默认的已有的合适标签去设立,假如没有,可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;

7.语义化html,如标题根据重要性用h(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;

8.尽也许减少div嵌套

9.书写链接地址时,必须避免重定向，例如：href=””,即须在URL地址后面加上“/”；

10.在页面中尽量避免使用style属性,即style=”…”;

11.能以背景形式呈现的图片,尽量写入css样式中;

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

13.给区块代码及重要功能(比如循环)加上注释,方便后台添加功能;

14.特殊符号使用:尽也许使用代码替代:比如()()空格()?(?)等等;

15.书写页面过程中,请考虑向后扩展性;

?

CSS

重置样式引用reset.css

1.编码统一为utf-8;

2.class与id的使用:id是唯一的,class是可以反复的,所以id尽量使用在大的模块上,class可用在反复使用率高及子级中;常用命名：

容器：container/box

头部：header

主导航：nav

子导航：nav-sub

顶导航：nav-top

网站标志：logo

大广告：banner

页面中部：main

底部：footer

菜单：menu

菜单内容：menu-content

子菜单：menu-sub

搜索：search

搜索关键字：keyword

搜索范围：range

标签文字：tag-title

标签内容：tag-content

当前标签：tag-active

标题：title

内容：content

列表：list

当前位置：nav-dir

侧边栏：side

图标：icon

注释：note

登录：login

注册：register

3.为JavaScript预留钩子的命名,请以js_起始,比如:js_hide,js_show;

4.class与id命名:大的框架命名比如header/footer/wrapper/left/right.其他样式名称由小写英文数字-来组合命名,如top-comment,fontred,width200;避免使用中文拼音,尽量使用简易的单词组合;总之,命名