前端开发设计规范文档Word格式文档下载.docx
《前端开发设计规范文档Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《前端开发设计规范文档Word格式文档下载.docx(14页珍藏版)》请在冰豆网上搜索。
1、3、HTML元素开发规范
1、3、1、HTML元素书写规范
1)、代码的结构要保持完整性,单个标签必须要关闭,如:
<
div>
/div>
<
br/>
等。
2)、子元素要比父元素缩进两个字符。
3)、body中的所有内容不能直接书写在<
body>
/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、