前言：
不規(guī)范的開(kāi)發(fā)不僅使日后代碼維護(hù)變的困難，同時(shí)也不利于團(tuán)隊(duì)的合作胰默。下面列出了前端開(kāi)發(fā)規(guī)范
通用規(guī)范：
1场斑、前端工具統(tǒng)一sublime text漓踢，配置信息統(tǒng)一，如下：
{
"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喧半？我們強(qiáng)制使用4個(gè)占位符的Tab縮進(jìn)，如果遇到不是tab縮進(jìn)的青责，可以借助sublime text來(lái)轉(zhuǎn)換成tab縮進(jìn)挺据，步驟如下：
ctrl+shift+p 輸入convert to Tabs，敲回車(chē)就可以
3脖隶、統(tǒng)一采用UTF8編碼
4扁耐、項(xiàng)目發(fā)布必須壓縮、圖片優(yōu)化产阱，提高頁(yè)面訪(fǎng)問(wèn)速度
5做葵、文件命名統(tǒng)一使用小寫(xiě)字母，js文件多個(gè)字母用'-'連接心墅，頁(yè)面多個(gè)字母用'_'連接
6酿矢、js、css能夠通用化怎燥、組件化
es5：
1瘫筐、一行代碼長(zhǎng)度盡量保持80列左右
2、變量
聲明變量必須加上var關(guān)鍵字铐姚，推薦一個(gè)var同時(shí)聲明多個(gè)變量策肝，或者一組有邏輯關(guān)系的變量，避免一個(gè)變量一個(gè) var隐绵，聲明Array和Object使用[]和{}之众，聲明變量時(shí)將其初始化,更易讀且性能更好。
變量不要使用關(guān)鍵字依许，對(duì)象key也不要使用關(guān)鍵字棺禾，在ie8下會(huì)報(bào)錯(cuò)
// bad
var obj = {
default: 1
};
3、命名
函數(shù)和變量命名使用駝峰式峭跳，命名盡量語(yǔ)義化膘婶，
// bad
var e = '',
l = 0;
// good
var element = '',
length = 0;
4、單例模式蛀醉、模塊化開(kāi)發(fā)
5悬襟、命名空間
每個(gè)應(yīng)該有自己的命名空間，并不會(huì)影響到其他模塊
6拯刁、單雙引號(hào)
強(qiáng)制使用單引號(hào)脊岳，性能好
7、語(yǔ)句結(jié)尾一定要加';'
8、JSON對(duì)象的最后一個(gè)字段割捅、數(shù)組最后一個(gè)元素后面都不能加','奶躯，在IE8下會(huì)報(bào)錯(cuò)
9、盡量不要使用with/eval
10棺牧、對(duì)象延遲聲明巫糙，對(duì)于頁(yè)面初始化不需要的變量朗儒，延遲聲明
11颊乘、所有語(yǔ)句都在聲明變量之后
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规求、條件優(yōu)化
// bad
if(a !== "") {
}
// good
if(!a) {
}
16、規(guī)范定義JSON對(duì)象卵惦，補(bǔ)全雙引號(hào)
// bad
var json = {
a: 1
};
// good
var json = {
"a":1
};
17阻肿、函數(shù)返回值應(yīng)盡量明確
// bad
function fun() {
return ;
}
// good
function fun() {
return false;
}
18、減少js對(duì)dom操作次數(shù)
19沮尿、對(duì)于if/else等后面的語(yǔ)句即使只有一行代碼也要在該行代碼的首尾加上'{}'丛塌。對(duì)于switch語(yǔ)句要給出default:情況的處理邏輯
20、字符串拼接在少量(次數(shù)為個(gè)位數(shù))的情況下可以使用'+', 大量的時(shí)候使用數(shù)組 join(), 或者盡可能采用模板引擎渲染
21畜疾、for循環(huán)遍歷提前計(jì)算數(shù)組長(zhǎng)度
22赴邻、變量類(lèi)型轉(zhuǎn)換
字符轉(zhuǎn)數(shù)字：+'0' 1*'0' toString()
數(shù)字轉(zhuǎn)字符：''+0 parseInt() parseFloat()
數(shù)字取整：Math.ceil() Math.floor() Math.round()
字符轉(zhuǎn)布爾：!!'0'
23、變量比較使用===啡捶，除（==null）之外
24姥敛、私有屬性、變量和方法名應(yīng)該以下劃線(xiàn)'_'開(kāi)頭
25瞎暑、異常處理
try{} catch(e){}
26徒溪、false
"", 0, null, undefined, NaN, void 0
27、true
"''", '""', '0', 'null', 'undefined', {}, []
28金顿、跨行語(yǔ)句以操作符結(jié)尾
var x = a ?
b :
c;
29臊泌、函數(shù)句柄命名是名詞
30、注釋
采用jsdoc方式注釋?zhuān)瘮?shù)注釋用/**/揍拆，函數(shù)內(nèi)注釋用//
禁止使用行末注釋
css：
1渠概、命名空間
wei- 組件的命名空間（取weiUI首）
pg- 頁(yè)面的命名空間（取page）
2、class 命名遵循關(guān)注分離（不要考慮html結(jié)構(gòu)，比如子元素選擇器）播揪、松耦合的原則贮喧，同時(shí)注重易于理解
3、模塊化編寫(xiě)猪狈，語(yǔ)義化的模塊名
4箱沦、命名規(guī)則
4.1、BEM命名法雇庙，.a > .a-b > .a-b-c
4.2谓形、所有名稱(chēng)小寫(xiě)，符合w3c規(guī)范
4.3疆前、類(lèi)名和id寒跳，多個(gè)變量之間用中劃線(xiàn)分割啊奄，{命名空間}-{模塊名}-{狀態(tài)描述}
4.4拘领、所有變量只能使用名詞
4.5、id栓始、class命名語(yǔ)義化胸完，不要使用 red书释、left 等表象的詞命名，常見(jiàn)例子
容器： wed-container
列表： wed-list we-list-item
內(nèi)容： wed-content
注意：class用來(lái)定義樣式赊窥，如果javascript里用到放在最后順序爆惧，id用來(lái)寫(xiě)交互，不需要特殊聲明（J_ 廢除）
5誓琼、為了實(shí)現(xiàn)代碼復(fù)用检激，減少重復(fù)冗余，難免要把代碼拆分在不同的 class 下面腹侣。我們要尋找一個(gè)平衡點(diǎn)叔收，避免過(guò)細(xì)的拆分，減少不必要的 class
6傲隶、不建議過(guò)度嵌套選擇符（semantic躺槍?zhuān)┙嚷桑x擇符嵌套在必要的情況下一般不超過(guò)三層；選擇符疊加一般不多于兩個(gè)
7跺株、css3不用加前綴复濒，統(tǒng)一用autoprefixer生成，規(guī)則：
[
'ie >= 7',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 2.3',
'bb >= 10'
]
8乒省、色值全部使用6位數(shù)
html：
1巧颈、語(yǔ)義化標(biāo)簽，webapp盡量多使用html5
<body>
<header></header>
<nav></nav>
<article>
? ? ?<section></section>
</article>
<aside>
</aside>
<footer></footer>
</body>
2袖扛、禁止使用非法標(biāo)簽屬性
3砸泛、后臺(tái)交互
data-api 接口
data-url 跳轉(zhuǎn)鏈接
最多支持二級(jí)十籍，比如
關(guān)注：data-api-follow
取消關(guān)注：data-api-unfollow
4、標(biāo)簽扁平化唇礁，禁止不必要的嵌套
5勾栗、標(biāo)簽屬性，屬性值使用中劃線(xiàn)或者駝峰式盏筐，禁止使用下劃線(xiàn)
6围俘、html嵌套規(guī)則
? 6.1塊級(jí)元素與塊級(jí)元素平級(jí)、內(nèi)嵌元素與內(nèi)嵌元素平級(jí)
? 6.2塊元素可以包含內(nèi)聯(lián)元素或某些塊元素琢融，但內(nèi)聯(lián)元素不能包含塊元素界牡，它只能包含其它的內(nèi)聯(lián)元素
? 6.3有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素，不能再包含塊級(jí)元素
? 6.4塊級(jí)元素不能放在標(biāo)簽p里面
? 6.5li 標(biāo)簽可以包含 div 標(biāo)簽吏奸，因?yàn)閘i 和 div 標(biāo)簽都是裝載內(nèi)容的容器
