WEB编码事项
标准
WEB开发标准是一系列标准的集合， 包含HTML结构标准、CSS表现标准、JS行为标准、代码标准、标准测试。
目标
WEB开发流程统一标准化，实现页面结构、表现、行为适当分离，提高页面易维护性，易拓展性。
遵循
- 结构标准：HTML5
- 表现标准：CSS2、CSS3（渐进增强）
- 行为标准：ECMAScript 262
- 代码标准：HTML编码规范、CSS编码规范、JS编码规范
- 标准测试：html validator、csslint、jshint
HTML编码规范
1. 使用标准文档DTD
<!DOCTYPE html>
2. 结构、样式、行为分离
- 内嵌样式移入到相应的样式文件中
- 内嵌脚本移入到相应的脚本文件中
- 除非需要动态修改元素样式，否则尽量别写内联样式
- 除非使用<a href="javascript:void();" ，否则尽量别写内联事件
- 样式文件使用link标签在head头部引入
- 脚本文件使用script标签在body结束标签前引入
3. 标签
- 标签名、属性名小写
- 属性值双引号括起来
- style、link的type属性没必要指定，默认为text/css
- script的type属性没必要指定，默认为text/javascript
- 空标签无自关闭斜线无结束标签，其它标签务必包含开始、结束标签
空标签： area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
4. 缩进、换行
- 子元素相对于父元素缩进4个空格
- 块元素、列表元素、表格元素放在新行
5. 注释
按模块添加注释，解释清楚是什么。
<!--XX模块 START, 我是什么--> <div class="module"> .... </div> <!--XX模块 END -->
6. 代码有效性
使用html validator工具，检查代码。
CSS编码规范
1. id、class命名
- 名字小写
- 以破折号“-”进行分隔： .module-title
2. 样式属性、属性值
缩进四个空格， 尽量使用缩写
/* Don't */ .demo { margin-top: 2px; margin-right: 3px; margin-bottom: 4px; margin-left: 0; } /* Better */ .demo { margin: 2px 3px 4px 0; }
属性名后紧跟“：”
属性值前有一空格，后面以“；”结束
属性值为0，不加单位
十六进制颜色值，尽量使用三个字符 #fff, 非#ffffff
url()中不使用引号
.demo { backgound-image: url(/your/path/img); }
3. 样式顺序
定位相关，盒模型相关，其它
.demo { position: absolute; top: 0; left: 0; width: 50px; height: 50px; border: 1px solid #ddd; color: #fff; }
4. 选择器
尽量不使用!important，权重最高
尽量不使用id选择器，权重比较高
尽量不使用元素标签名、id、class进行组合
/* Don't */ #header.title { ... } /* Better */ .title { ... }
样式针对多个选择器，每个选择器占一行
.btn, .txt, .hover { .... }
5. Better CSS Hack
利用IE条件注释，在html标签的class里标识ie版本，但是尽量避免使用，且请新建一个hack.css专属文件存放hack样式。
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if IE 9]> <html class="ie9"> <![endif]--> <!--[if !IE]><!--><html> <!--<![endif]-->
.ie9 .demo{ ... } .ie8 .demo{ ... } .ie7 .demo{ ... } .ie6 .demo{ ... }
6. Not Recommand CSS Hack
下面hack方法前提是浏览器标准模式
- “_″ 下划线是IE6专有的hack
- “+″ 下划线是IE6/IE7 生效
- “\9″ IE6/IE7/IE8/IE9/IE10 生效
- “\0″ IE8/IE9/IE10/Opera 生效
- “\9\0″ IE9/IE10 生效
这些hack方法，一般直接在原样式中混合使用，大量的hack方法，势必会造成css代码混乱，维护起来困难。
7. 注释
按模块编写注释，解释清楚做了什么
/*XX模块 START， 我做了什么*/ .module { ... } .module .title { ... } .module .content { ... } /*XX模块 END*/
8. 代码有效性
使用csslint工具，检查代码。
Javascript编码规范
1. 变量、函数
缩进四个空格
变量名、函数名使用驼峰式命名： subTitle
局部变量声明务必使用var
全局变量、枚举变量、常量全部大写，且注释注明
语句结束以“;”结尾
变量声明提前并集中
//我是做什么的 function createAudit(){ var startTime, endTime, auditType, timeSpace, progress = 0; ... }
2. 异常处理
做异常处理，界面出错，给予用户友好提示
try{ //Do something }catch(e){ //友好提示 }
3. eval()
只用于反序列化
4. 多行字符串
var myStr = 'blablablablablabla' +
'hlahlahlahlahlahlahla' +
'xlaxlaxlaxlaxlaxlaxla' +
'slaslaslaslaslaslasla';
5. 定义数组、对象
/*Don't*/ var arr = new Arr, obj = new Object; /*Better*/ var arr = [], obj = {};
6. 不修改内置对象方法、属性
不要尝试修改内置对象方法、属性，可以建立统一接口来维护公用函数。
/*Don't*/ String.prototype.newFunc = function(){ }
7. 字符串
使用单引号更好，html中使用双引号
8. 代码格式化
大括号
分号会被隐士插入到代码中，大括号和前面的代码放在同一行
if (boolean) { //... } else { //... }
数组、对象初始化
var arr = [ someVal, anotherVal, anotherVal, anotherVal, anotherVal //不要再这里加逗号，ie7，ie8会报错 ]; var obj = { someOpt: someVal, anotherOpt: anotherVal, anotherOpt: function () { } //不要再这里加逗号，ie7，ie8会报错 };
函数参数
尽可能将所有函数参数写在同一行，但为了保持可读性，一行超过80个字符可适当换行，甚至每个参数独立一行
very.very.very.very.lon.long.func = function ( someOpt, someOpt anotherOpt) { //.... } function foo (veryLongLongVariable, veryLongLongVariable) { //... } function foo ( veryLongLongLongLongVariable, veryLongLongLongLongVariable) { //... }
if条件，三元操作符
if (someLongLongLongVariable && anotherLongLongVariable) { //... } var y = a ? someLongLongVariable : anotherLongLongVariable;
9. 注释
全局变量、常量、函数添加注释
10. 代码有效性
使用jshint工具，检查代码。