WEB前的端开发规范文档.docxVIP

WEB前端开发规范文档目录WEB前端开发规范文档1规范目的2基本准则2文件规范2html书写规范2html其他规范3css书写规范4JavaScript书写规范5jQuery部分5开发及测试工具约定6其他规范6规范目的　为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发: 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改:基本准则1：　符合web标准, 语义化html,遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式。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：所有元素都必须小写，属性也是，如：input type=”text” id=”idName” /正确INPUT TYPE=”text” ID=”idName” /错误2： 元素必须成对出现，如span必须写成span/span特殊元素除外，如：br /hr /img /input /3：标签中不允许出现样式，必须用class来声明样式，如：input type=”text” id=”idName” style=”text-align:right;” /错误input type=”text” id=”idName” class=”class-name” /正确4：元素id命名必须是驼峰式命名如：input type=”text” id=”idName” /正确input type=”text” id=”idname” /错误input type=”text” id=”id-name” /错误5：元素class命名规范是：元素简写+”-”+功能名，如：button calss=”btn-save”/button正确button calss=”btnSave”/button错误button calss=”save”/button错误6：元素name命名必须遵循驼峰式命名法。input type=”text” name=”idName” /正确input type=”text” name=”idname” /错误input type=”text” name=”id-name” /错误7：元素属性必须有值：input type=”checkbox” checked=”checked” /正确8：元素属性必须用双引号，不允许使用单引号。input type=”checkbox” checked=”checked” /正确input type=’checkbox’ checked=’checked’ /错误9：如果元素需要自定义属性，请用data-xxx方式命名。10：严禁使用已在XHTML1:0中已移除的标签，如：s，i，b，font等html其他规范　1: 文档类型声明及编码: 统一为html5声明类型!DOCTYPE html; 编码统一为meta charset=UTF-8 /, 书写时利用IDE实现层 次分明的缩进;　2: 非特殊情况下样式文件必须外链至head:::/head之间;非特殊情况下JavaScript文件必须外链至页面底部;　3: 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下: Example Source Code [www:52css:com]link rel=stylesheet href=::: /style:::/stylescript src=:::/script　4: 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1:4:1:min:js; 引