前端开发设计规范文档.docx

前端开发设计规范文档.docx

《前端开发设计规范文档.docx》由会员分享，可在线阅读，更多相关《前端开发设计规范文档.docx（14页珍藏版）》请在冰豆网上搜索。

前端开发设计规范文档

前端开发设计规范

一、HTML使用规范

1、1、页面文件命名规范

命名格式为:

项目名缩写_所属功能_所属功能子项_、、、、jsp/html…,文件命名下划线不能超过三个,命名尽量使用简短的能明确表明文件用途的英文或者英文简写。

1、2、页面head部分书写规范

1）、JSP页面:

需要在页面的最开始部分增加以下语句:

2）、HTML页面:

需要在页面的最开始部分增加以下语句:

3）、HTML5页面:

页面添加编码格式可简写为:

4）、响应式的网页添加如下语句:

5）、title元素:

一般网页必须添加title元素,若为框架页面,则可以不写。

title统一使用中文,title内容要简洁明了,不能超过20个字。

6）、外部js的引用:

页面加载时需要用到的js文件写在head中,引用时不用写language属性,HTML5可以省略type属性,如。

7）、外部CSS文件的引用:

必须使用link方式引入,HTML5可以省略type属性,CSS文件引入要放在js文件前。

1、3、HTML元素开发规范

1、3、1、HTML元素书写规范

1）、代码的结构要保持完整性,单个标签必须要关闭,如:

2）、子元素要比父元素缩进两个字符。

3）、body中的所有内容不能直接书写在标签中,需要在body中嵌入一层div,所有的元素需要写在改div中。

4）、除非必要,所有标签元素的样式都需要使用CSS文件来定义。

5）、img元素:

所有展示用图片都要使用alt属性添加能简要描述图片的文字说明,如首页的广告图片等,必须具有width与height属性。

6）、所有Form都要指定action属性,但属性值需要则填写,不需要则留空,method属性统一使用POST;所有form表单都要在提交前对输入的数据前进行验证,验证使用jQueryvalidate插件,书写规范如下:

7）、所有不可更改的input元素都要设置readonly属性。

8）、按功能模块添加简单明了的注释,在功能模块的开始标明模块开始,结束时标明模块结束,注释单独占一行;模块之间留行间隔便于查瞧代码。

9）、已过时的元素标签使用CSS样式来代替,已过时的标签属性禁止使用,使用CSS样式定义来实现。

1、3、2、HTML元素命名规范

涉及到跟服务端交互的元素,元素命名应当与服务端程序中定义的对应变量名相同,或使用对象名、变量名的形式。

页面上使用到的不涉及与服务端交互的HTML元素其id与name需统一,所有命名使用元素标签的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写,其她单词首字母大写,常见元素命名规则如下表所示:

text输入框

txt

txt_userName

button按钮

btn

btn_check

select下拉选择

sel

sel_beginTime

checkbox多选项

chk

chk_departmentNumber

div标记

div

div_result

submit提交按钮

sub

sub_register

hidden隐藏值

hdn

hdn_userId

二、WEB页面开发规范

2、1、错误跳转页面的处理

400、401、403、404、405、406、407、410、412、414、500、501、502等错误代码使用其相应的统一页面,所有错误信息全部使用中文错误信息,标点符号使用中文半角符号。

页面设计与项目功能相匹配,做到简洁友好。

2、2、提示信息的处理

成功提示信息可以使用弹窗或跳转统一成功页面的方式,成功页面的风格与网站总体风格相同,格式如下:

"成功:

"+提示信息+"！

"。

2、3、页面的返回

所有需要返回上一页的时候使用history、back（）;不使用history、go（-1）。

2、4、提交前数据的判断验证

1）、所有由用户输入的数据在提交前都要进行验证。

2）、验证方式使用jQueryvalidate插件,需要验证的项:

长度验证:

默认长度为数据库中数据的最大长度,中文占两个字符,英文占一个字符。

为空验证:

所有不允许为空的输入内容为空时不允许提交。

其她验证:

需要根据输入内容的不同设定合适的验证,如Email格式就是否正确,身份证号格式就是否正确等。

3）、验证后发现错误,需要提示明确的错误信息。

错误提示信息样式:

字体颜色#ff3366,文字前面加红色感叹号小图标。

4）、可输入表单需要具有输入内容的提示信息,可使用placeholder属性来定义或者自定义,颜色必须使用灰色,字体比网站使用字体小。

2、5、删除操作

所有涉及删除的操作,需要用户进行确认之后才能进行操作。

2、6、页面中java代码的使用

页面中不允许使用<%%>的方式嵌入java代码。

2、7、网站页面布局规范

2、7、1、前台页面尺寸

1）、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面与内容决定,1024*768下,网页宽度保持在1002以内,不会出现水平滚动条,高度同样视版面内容决定。

2）、根据第一条原则,规定网页的尺寸为width=960px,height=600px。

3）、页面长度原则上不超过3屏（可根据实际情况设定）,宽度不超过1屏。

4）、全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px。

5）、每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K。

2、7、2、标准网页广告图标规格（参考）

1）、120*120,适用于产品或新闻照片展示。

2）、120*60,主要用于做LOGO使用。

3）、120*90,主要应用于产品演示或大型LOGO。

4）、125*125,适于表现照片效果的图像广告。

5）、234*60,适用于框架或左右形式主页的广告链接。

6）、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。

7）、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。

8）、88*31,主要用于网页链接,或网站小型LOGO。

2、7、3、页面字体

正文内容中文统一使用宋体（可根据需要设定）,大小为12px,标题使用14px加粗,不建议使用13px字,英文字体使用Arial与Helvetica/Univers。

2、7、4、字体颜色

1）、正文使用灰黑色#333333。

2）、超链接可以使用蓝色#1f376d或#425c9e,也可以根据整体页面布局进行调整,整个网站的文字超链接样式要统一。

三、javaScript开发规范

3、1、javaScript文件命名规范:

1）、可通用的javaScript文件:

项目名称缩写-文件作用、js。

2）、其她javaScript文件:

所属功能-文件作用、js。

3、2、javaScript开发规范

3、2、1、javaScript书写规范

1）、javaScript代码都需要写在javaScript文件中,在页面中进行调用,调用代码除页面加载时需要用到的外全都写在页面最低端。

2）、如验证用javaScript代码等,每个页面不同且比较短的,可以写在页面的最底端,从最后一个外部javaScript引入命令后开始。

3）、脚本变量开发规范:

变量的使用尽量缩小到小的作用域。

如循环使用。

4）、尽量避免使用全局变量。

5）、每一句语句都要以分号“;”结束。

6）、函数程序体缩进四个空格,Tab键为4个空格,以Tab键作为缩进单位。

7）、函数名与“（”之间不应该有空格,“）”与“{”之间加空格。

8）、函数体之间应当加空行。

9）、如果代码本身就是清楚的,则只需要在函数定义前,添加简单注释说明该函数的作用,若代码本身比较复杂,可在个别语句后添加简洁明了的注释。

3、2、2、javaScript命名规范

1）、常量以及全局变量名必须全部使用大写字母。

2）、不要再命名中使用“$”与“\”等特殊字符,不要把“_”作为变量名的第一个字符与最后一个字符。

3）、变量名必须使用其类型的缩写字符串开始。

各种类型的缩写字符串如下:

整型变量

int

长整型变量

lng

浮点型变量

flt

双精度变量

dbl

对象变量

obj

字符串变量

str

Date类型变量

dtm

数组

ary

临时变量

tmp

4）、变量名必须采用有意义的单词命名,如:

strUserName、lngArrayIndex,以及不要出现数字编号命名,如:

value1,value2…

5）、如果变量名过长可以使用单词缩写,除了被广泛了解的单词缩写以外,所有使用单词缩写的变量名必须在定义时给出注释,如:

6）、参数变量命名必须加前缀:

p_。

7）、function命名规范:

使用动词+名词的方式,并且命名需要明确指出其作用,动词前缀必须就是同函数功能相关的完整动词,如getUserId（）,用来取用户Id。

8）、所有命名使用小驼峰命名法:

第一个单词全部使用小写,其她单词首字母大写,如:

myClassName。

四、css样式规范

4、1、css样式文件命名规范

4、1、1、通用样式文件命名规范:

1）、整个项目通用的css布局样式文件命名为:

layout、css。

如:

通过于整个网站中使用的div、h1、img等的定义文件。

2）、对引用的开源css样式重定义的文件命名为:

开源的css样式文件名-reset、css

如:

bootstrap、css为引用的css样式文件,现在对它的、btn重新定义样式内容,这类样式的文件名命名为:

开源的css样式文件名-reset、css。

一个项目建议最多使用一个css框架。

3）、外部引用的字体css样式文件命名为:

font-加引用的字体名字、css,若有多个字体引用则使用:

font-style、css。

4）、自定义的响应式布局样式命名为:

项目名称缩写–responsive、css。

5）、跨项目通用功能定义的css样式文件命名为:

实现的功能、css。

6）、为IE浏览器做兼容处理的样式命名为:

ie-版本号、css。

4、1、2、业务类样式文件命名规范

自定义的样式统一定义在一个文件内,文件命名为:

项目名称-style、css。

4、1、3、css样式文件命名须知

1）、以上所有的css样式文件命名必须就是小写字母,不允许中文、大写字母及其她特殊字符等。

如果有样式版本共存或更新需要保留老版本样式,请在样式文件名后面加上“-版本号”,最新版本样式文件除外,同样版本号只允许就是数字或小写字母。

2）、以上css文件命名制定的规范只适用普遍的情况,特殊情况下请开发人员根据实际情况自行命名,但必须遵行1）的规定。

4、2、css样式文件存放目录规范

项目文件存放目录将在后面说明,此处只针对css样式文件存放规定。

1）、字体样式文件存放文件夹:

/font/,包括字体的源文件。

2）、引用的样式保持原来的目录结构,如果有多个引用的样式则按功能新建文件夹来分别存放。

3）、其她样式文件不用单独新建文件夹。

4、3、css样式定义规范

4、3、1、css样式内容顶部注释规范

1）、请使用utf-8编码。

2）、申明css定义的内容概述或目的,申明编写的人员、更新日期。

3）、请谨慎使用@importurl（……）引入其她css样式文件。

4、