超详细的Web前端开发规范⽂档
[size=small][b]规范⽬的[/b]
为提⾼团队协作效率, 便于后台⼈员添加功能及前端后期优化维护, 输出⾼质量的⽂档, 特制订此⽂档. 本规范⽂档⼀经确认, 前端开发⼈员必须按本⽂档规范进⾏前台页⾯开发. 本⽂档如有不对或者不合适的地⽅请及时提出, 经讨论决定后⽅可更改.
[img]dl2.iteye/upload/attachment/0118/2008/a9e911f6-2612-3055-8692-f716887faa2d.jpg[/img]
[b]基本准则[/b]
符合web标准, 语义化html, 结构表现⾏为分离, 兼容性优良. 页⾯性能⽅⾯, 代码要求简洁明了有序, 尽可能的减⼩服务器负载, 保证最快的解析速度.
[b]⽂件规范[/b]
1. html, css, js, images⽂件均归档⾄<；系统开发规范>约定的⽬录中;
2. html⽂件命名: 英⽂命名, 后缀.htm. 同时将对应界⾯稿放于同⽬录中, 若界⾯稿命名为中⽂, 请重命名与html⽂件同名, 以⽅便后端添加功能时查对应页⾯;
3. css⽂件命名: 英⽂命名, 后缀.css. 共⽤base.css, ⾸页index.css, 其他页⾯依实际模块需求命名.;
4. Js⽂件命名: 英⽂命名, 后缀.js. 共⽤common.js, 其他依实际模块需求命名.
html书写规范
1. ⽂档类型声明及编码: 统⼀为html5声明类型; 编码统⼀为 , 书写时利⽤IDE实现层次分明的缩进;
2. ⾮特殊情况下样式⽂件必须外链⾄...之间;⾮特殊情况下JavaScript⽂件必须外链⾄页⾯底部;
3. 引⼊样式⽂件或JavaScript⽂件时, 须略去默认类型声明, 写法如下:
<script src="..."></script>
4. 引⼊JS库⽂件, ⽂件名须包含库名称及版本号及是否为压缩版, ⽐如jquery-1.4.1.min.js; 引⼊插件, ⽂件名格式为库名称+插件名称, ⽐如kie.js;
5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由⼩写字母及下划线数字组成, 且所有标签
必须闭合, 包括 br (), hr()等; 属性值必须⽤双引号包括;
6. 充分利⽤⽆兼容性问题的html⾃⾝标签, ⽐如span, em, strong, optgroup, label，等等; 需要为html元素添加⾃定义属性的时候, ⾸先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使⽤须以"data-"为前缀来添加⾃定义属性，避免使⽤"data:"等其他命名⽅式;
7. 语义化html, 如 标题根据重要性⽤h*(同⼀页⾯只能有⼀个h1), 段落标记⽤p, 列表⽤ul, 内联元素中不可嵌套块级元素;
8. 尽可能减少div嵌套, 如
欢迎访问XXX, 您的⽤户名是
⽤户名
完全可以⽤以下代码替代:
欢迎访问XXX, 您的⽤户名是⽤户名;
9. 书写链接地址时, 必须避免重定向，例如：href="itaolun/", 即须在URL地址后⾯加上“/”；
10. 在页⾯中尽量避免使⽤style属性，即;
11. 必须为含有描述性表单元素(input, textarea)添加label, 如
姓名:
须写成:
姓名:
12. 能以背景形式呈现的图⽚, 尽量写⼊css样式中;
13. 重要图⽚必须加上alt属性; 给重要的元素和截断的元素加上title;
14. 给区块代码及重要功能(⽐如循环)加上注释, ⽅便后台添加功能;
15. 特殊符号使⽤: 尽可能使⽤代码替代: ⽐如 <(<) & >(>) & 空格( ) & »(») 等等;
16. 书写页⾯过程中, 请考虑向后扩展性;
17. class & id 参见 css书写规范.
⼀位好的Web前端开发⼯程师在知识体系上既要有⼴度，⼜要有深度，所以很多⼤公司即使出⾼薪也很难招聘到理想的前端开发⼯程师。那么如何系统的学习企业实⽤的web前端技术呢，为此建⽴了⼀个web前端的直播上课学习扣扣裙，前⾯数字是五⼀四，中间的数字是⼀六七，最后是六七⼋，将数字连接起来就是了。真正想要学习的可以进⼊，打酱油的就不要浪费⼤家的时间了。现在说的重点不在于讲解技术，⽽是更侧重于对技巧的讲解。技术⾮⿊即⽩，只有对和错，⽽技巧则见仁见智。
[b]css书写规范[/b]
数字前端工程师和web前端
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元素,
按a命名法则:...,
样式写法: #mainnav .firstnav{.......}
按b命名法则:...,
样式写法: .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⾃⾝属性及样式继承原理减少代码量, ⽐如:
这⼉是标题列表2010-09- 15
定义
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. 杜绝使⽤ 兼容 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会统⼀处理;
[b]JavaScript书写规范[/b]
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, 注重性能.
[b]图⽚规范[/b]
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⽬录下
[b]注释规范[/b]
1. html注释: 注释格式 , '--'只能在注释的始末位置，不可置⼊注释⽂字区域;
2. css注释: 注释格式 ;
3. JavaScript注释, 单⾏注释使⽤'//这⼉是单⾏注释' ，多⾏注释使⽤ ;
[b]开发及测试⼯具约定[/b]
建议使⽤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插件.[/size]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。