很久沒有更新文章了没咙。。千劈。實在是比較忙啊祭刚。。墙牌。從本身一個iOS開發(fā)涡驮，現(xiàn)在要兼顧前端、產(chǎn)品喜滨、維護等捉捅，每天都有不同的事，雖然學(xué)到了很多虽风，但是頭發(fā)也是越來越少了棒口。。辜膝。陌凳。
今天一個搞前端的哥們問我，有沒有前端編碼規(guī)范内舟，他們公司的太亂了合敦，很尷尬，于是就把我這篇拿出來分享一下验游，這些也是總結(jié)了前輩們的經(jīng)驗教訓(xùn)充岛，和一些大公司的開發(fā)規(guī)范修改出來的保檐，我們公司三個前端（我是半吊子，不算）崔梗，用起來感覺還是非常不錯的夜只。
如果有什么問題請大家留言指正，我會不斷的修正蒜魄，爭取拿出來一份合格的前端編碼規(guī)范懈玻。
1.本規(guī)范為前端開發(fā)人員編碼遵守寸莫，方便閱讀和后續(xù)交接人員快速入手。如有不當(dāng)請及時向管理人員指出修改。
2.本規(guī)范會不斷修訂毅人，如有好的建議請聯(lián)系制定人員育特，評估合理后即做修改戏售；
----2016.12.24 王克
基本準則
符合web標(biāo)準, 語義化html, 結(jié)構(gòu)霸旗、樣式、表現(xiàn)行為分離, 兼容性優(yōu)良. 頁面性能方面, 代碼要求簡潔明了有序, 盡可能的減小服務(wù)器負載, 保證最快的解析速度.
通用規(guī)范
1.所有頁面按照統(tǒng)一的格式來寫秕脓；
2.對所有后臺請求的返回結(jié)果做判斷空處理（保證在后臺請求失敗的情況下柒瓣，瀏覽器控制臺不會報錯）；
3.所有功能模塊寫注釋吠架，詳見下面注釋規(guī)范芙贫；
4.處理邏輯一定要盡量簡化，抽取公共框架傍药，減少后期維護成本磺平；
5.tab鍵用兩個空格代替或用兩個空格縮進（務(wù)必）；
6.代碼行之間盡量不要有空行怔檩，重大邏輯轉(zhuǎn)折、語法意義轉(zhuǎn)折蓄诽，方法分割除外薛训，適當(dāng)空行增強可讀性；
7.可使用 W3C HTML/CSS Validator 來驗證你的 HTML/CSS 代碼有效性;
文件仑氛、資源和目錄命名約定（適用于所有前端維護的內(nèi)容和相關(guān)目錄乙埃，(html, css, js, png, gif, jpg, ico)等）
1.字母一律小寫，必須是英文單詞或者漢語拼音锯岖，以英語單詞優(yōu)先介袜，多個單詞以連字符 - 連接。 只能出現(xiàn)小寫引文字母出吹，數(shù)字和連字符遇伞；
2.瀏覽器廣告攔截插件會將含有這些詞的作為廣告攔截： ad、ads捶牢、adv鸠珠、banner巍耗、sponsor、gg渐排、guangg炬太、guanggao等，頁面中盡量避免采用以上詞匯來命名驯耻；
3.文件命名總是以字母開頭而不是數(shù)字亲族，以特殊字符開頭命名的文件，一般都有特殊的含義與用處可缚，慎用霎迫。
4.需要對文件增加前后綴或特定的擴展名（比如 .min.js, .min.css），抑或一串前綴（比如 asdasd.main.min.css）城看。這種情況下女气，建議使用點分隔符來區(qū)分這些在文件名中帶有清晰意義的元數(shù)據(jù)。
HTML 規(guī)范
1.為每個HTML頁面的第一行添加標(biāo)準模式聲明（HTML5 doctype）测柠，確保在每個瀏覽器中擁有一致的展現(xiàn)炼鞠；
<!DOCTYPE html>
<html>
<head>
</head>
</html>
2.明確聲明字符編碼，確保瀏覽器快速判斷頁面內(nèi)容的渲染方式轰胁，約定一致采用UTF-8編碼谒主。
3.IE 兼容模式。除非特殊需求赃阀，否則約定設(shè)置為edge霎肯，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
4.元素屬性順序榛斯。
HTML 屬性統(tǒng)一使用雙引號观游，且應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性：
```
- class
- id 驮俗、 name
- data-*
- src懂缕、for、 type王凑、 href
- title搪柑、alt
- aria-*、 role
```
5.嵌套元素應(yīng)當(dāng)縮進一次索烹，即兩個空格工碾；
6.確保全部使用雙引號，不要使用單引號百姓；
7.不要省略可選的結(jié)束標(biāo)簽渊额，如：</li>,</body>，省略標(biāo)簽可能會導(dǎo)致一些問題;自閉合標(biāo)簽則無需閉合(如:img input br hr 等)。
8.腳本引用寫在 body 結(jié)束標(biāo)簽之前端圈；
9.盡量保證結(jié)構(gòu)焦读、表現(xiàn)、行為三者分離舱权，并盡量使三者之間沒有太多的交互和聯(lián)系矗晃。盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼宴倍，移入樣式表中张症；將所有動作行為，JS腳本之中鸵贬。
10.盡量不使用行內(nèi)樣式俗他；
<style>.no-good {}</style>;
11.在每一個塊狀元素，列表元素和表格元素后阔逼，加上一新空白行兆衅，并對其子孫元素進行縮進。內(nèi)聯(lián)元素寫在一行內(nèi)嗜浮，塊狀元素還有列表和表格要另起一行羡亩。
12.任何時候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度，盡量避免多余的父元素危融。
13.盡量避免通過 JavaScript 生成的標(biāo)簽畏铆，它讓內(nèi)容變得不易查找、編輯吉殃，并且降低性能辞居。
14.重要圖片一定要加上alt屬性; 給重要的元素和截斷的元素加上title;
- heade 模板
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<!-- 為搜索引擎提供搜索關(guān)鍵字 -->
<meta name="keywords" content="150字符以內(nèi)">
<!-- 為移動設(shè)備添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 圖標(biāo) -->
<link rel="apple-touch-icon-precomposed" href="/apple-icon.png">
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
css規(guī)范
為了便于閱讀，css屬性書寫要遵循本規(guī)范蛋勺。
1.為了保證一致性和可擴展性瓦灶，每個聲明應(yīng)該用分號結(jié)束，每個聲明換行抱完；
2.當(dāng)使用特定瀏覽器帶有前綴的屬性時贼陶，通過縮進的方式，讓每個屬性的值在垂直方向?qū)R乾蛤，這樣便于多行編輯每界。
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
3.屬性名的冒號后使用一個空格捅僵。出于一致性的原因家卖，
屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。
4.每個規(guī)則之間始終有一個空行分隔庙楚。
5屬性選擇器或?qū)傩灾涤秒p引號（””）上荡，而不是單引號（”）括起來。
URI值（url()）不要使用引號。
6.為了代碼的易讀性酪捡，在每個聲明塊的左花括號前添加一個空格叁征；右花括號要單獨成行。
7.不要在 rgb()逛薇、rgba()捺疼、hsl()、hsla() 或 rect() 值的內(nèi)部的逗號后面插入空格永罚。這樣利于從多個屬性值（既加逗號也加空格）中區(qū)分多個顏色值（只加逗號啤呼，不加空格）。
8.對于屬性值或顏色參數(shù)呢袱，省略小于 1 的小數(shù)前面的 0 （例如官扣，.5 代替 0.5；-.5px 代替 -0.5px）羞福。
9.與 <link> 標(biāo)簽相比惕蹄，@import 指令要慢很多，不光增加了額外的請求次數(shù)治专，還會導(dǎo)致不可預(yù)料的問題卖陵。所以要盡量使用<link>標(biāo)簽引入樣式；
css屬性順序
1.結(jié)構(gòu)性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
2.表現(xiàn)性屬性：
background, border etc.
font, text
例子:
.header {
/* 顯示屬性 */
display || visibility
list-style
position
top || right || bottom || left
z-index
clear
float
/* 自身屬性 */
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本屬性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
}
JavaScript規(guī)范
1.文件命名可讀性強看靠。文件夾赶促、文件的命名與命名空間應(yīng)能代表代碼功能，增強可讀性挟炬。
2.函數(shù)命名按照駝峰命名法鸥滨。
function funName() {}
3.常量要全部大寫,變量駝峰命名：
var VARIABLENAME //常量
var variableName //變量
4.排版縮進采用統(tǒng)一的縮進方式排版代碼“妫縮進為2個空格婿滓。
If(condition1 || condition2) {
action1;
} else if (condition3 && condition4) {
action2;
} else if (condition5
&& condition6
&& condition7
&& condition8) {
action2;
} else {
default action;
}
5.關(guān)鍵詞、條件括弧后面使用空格粥喜；運算操作符號兩側(cè)使用空格凸主；語句分割符‘,’后面使用空格;
var name[空格]=[空格]value;
if[空格](a,[空格]b) {
}
6.左大括號"{"可以居行尾,右大括號"}"單獨占一行，居行首
if (a && b) {
}
- 句末必須使用分好結(jié)尾额湘；
var fn = function () {
};//這里沒有分號的話卿吐，腳本解析器會報錯！７婊嗡官！
(function () {
alert(1);
})();
8.if、while毯焕、for衍腥、do語句的執(zhí)行體總是用"{"和"}"括起來
- 總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量婆咸，這將對變量難以控制竹捉。如果沒有聲明，變量處于什么定義域就變得不清（可以是在 Document 或 Window 中尚骄，也可以很容易地進入本地定義域）块差；
- 變量聲明可以只用一個 var 關(guān)鍵字聲明，多個變量用逗號隔開倔丈；賦值盡量寫在變量聲明當(dāng)中憾儒。
- 使用 === 精確的比較操作符，避免在判斷的過程中乃沙，由 JavaScript 的強制類型轉(zhuǎn)換所造成的錯誤（比較的雙方必須是同一類型才會有效）起趾；
- 在用if作判斷的時候。下列表達式統(tǒng)統(tǒng)返回 false：false, 0, undefined, null, NaN, ''（空字符串）.
- 統(tǒng)一使用單引號(‘)警儒，不使用雙引號(“)。這在創(chuàng)建 HTML 字符串非常容易辨別蜀铲；
注釋規(guī)范
代碼注釋，永遠也不嫌多记劝，特別是在寫一些看似瑣碎的無關(guān)緊要的代碼時，由于記憶點不深刻厌丑，注釋就變得尤為重要了定欧。避免發(fā)生過一段時間回頭看自己的代碼不能立即明白作用；
1.文件注釋要標(biāo)明作者砍鸠、文件版本、創(chuàng)建/修改時間爷辱、重大版本修改記錄；
2.函數(shù)或者類等都要添加頭描述朦肘；
3.注釋的時候不止寫代碼都干了些什么饭弓，還要加上代碼為什么要這么寫，背后的考量是什么媒抠。當(dāng)然也可以加入所思考問題或是解決方案的鏈接地址。
4.代碼注釋中英文都可以夫嗓。
/**
* 簡述
* 功能詳細描述
*
* @param <String> arg1 參數(shù)1
* @param <Number> arg2 參數(shù)2冲秽，默認為0
* @return <Boolean> 看xxx是否成功
*/
function fooFunction (arg1, arg2) {
}
- 單行注釋,寫在代碼上面;多行注釋應(yīng)有描述；
/*
* 注釋操作說明
*/
for( var i = 0; i < 100; i++) {
}
4.為了便于CSS 閱讀锉桑， css 大模塊時間使用區(qū)塊分割標(biāo)記；
/****** 注釋描述 ********/
制定參考：
- 極客學(xué)院前端規(guī)范民轴；
- 淘寶團隊前端規(guī)范；
