前言：
不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作。下面列出了前端开发规范
通用规范：
1、前端工具统一sublime text，配置信息统一，如下：
{
"caret_style": "phase",
"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
"default_line_ending": "unix",
"ensure_newline_at_eof_on_save": true,
"findreplace_small": true,
"font_size": 12,
"ignored_packages":
[
"Vintage"
],
"line_padding_bottom": 4,
"line_padding_top": 4,
"show_panel_on_build": false,
"tab_size": 4,
"tabs_medium": true,
"trim_trailing_white_space_on_save": false
}
2、空格还是Tab？我们强制使用4个占位符的Tab缩进，如果遇到不是tab缩进的，可以借助sublime text来转换成tab缩进，步骤如下：
ctrl+shift+p 输入convert to Tabs，敲回车就可以
3、统一采用UTF8编码
4、项目发布必须压缩、图片优化，提高页面访问速度
5、文件命名统一使用小写字母，js文件多个字母用'-'连接，页面多个字母用'_'连接
6、js、css能够通用化、组件化
es5：
1、一行代码长度尽量保持80列左右
2、变量
声明变量必须加上var关键字，推荐一个var同时声明多个变量，或者一组有逻辑关系的变量，避免一个变量一个 var，声明Array和Object使用[]和{}，声明变量时将其初始化,更易读且性能更好。
变量不要使用关键字，对象key也不要使用关键字，在ie8下会报错
// bad
var obj = {
default: 1
};
3、命名
函数和变量命名使用驼峰式，命名尽量语义化，
// bad
var e = '',
l = 0;
// good
var element = '',
length = 0;
4、单例模式、模块化开发
5、命名空间
每个应该有自己的命名空间，并不会影响到其他模块
6、单双引号
强制使用单引号，性能好
7、语句结尾一定要加';'
8、JSON对象的最后一个字段、数组最后一个元素后面都不能加','，在IE8下会报错
9、尽量不要使用with/eval
10、对象延迟声明，对于页面初始化不需要的变量，延迟声明
11、所有语句都在声明变量之后
12、提前返回值，提升代码的性能
// bad
function fun(arg) {
var test;
if (arg) {
test = arg;
} else {
test = 'another'
}
return test;
}
// good
function fun(arg) {
if (arg) {
return arg;
} else {
return'another'
}
}
13、使用arg
var obj = {};
Object.keys({}).forEach(function(key) {
console.log(this); //obj
}, obj);
可以使用arg的Array.prototype.every、 Array.prototype.forEach、 Array.prototype.some、 Array.prototype.map、 Array.prototype.filter
14、this
15、条件优化
// bad
if(a !== "") {
}
// good
if(!a) {
}
16、规范定义JSON对象，补全双引号
// bad
var json = {
a: 1
};
// good
var json = {
"a":1
};
17、函数返回值应尽量明确
// bad
function fun() {
return ;
}
// good
function fun() {
return false;
}
18、减少js对dom操作次数
19、对于if/else等后面的语句即使只有一行代码也要在该行代码的首尾加上'{}'。对于switch语句要给出default:情况的处理逻辑
20、字符串拼接在少量(次数为个位数)的情况下可以使用'+', 大量的时候使用数组 join(), 或者尽可能采用模板引擎渲染
21、for循环遍历提前计算数组长度
22、变量类型转换
字符转数字：+'0' 1*'0' toString()
数字转字符：''+0 parseInt() parseFloat()
数字取整：Math.ceil() Math.floor() Math.round()
字符转布尔：!!'0'
23、变量比较使用===，除（==null）之外
24、私有属性、变量和方法名应该以下划线'_'开头
25、异常处理
try{} catch(e){}
26、false
"", 0, null, undefined, NaN, void 0
27、true
"''", '""', '0', 'null', 'undefined', {}, []
28、跨行语句以操作符结尾
var x = a ?
b :
c;
29、函数句柄命名是名词
30、注释
采用jsdoc方式注释，函数注释用/**/，函数内注释用//
禁止使用行末注释
css：
1、命名空间
wei- 组件的命名空间（取weiUI首）
pg- 页面的命名空间（取page）
2、class 命名遵循关注分离（不要考虑html结构，比如子元素选择器）、松耦合的原则，同时注重易于理解
3、模块化编写，语义化的模块名
4、命名规则
4.1、BEM命名法，.a > .a-b > .a-b-c
4.2、所有名称小写，符合w3c规范
4.3、类名和id，多个变量之间用中划线分割，{命名空间}-{模块名}-{状态描述}
4.4、所有变量只能使用名词
4.5、id、class命名语义化，不要使用 red、left 等表象的词命名，常见例子
容器： wed-container
列表： wed-list we-list-item
内容： wed-content
注意：class用来定义样式，如果javascript里用到放在最后顺序，id用来写交互，不需要特殊声明（J_ 废除）
5、为了实现代码复用，减少重复冗余，难免要把代码拆分在不同的 class 下面。我们要寻找一个平衡点，避免过细的拆分，减少不必要的 class
6、不建议过度嵌套选择符（semantic躺枪），选择符嵌套在必要的情况下一般不超过三层；选择符叠加一般不多于两个
7、css3不用加前缀，统一用autoprefixer生成，规则：
[
'ie >= 7',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 2.3',
'bb >= 10'
]
8、色值全部使用6位数
html：
1、语义化标签，webapp尽量多使用html5
<body>
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside>
</aside>
<footer></footer>
</body>
2、禁止使用非法标签属性
3、后台交互
data-api 接口
data-url 跳转链接
最多支持二级，比如
关注：data-api-follow
取消关注：data-api-unfollow
4、标签扁平化，禁止不必要的嵌套
5、标签属性，属性值使用中划线或者驼峰式，禁止使用下划线
6、html嵌套规则
6.1块级元素与块级元素平级、内嵌元素与内嵌元素平级
6.2块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素
6.3有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素
6.4块级元素不能放在标签p里面
6.5li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器
