1、WEB 前端代码规范规范目的为提高团队协作效率， 便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。基本准则符合 web 标准；语义化 html；结构、表现、行为分离；兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。文件规范1. Html，css，js，images 文件均归档至相应约定的目录中。WebRootbackStagecssimagesjs后 台 模 块frontStagecssimages
2、js前 台 模 块WEB-INF全 局 公 共 模 块2. html 文件命名：英文驼峰式命名，文件名.html。按实际模块需求命名。3. jsp 文件命名：英文驼峰式命名，文件名.jsp。按实际模块需求命名。4. css 文件命名：英文驼峰式命名，文件名.css。共用 base.css，首页 index.css，其他页面按实际模块需求命名。5. js 文件命名：英文驼峰式命名，文件名.js。共用 common.js，其他依实际模块需求命名。html 书写规范1. 文档类型声明及编码： 统一为 html5 的声明类型；编码统一为，书写时利用 IDE 实现层次分明的缩进。2. 非特殊情况下 cs
3、s 文件必须在.之间引入，选择 link 方式引入而非import 形式。3. 非特殊情况下 js 文件必须在页面底部引入。4. 引入样式文件或 JavaScript 文件时，须略去默认类型声明，写法如下：.5. 引入 JS 库文件，文件名须包含库名称及版本号及是否为压缩版，比如：jquery-1.4.1.min.js；6. 引入插件，文件名格式为库名称+插件名称，比如：jQuery.cookie.js。7. 所有 HTML 标签嵌套必须是正确的，禁止出现多出或者少出闭合标签的情况。8. 所有编码均遵循 xhtml 标准，标签、属性、属性命名必须由小写字母及下划线数字组成，且所有标签必须闭合，
4、包括 br()，hr()等；属性值必须用双引号包括。9. 充分利用无兼容性问题的 html 自身标签，比如 span、em、strong、optgroup、label10. 需要为 html 元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去设置，如果没有，须以“data-“为前缀来添加自定义属性，避免使用“data：“等其他命名方式。11. 语义化 html，如标题根据重要性用 h1-h6(同一页面只能有一个 h1)，段落标记用 p，列表用 ul，内联元素中不可嵌套块状元素。12. 尽可能减少 div 的嵌套层数。13. 在页面中尽量避免使用内嵌样式表，即在标签内使用 sty
5、le=“。14. 以背景形式呈现的图片，尽量写入 css 样式中；重要图片必须加上 alt 属性；15. 特殊符号使用：尽可能使用代码替代：比如()、空格()、)、”（）等等；16. 尽量避免使用过度复杂的 HTML 结构。css 书写规范1. 编码统一为 utf-8。2. 为了避免一些浏览器兼容性问题以及增加样式重用性，每个页面必须引入 base.css（详见附件一），此文件不可随意修改。3. class 与 id 的使用：id 是唯一的并是父级的，class 是可以重复的并是子级的，所以 id仅使用在大的模块上，class 可用在重复使用率高及子级中。4. 为 JavaScript 预留钩
6、子的命名，请以 js_起始，比如：js_hide，js_show。5. class 与 id 命名：使用英文命名，命名要语义化，简明化，但不要使用诸如 first，last 之类的命名。 使用驼峰式和下划线分隔相结合的命名规则，即命名应以父级加子级的命名规范，如：父级的类为 simple 子级的类应该为 simple_first，以此类推，但是尽量避免出现超过四级的类命名。6. css 属性书写顺序，建议遵循：自身属性布局定位属性文本属性其他属性。此条可根据自身习惯书写，但尽量保证同类属性写在一起。属性列举： 自身属性主要包括：width、height、margin、padding、borde
7、r、background；布局定位属性主要包括：display、list-style、position（相应的 top、right、bottom、left）、float、clear、visibility、overflow； 文本属性主要包括：color、font、text-decoration、text-align、vertical-align、white-space其他：content；7. 书写代码前，考虑并提高样式重复使用率。8. 充分利用 html 自身属性及样式继承原理减少代码量。9. 样式表中中文字体名，请务必转码成 unicode 码，以避免编码错误时乱码。10. 背景图片请尽可
8、能使用 sprite 技术，减小 http 请求，考虑到多人协作开发，sprite 按模块制作。11. 使用 table 标签时(尽量避免使用 table 标签)，请不要用 width、height、cellspacing、cellpadding 等 table 属性直接定义表现，应尽可能的利用 table 自身私有属性分离结构与表现，如：thead、tr、th、td、tbody、tfoot、colgroup、scope。12. 用 png 图片做图片时，要求图片格式为 png-8 格式，若 png-8 实在影响图片质量或其中有半透明效果，请为 ie6 单独定义背景：_background：n
9、one；_filter：progid：DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop，src=img/bg.png)；13. 避免兼容性属性的使用，比如 text-shadow、css3 的相关属性；14. 减少使用影响性能的属性，比如 position：absolute、float；15. 代码缩进与格式：开发阶段单行书写，系统交付时可再将所有 css 进行压缩；使用 Tab键进行缩进，每层缩进一个 Tab 键16. 背景重复，确保使用的图片在与迭代方向相同的长度要大于 1 像素而小于 10 像素。简单点说，就是 x
10、 轴迭代，宽度要在 1 和 10 之间，y 轴迭代，长度要在 1 和 10 之间。JavaScript 书写规范1. 文件编码统一为 utf-8，书写过程过，每条语句必须以分号结束。2. 变量命名：驼峰式命名。首字母须小写，如：iTaoLun。3. 类命名：驼峰式命名。首字母大写，如：ITaoLun。4. 函数命名：驼峰式命名。首字母小写。如：iTaoLun()。5. 构造函数命名：全部大写。6. 命名语义化，尽可能利用英文单词或其缩写。7. 尽量避免使用存在兼容性及消耗资源的方法或属性，比如 eval()、innerText。8. 后期优化中，JavaScript 非注释类中文字符须转换成
11、unicode 编码使用，以避免编码错误时乱码显示。9. 代码结构明了，加适量注释。提高函数重用率。10. 注重与 html 分离，减小 reflow，注重性能。11. 减少 DOM 访问次数。方法是将得到的元素用变量存储起来。12. 减少 DOM 事件绑定。13. 将自己写的 JS 用匿名函数包起来，避免变量冲突。(function()()图片规范1. 所有页面元素类图片均放入 images 文件夹，测试用图片放于 images/demo 文件夹；2. 图片格式仅限于 gif、png、jpg；3. 命名全部用小写英文字母、数字、_的组合，其中不得包含汉字、空格、特殊字符；尽量用易懂的词汇。4
12、. 在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间。5. 尽量避免使用半透明的 png 图片。6. 运用 csssprite 技术集中小的背景图或图标，减小页面 http 请求，但注意，请务必在对应的 psd 源图中划参考线，并保存至 images 目录下。注释规范1. html 注释：注释格式，-只能在注释的始末位置，不可置入注释文字区域；2. css 注释：注释格式/*注释*/；3. JavaScript 注释，单行注释使用/单行注释，多行注释使用/*多行注释*/。语言组织类1. 新增，而非“添加，增加”之类的词语2. 编辑，而非“修改，更新”之类的词语3. 保存，而非
13、“提交”之类的词语4. 所有操作除了保存表单外，保存用户操作统一使用“确定”词语开发及测试工具约定建议使用 Myeclipse、eclipse、Aptana，亦可根据自己喜好选择，但须遵循如下原则：1. 不可利用 IDE 的视图模式“画”代码。2. 不可利用 IDE 生成相关功能代码，比如 Dw 内置的一些功能 js；3. 编码必须格式化，比如缩进；4. 测试工具：前期开发仅测试 FireFox、IE6、IE7、IE8、IE9，后期优化时加入 Opera、Chrome、Safari；5. 建议测试顺序：FireFoxIE9IE8IE7IE6OperaChromeSafari，必须安装 fire
14、bug 插件。base.css/*CSS reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tdmargin:0;padding:0;tableborder-collapse:collapse;border-spacing:0;fieldset,imgborder:0;address,caption,cite,code,dfn,em,strong,th,varfont-style:normal;font-weight:normal;ol,ull
15、ist-style:none;caption,thtext-align:left;h1,h2,h3,h4,h5,h6font-size:100%;font-weight:normal;q:before,q:aftercontent:;abbr,acronymborder:0;atext-decoration:none;cursor:pointer;a:hover,a:focustext-decoration:underline; body,button,input,select,textarea,a/* for ie */font:12px/1.5tahoma,arial,5b8b4f53,s
16、ans-serif;button,input,select,textareafont-size:100%;/*文字排版*/.f12font-size:12px;.f13font-size:13px;.f14font-size:14px;.f16font-size:16px;.f20font-size:20px;.fbfont-weight:bold;.fnfont-weight:normal;.t2text-indent:2em;.lh150line-height:150%;.lh180line-height:180%;.lh200line-height:200%;.unltext-decor
17、ation:underline;.no_unltext-decoration:none;/*定位*/.tltext-align:left;.tctext-align:center;.trtext-align:right;.bcmargin-left:auto;margin-right:auto;.flfloat:left;display:inline;.frfloat:right;display:inline;.cbclear:both;.clclear:left;.crclear:right;.clearclear:both;display:block;overflow:hidden;vis
18、ibility:hidden;width:0;height:0;.clearfix:aftercontent:“.“;display:block;height:0;clear:both;visibility:hidden;.clearfixdisplay:inline-block* html .clearfixheight:1%.clearfixdisplay:block;.vmvertical-align:middle;.prposition:relative;.paposition:absolute;.abs-rightposition:absolute;right:0;.zoomzoom
19、:1;.hiddenvisibility:hidden;.nonedisplay:none;/*长度高度*/.w10width:10px;.w20width:20px;.w30width:30px;.w40width:40px;.w50width:50px;.w60width:60px;.w70width:70px;.w80width:80px;.w90width:90px;.w100width:100px;.w200width:200px;.w250width:250px;.w300width:300px;.w400width:400px;.w500width:500px;.w600widt
20、h:600px;.w700width:700px;.w800width:800px;.wwidth:100%;.h50height:50px;.h80height:80px;.h100height:100px;.h200height:200px;.hheight:100%;/*边距*/.m10margin:10px;.m15margin:15px;.m30margin:30px;.mt5margin-top:5px;.mt10margin-top:10px;.mt15margin-top:15px;.mt20margin-top:20px;.mt30margin-top:30px;.mt50m
21、argin-top:50px;.mt100margin-top:100px;.mb10margin-bottom:10px;.mb15margin-bottom:15px;.mb20margin-bottom:20px;.mb30margin-bottom:30px;.mb50margin-bottom:50px;.mb100margin-bottom:100px;.ml5margin-left:5px;.ml10margin-left:10px;.ml15margin-left:15px;.ml20margin-left:20px;.ml30margin-left:30px;.ml50mar
22、gin-left:50px;.ml100margin-left:100px;.mr5margin-right:5px;.mr10margin-right:10px;.mr15margin-right:15px;.mr20margin-right:20px;.mr30margin-right:30px;.mr50margin-right:50px;.mr100margin-right:100px;.p10padding:10px;.p15padding:15px;.p30padding:30px;.pt5padding-top:5px;.pt10padding-top:10px;.pt15pad
23、ding-top:15px;.pt20padding-top:20px;.pt30padding-top:30px;.pt50padding-top:50px;.pb5padding-bottom:5px;.pb10padding-bottom:10px;.pb15padding-bottom:15px;.pb20padding-bottom:20px;.pb30padding-bottom:30px;.pb50padding-bottom:50px;.pb100padding-bottom:100px;.pl5padding-left:5px;.pl10padding-left:10px;.pl15padding-left:15px;.pl20padding-left:20px;.pl30padding-left:30px;.pl50padding-left:50px;.pl100padding-left:100px;.pr5padding-right:5px;.pr10padding-right:10px;.pr15padding-right:15px;.pr20padding-right:20px;.pr30padding-right:30px;.pr50padding-right:50px;.pr100padding-right:100px;
