文档介绍：WEB前端开发规范文档
目录
WEB前端开发规范文档 1
规范目的 2
基本准则 2
文件规范 2
html书写规范 2
html其他规范 3
css书写规范 4
JavaScript书写规范 5
jQuery部分 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: mon: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”