WEB前端开发规范文档(20200907152948).pdfVIP

WEB 前端开发规范文档 目录 WEB 前端开发规范文档 1 规范目的 2 基本准则 2 文件规范 2 html 书写规范 3 html 其他规范 3 css 书写规范 4 JavaScript 书写规范 5 jQuery 部分 6 开发及测试工具约定 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