Web前端开发规范⽂档（新⼿必学）
规范⽬的 为提⾼团队协作效率, 便于后台⼈员添加功能及前端后期优化维护, 输出⾼质量的⽂档, 特制订此⽂档. 本规范⽂档⼀经确认, 前端开发⼈员必须按本⽂档规范进⾏前台页⾯开发. 本⽂档如有不对或者不合适的地⽅请及时提出, 经讨论决定后⽅可更改. 基本准则 符合web标准，语义化html, 结构表现⾏为分离, 兼容性优良. 页⾯性能⽅⾯, 代码要求简洁明了有序, 尽可能的减⼩服务器负载, 保证最快的解析速度. ⽂件规范 1. html, css, js, images⽂件均归档⾄<；系统开发规范>约定的⽬录中; 2. html⽂件命名: 英⽂命名, 后缀.htm. 同时将对应界⾯稿放于同⽬录中, 若界⾯稿命名为中⽂, 请重命名与html⽂件同名, 以⽅便后端添加功能时查对应页⾯; 3. css⽂件命名: 英⽂命名, 后缀.css. 共⽤base.css, ⾸页index.css, 其他页⾯依实际模块需求命名.; 4. Js⽂件命名: 英⽂命名, 后缀.js. 共⽤common.js, 其他依实际模块需求命名. html书写规范 1. ⽂档类型声明及编码: 统⼀为html5声明类型<!DOCTYPE html>; 编码统⼀为<meta charset="gbk" />, 书写时利⽤IDE实现层次分明的缩进; 2. ⾮特殊情况下样式⽂件必须外链⾄<head>...</head>之间;⾮特殊情况下JavaScript⽂件必须外链⾄页⾯底部; 3. 引⼊样式⽂件或JavaScript⽂件时, 须略去默认类型声明, 写法如下: <link rel="stylesheet" href="..." /> <style>...</style> <script src="..."> </script> 4. 引⼊JS库⽂件, ⽂件名须包含库名称及版本号及是否为压缩版, ⽐如jquery-1.4.1.min.js; 引⼊插件, ⽂件名格式为库名称+插件名称, ⽐如kie.js; 5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由⼩写字母及下划线数字组成, 且所有标签必须闭合, 包括 br (<br />), hr(<hr />)等; 属性值 必须⽤双引号包括; 6. 充分利⽤⽆兼容性问题的html⾃⾝标签, ⽐如span, em, strong, optgroup, label，等等; 需要为html元素添加⾃定义属性的时候, ⾸先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使⽤须以"data-"为前缀来添加⾃定义属性，避免使⽤"data:"等其他命名⽅式; 7. 语义化html, 如 标题根据重要性⽤h*(同⼀页⾯只能有⼀个h1), 段落标记⽤p, 列表⽤ul, 内联元素中不可嵌套块级元素; 8. 尽可能减少div嵌套, 如<div class="box"><div class="welcome">欢迎访问XXX，您的⽤户名是<div class="name">⽤户名</div></div></div>完全可以⽤以下代码替代: <div class="box"><p>欢迎访问XXX, 您的⽤户名是<span>⽤户名</span></p></div>; 9. 书写链接地址时, 必须避免重定向，例如：href="itaolun/", 即须在URL地址后⾯加上“/”； 10. 在页⾯中尽量避免使⽤style属性，即; 11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名:
摄像考勤机
<input type="text" id="name" name="name" /></p>须写成:<p><label for="name">姓名: </label><input type="text" id="name" /> </p> 12. 能以背景形式呈现的图⽚, 尽量写⼊css样式中; 13. 重要图⽚必须加上alt属性; 给重要的元素和截断的元素加上title; 14. 给区块代码及重要功能(⽐如循环)加上注释, ⽅便后台添加功能; 15. 特殊符号使⽤: 尽可能使⽤代码替代: ⽐如 <(<) & >(>) & 空格( ) & »(») 等等;的制备
16. 书写页⾯过程中, 请考虑向后扩展性; 17. class & id 参见 css书写规范. css书写规范 1. 编码统⼀为utf-8; 2. 协作开发及分⼯: i会根据各个模块, 同时根据页⾯相似程序, 事先写好⼤体框架⽂件, 分配给前端⼈员实现内部结构&表现&⾏为; 共⽤css⽂件base.css由i书写, 协作开发过程中, 每个页⾯请务必都
要引⼊, 此⽂件包含reset及头部底部样式, 此⽂件不可随意修改; 3. class与id的使⽤: id是唯⼀的并是⽗级的, class是可以重复的并是⼦级的, 所以id仅使⽤在⼤的模块上, class可⽤在重复使⽤率⾼及⼦级中; id原则上都是由我分发框架⽂件时命名的，为JavaScript预留钩⼦的除外; 4. 为JavaScript预留钩⼦的命名, 请以 js_ 起始, ⽐如: js_hide, js_show; 5. class与id命名: ⼤的框架命名⽐如header/footer/wrapper/left/right之类的在2中由i统⼀命名.其他样式名称由 ⼩写英⽂ & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使⽤中⽂拼⾳, 尽量使⽤简易的单词组合; 总之, 命名要语义化, 简明化. 6. 规避class与id命名(此条重要, 若有不明⽩请及时与i沟通): a） 通过从属写法规避, ⽰例见d; b）取⽗级元素id/class命名部分命名, ⽰例见d; c）重复使⽤率⾼的命名, 请以⾃⼰代号加下划线起始, ⽐如i_clear; d）a,b两条, 适⽤于在2中已建好框架的页⾯, 如, 要在2中已建好框架的页⾯代码<div
id="mainnav"></div>中加⼊新的div元素, 按a命名法则: <div id="mainnav"><div class="firstnav">...</div></div>, 样式写法:
#mainnav .firstnav{.......} 按b命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>, 样式写法:
.main_firstnav{.......} 7. css属性书写顺序, 建议遵循: 布局定位属性-->⾃⾝属性-->⽂本属性-->其他属
性. 此条可根据⾃⾝习惯书写, 但尽量保证同类属性写在⼀起. 属性列举: 布局定位属性主要包括: display & list-style & position（相应的 top,right,bottom,left） ＆ float & clear ＆ visibility ＆ overflow； ⾃⾝属性主要包括: width & height & margin & padding & border & background; ⽂本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 我所列出的这些属性只是最常⽤到的, 并不代表全部; 8. 书写代码前, 考虑并提⾼样式重复使⽤率; 9. 充分利⽤html⾃⾝属性及样式继承原理减少代码量, ⽐如: <ul
能量隔离class="list"><li>这⼉是标题列表<span>2010-09- 15</span></ul> 定义 ul.list li{position:relative} ul.list li span{position:absolute; right:0} 即可实现⽇期居右显⽰ 10. 样式表中中⽂字体名, 请务必转码成unicode码, 以避免编码错误时乱码; 11. 背景图⽚请尽可能使⽤sprite技术, 减⼩http请求, 考虑到多⼈协作开发, sprite按模块制作; 12. 使⽤table标签时(尽量避免使⽤table标签), 请不要⽤width/
height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利⽤table⾃⾝私有属性分离结构与表现 , 如
thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制⽅法:table{border:0;margin:0;border-灯光控制器
collapse:collapse;} table th, table td{padding:0;}, base.css⽂件中我会初始化表格样式) 13. 杜绝使⽤<
聚烯烃弹性体meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8; 14. ⽤png图⽚做图⽚时, 要求图⽚格式为png-8格式，若png-8实在影响图⽚质量或其中有半透明效果, 请为ie6单独定义背景: _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(sizingMethod=crop, src=’img/bg.png’); 15. 避免兼容性属性的使⽤, ⽐如text-shadow || css3的相关属性; 16. 减少使⽤影响性能的属性, ⽐如position:absolute || float ; 17. 必须为⼤区块样式添加注释, ⼩区块适量注释; 18. 代码缩进与格式: 建议单⾏书写, 可根据⾃⾝习惯, 后期优化i会统⼀处理; JavaScript书写规范 1. ⽂件编码统⼀为utf-8, 书写过程过, 每⾏代码结束必须有分号; 原则上所有功能均根据XXX项⽬需求原⽣开发, 以避免⽹上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...); 2. 库引⼊: 原则上仅引⼊jQuery 库, 若需引⼊第三⽅库, 须与团队其他⼈员讨论决定; 3. 变量命名: 驼峰式命名. 原⽣JavaScript变量要求是纯英⽂字母, ⾸字母须⼩写, 如iTaoLun; jQuery变量要求⾸字符为'_', 其他与原⽣JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量. 4. 类命名: ⾸字母⼤写, 驼峰式命名. 如 ITaoLun; 5. 函数命名: ⾸字母⼩写驼峰式命名. 如iTaoLun(); 6. 命名语义化, 尽可能利⽤英⽂单词或其缩写; 7. 尽量避免使⽤存在兼容性及消耗资源的⽅法或属性, ⽐如eval_r() & innerText; 8. 后期优化中, JavaScript⾮注释类中⽂字符须转换成unicode编码使⽤, 以避免编码错误时乱码显⽰; 9. 代码结构明了, 加适量注释. 提⾼函数重⽤率; 10. 注重与html分离, 减⼩reflow, 注重性能. 图⽚规范 1. 所有页⾯元素类图⽚均放⼊img⽂件夹, 测试⽤图⽚放于img/demoimg⽂件夹; 2. 图⽚格式仅限于gif || png || jpg; 3. 命
名全部⽤⼩写英⽂字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量⽤易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, ⽤下划线隔开, ⽐如ad_left01.gif || btn_submit.gif; 4. 在保证视觉效果的情况下选择最⼩的图⽚格式与图⽚质量, 以减少加载时间; 5. 尽量避免使⽤半透明的png图⽚(若使⽤, 请参考css规范相关说明); 6. 运⽤css sprite技术集中⼩的背景图或图标, 减⼩页⾯http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存⾄img⽬录下. 注释规范 1. html注释: 注释格式 <!--这⼉是注释-->, '--'只能在注释的始末位置，不可置⼊注释⽂字区域; 2. css注释: 注释格式 ; 3. JavaScript注释, 单⾏注释使⽤'//这⼉是单⾏注释' ，多⾏注释使⽤ ; 开发及测试⼯具约定 建议使⽤Aptana || Dw || Vim , 亦可根据⾃⼰喜好选择, 但须遵循如下原则: 1. 不可利⽤IDE的视图模式'画'代码; 2. 不可利⽤IDE⽣成相关功能代码, ⽐如Dw内置的⼀些功能js; 3. 编码必须格式化, ⽐如缩进; 测试⼯具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 ，后期优化时加⼊Opera & Chrome & Safari; 建议测试顺序: FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari, 建议安装firebug 及IE Tab Plus插件. 其他规范 1. 开发过程中严格按分⼯完成页⾯, 以提⾼css复⽤率, 避免重复开发; 2. 减⼩沉冗代码, 书写所有⼈都可以看的懂的代码. 简洁易懂是⼀种美德. 为⽤户着想, 为服务器着想. 扩展阅读 另外咱们W3Cfuns论坛的“精品书籍”板块内，还有⼀些⼤型互联⽹公司的“Web标准规范”，我在这⾥列出来⽅便⼤家学习下载： 另外，郑超同学给⼤家也上传了⼀份收集整理的⽐较全⾯的有关前端开发规范的电⼦书，⼤家可以下载下来看⼀看电子智能印章
