WEB前端开发规范方案文档.pdf
.WEB 前端开发规范文档 目录 WEB 前端开发规范文档 1 规范目的 1 基本准则 1 文件规范 2 html 书写规范 2 html 其他规范 3 css 书写规范 3 JavaScript 书写规范 4 jQuery 部分 5 开发及测试工具约定 5 其他规范 5 规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档:本规范文档一经确认,前端开发人员必 须按本文档规范进行前台页面开发:本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改:基本准则 1：符合 web 标准,语义化 html,遵循内容、显示、行为分离的 代码组织模式.2：代码格式化,保持干净整洁.3：换行必须缩进一个 tab.4：编写所有前台页面时,请使用已有模板进行复制,在模板的基础上进行开发.5：每一个页面都必须有一个独立的 css,js 文件.6：如果不是用 HTML5 编写的网站,请用 IE7,IE8,IE9,火狐,谷歌,webkit,safari 内核进行测试兼容性.7：如果是 HTML5 编写的网站,请用 IE9,火狐,谷歌,webkit,safari 内核进行测试兼容性.文件规范 1:html,css,js,images文件均归档至约定的目录中;2:html 文件命名:英文命名,后缀:htm:同时将对应界面稿放于同目录中,若界面稿命名为中文,请重命名与 html 文件同名,以方便后端添加 功能时查找对应页面;3:css 文件命名:英文命名,后缀:css:共用 base:css,首页 index:css,其他页面依实际模块需求命名:;4:Js 文件命名:英文命名,后缀:js:共用 common:js,其他依实际模块需求命名:html 书写规范 1：所有元素都必须小写,属性也是,如：正确 错误 2：元素必须成对出现,如必须写成特殊元 素 除 外,如：3：标签中不允许出现样式,必须用 class 来声明样式,如：错误 正确 4：元素 id 命名必须是驼峰式命名如：正确 错误 错误 5：元素 class 命名规范是：元素简写+-+功能名,如：正确 错误 错误 6：元素 name 命名必须遵循驼峰式命名法.正确 错误 错误 7：元素属性必须有值：正确 8：元素属性必须用双引号,不允许使用单引号.正确 错误 9：如果元素需要自定义属性,请用 data-xxx 方式命名.10：严禁使用已在 XHTML1:0 中已移除的标签,如：s,i,b,font 等.html 其他规范 1:文 档 类 型 声 明 及 编 码:统 一 为 html5 声 明 类 型;编 码 统 一 为,书写时利用 IDE 实现层 次分明的缩进;2:非特殊情况下样式文件必须外链至:之间;非特殊情况下 JavaScript 文件必须外链至页面底部;3:引入样式文件或 JavaScript 文件时,须略去默认类型声明,写法如下:Example Source Code www:52css:com :4:引入 JS 库文件,文件名须包含库名称及版本号及是否为压缩版,比如 jquery-1:4:1:min:js;引入插件,文件名格式为库名称+插件名称,比 如 jQuery:cookie:js;5:所有编码均遵循 xhtml 标准,标签&属性&属性命名 必须由小写字母及下划线数字组成,且所有标签必须闭合,包括 br,hr等;属性值必须用双引号包括;6:充分利用无兼容性问题的 html 自身标签,比如 span,em,strong,optgroup,label,等等;需要为 html 元素添加自定义属性的时候,首先 要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用须以data-为前缀来添加自定义属性,避免使用data:等其他命名方式;7:语义化 html,如 标题根据重要性用 h*同一页面只能有一个 h1,段落标记用 p,列表用 ul,内联元素中不可嵌套块级元素;8:尽可能减少 div 嵌套,如 欢迎访问 XXX,您的用 户名是用户名完全可以用以下代码替代:欢迎 访问 XXX,您的用户名是用户名;9:com/,即须在 URL 地址后面加上/；10:在页面中尽量避免使用 style 属性,即 style=;11:必须为含有描述性表单元素input,textarea添加 label,如 Example Source Code www:52css:com 姓 名:须写成:姓 名:12:能以背景形式呈现的图片,尽量写入 css 样式中;13:重要图片必须加上 alt 属性;给重要的元素和截断的元素加上 title;14:给区块代码及重要功能比如循环加上注释,方便后台添加功能;15:特殊符号使用:尽可能使用代码替代:比如&空格&等等;16:书写页面过程中,请考虑向后扩展性;css 书写规范 1：元素尽量使用class选择器匹配,对于特殊功能可以考虑使用 ID 选择器.2：明确各选择器的优先级,作用范围.3：CSS 写完之后必须使用;号结尾,虽然浏览器支持不用分 号结尾,但是不建议这么做.4：除非编写 HTML5 页面,否则不允许使用 CSS3 伪类,如：:nth-child1等伪类,禁止使用.5：编写 CSS 样式时,不允许换行,样式必须一行写完,自动换行 除外.6：对于子元素样式采用链选择器进行选择,如：:btn-save div 7：元素选择器只能在定义全局 CSS 和子元素匹配时使用,其他地方禁止使用.8：请记住 IE 浏览器的 hack 方式,如下：IE6=_width:100px;IE7=*width:100px;IE8=width:100px9;IE8/9=width:100px0;IE9=width:100px90;9：:编码统一为 utf-8;10：css 属性书写顺序,建议遵循:布局定位属性-自身属性-文本属性-其他属性:此条可根据自身习惯书写,但尽量保证同类属 性写在一起:11：书写代码前,考虑并提高样式重复使用率;12：充分利用 html 自身属性及样式继承原理减少代码量,比如:Example Source Code www:52css:com 这儿是标题列表2010-09-15 定义 ul:list liposition:relative ul:list li spanposition:absolute;right:0 即可实现日期居右显示 13：样式表中中文字体名,请务必转码成 unicode 码,以避免编码错误时乱码;14：使用 table 标签时 尽量避免使用 table 标签,请不要用 width/height/cellspacing/cellpadding等 table 属性直接定义表现,应尽可能的利用 table 自身私有属性分离结构与表现,如 Example Source Code www:52css:com thead,tr,th,td,tbody,tfoot,colgroup,scope;cellspaing 及 cellpadding 的 css 控制方法:tableborder:0;margin:0;border-collapse:collapse;table th,table tdpadding:0;,base:css 文件中我会初始化表格样式 15：杜绝使用 兼容 ie8;Example Source Code www:52css:com _background:none;_filter:progid:DXImageTransform:Microsoft:AlphaImageLoader sizingMethod=crop,src=img/bg:png;16：避免兼容性属性的使用,比如 text-shadow|css3的相关属性;17：减少使用影响性能的属性,比如 position:absolute|float;18：必须为大区块样式添加注释,小区块适量注释;JavaScript 书写规范 1：JS 必须使用外部文件方式加载.2：JS 引入代码必须集中放置在之间,严禁在 标签外引入 JS,特殊情况除外.3：JS 变量命名请使用驼峰式命名法.4：JS 变量严禁使用不明觉厉的命名方法,如：var a;var b;5：每一个函数与事件监听都必须有注释,声明其作用,如果代码 过长,那么请对一个功能模块进行注释.6：JS 函数命名必须使用驼峰式命名.7：JS 函数严禁使用不明觉厉的命名方法,如：function a 8：JS 代码换行时,必须使用缩进.jQuery 部分 1：使用 jQuery 选择器如果是唯一的,请使用 ID 选择器.2：使用 class 选择器时,在 class 前加上标签名,如：$div:class正确$:class错误 3：尽量使用 ID 选择器代替 class 选择器.4：如果一个变量存放的是 jQuery 对象的话,那么请用$符号 开头,声明这是一个 jQuery 对象.5：避免使用 live 函数绑定事件,可以使用 bind 和 on 代替.6：把页面上可能会影响页面加载速度的代码绑定到$window:load 事件中,如动画,视觉特效等代码.图片规范 1:所有页面元素类图片均放入 img 文件夹,测试用图片放于 img/demoimg 文件夹;2:图片格式仅限于 gif|png|jpg;3:命名全部用小写英文字母|数字|_ 的组合,其中不得包含汉字|空格|特殊字符；尽量用易懂的词汇,便于团队其他成员理 解;另,命名分头尾两部分,用下划线隔开,比如 ad_left01:gif|btn_submit:gif;4:在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载时间;5:尽量避免使用半透明的 png 图片若使用,请参考 css 规范相关说明;注释规范 1:html 注释:注释格式,-只能在注释的始末位置,不可置入注释文字区域;2:css 注释:注释格式/*这儿是注释*/;3:JavaScript 注释,单行注释使用/这儿是单行注释,多行注释使用/*这儿有多行注释*/;开发及测试工具约定 建议使用 Aptana|Dw|Vim,亦可根据自己喜好选择,但须遵循如下原则:1:不可利用 IDE 的视图模式画代码;2:不可利用 IDE 生成相关功能代码,比如 Dw 内置的一些功能 js;3:编码必须格式化,比如缩进;建议测试顺序:FireFox-IE7-IE8-IE6-Opera-Chrome-Safari,建议安装 firebug及 测试工具:前期开发仅测试 FireFox&IE6&IE7&IE8,后期优化时加入 Opera&Chrome&Safari;IE Tab Plus 插件:其他规范 1:开发过程中严格按分工完成页面,以提高 css 复用率,避免重复开发;2:减小沉冗代码,书写所有人都可以看的懂的代码:简洁易懂是一种美德:为用户着想,为服务器.着想:
