很久沒有更新文章了。。。實在是比較忙啊。。。從本身一個iOS開發，現在要兼顧前端、產品、維護等，每天都有不同的事，雖然學到了很多，但是頭發也是越來越少了。。。。
今天一個搞前端的哥們問我，有沒有前端編碼規范，他們公司的太亂了，很尷尬，于是就把我這篇拿出來分享一下，這些也是總結了前輩們的經驗教訓，和一些大公司的開發規范修改出來的，我們公司三個前端（我是半吊子，不算），用起來感覺還是非常不錯的。
如果有什么問題請大家留言指正，我會不斷的修正，爭取拿出來一份合格的前端編碼規范。
1.本規范為前端開發人員編碼遵守，方便閱讀和后續交接人員快速入手。如有不當請及時向管理人員指出修改。
2.本規范會不斷修訂，如有好的建議請聯系制定人員，評估合理后即做修改；
----2016.12.24 王克
基本準則
符合web標準, 語義化html, 結構、樣式、表現行為分離, 兼容性優良. 頁面性能方面, 代碼要求簡潔明了有序, 盡可能的減小服務器負載, 保證最快的解析速度.
通用規范
1.所有頁面按照統一的格式來寫；
2.對所有后臺請求的返回結果做判斷空處理（保證在后臺請求失敗的情況下，瀏覽器控制臺不會報錯）；
3.所有功能模塊寫注釋，詳見下面注釋規范；
4.處理邏輯一定要盡量簡化，抽取公共框架，減少后期維護成本；
5.tab鍵用兩個空格代替或用兩個空格縮進（務必）；
6.代碼行之間盡量不要有空行，重大邏輯轉折、語法意義轉折，方法分割除外，適當空行增強可讀性；
7.可使用 W3C HTML/CSS Validator 來驗證你的 HTML/CSS 代碼有效性;
文件、資源和目錄命名約定（適用于所有前端維護的內容和相關目錄，(html, css, js, png, gif, jpg, ico)等）
1.字母一律小寫，必須是英文單詞或者漢語拼音，以英語單詞優先，多個單詞以連字符 - 連接。 只能出現小寫引文字母，數字和連字符；
2.瀏覽器廣告攔截插件會將含有這些詞的作為廣告攔截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等，頁面中盡量避免采用以上詞匯來命名；
3.文件命名總是以字母開頭而不是數字，以特殊字符開頭命名的文件，一般都有特殊的含義與用處，慎用。
4.需要對文件增加前后綴或特定的擴展名（比如 .min.js, .min.css），抑或一串前綴（比如 asdasd.main.min.css）。這種情況下，建議使用點分隔符來區分這些在文件名中帶有清晰意義的元數據。
HTML 規范
1.為每個HTML頁面的第一行添加標準模式聲明（HTML5 doctype），確保在每個瀏覽器中擁有一致的展現；
<!DOCTYPE html>
<html>
<head>
</head>
</html>
2.明確聲明字符編碼，確保瀏覽器快速判斷頁面內容的渲染方式，約定一致采用UTF-8編碼。
3.IE 兼容模式。除非特殊需求，否則約定設置為edge，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
4.元素屬性順序。
HTML 屬性統一使用雙引號，且應當按照以下給出的順序依次排列，確保代碼的易讀性：
```
- class
- id 、 name
- data-*
- src、for、 type、 href
- title、alt
- aria-*、 role
```
5.嵌套元素應當縮進一次，即兩個空格；
6.確保全部使用雙引號，不要使用單引號；
7.不要省略可選的結束標簽，如：</li>,</body>，省略標簽可能會導致一些問題;自閉合標簽則無需閉合(如:img input br hr 等)。
8.腳本引用寫在 body 結束標簽之前；
9.盡量保證結構、表現、行為三者分離，并盡量使三者之間沒有太多的交互和聯系。盡量在文檔和模板中只包含結構性的 HTML；而將所有表現代碼，移入樣式表中；將所有動作行為，JS腳本之中。
10.盡量不使用行內樣式；
<style>.no-good {}</style>;
11.在每一個塊狀元素，列表元素和表格元素后，加上一新空白行，并對其子孫元素進行縮進。內聯元素寫在一行內，塊狀元素還有列表和表格要另起一行。
12.任何時候都要盡量使用最少的標簽并保持最小的復雜度，盡量避免多余的父元素。
13.盡量避免通過 JavaScript 生成的標簽，它讓內容變得不易查找、編輯，并且降低性能。
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>
<!-- 為搜索引擎提供搜索關鍵字 -->
<meta name="keywords" content="150字符以內">
<!-- 為移動設備添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 圖標 -->
<link rel="apple-touch-icon-precomposed" href="/apple-icon.png">
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
css規范
為了便于閱讀，css屬性書寫要遵循本規范。
1.為了保證一致性和可擴展性，每個聲明應該用分號結束，每個聲明換行；
2.當使用特定瀏覽器帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
3.屬性名的冒號后使用一個空格。出于一致性的原因，
屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。
4.每個規則之間始終有一個空行分隔。
5屬性選擇器或屬性值用雙引號（””），而不是單引號（”）括起來。
URI值（url()）不要使用引號。
6.為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格；右花括號要單獨成行。
7.不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號后面插入空格。這樣利于從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。
8.對于屬性值或顏色參數，省略小于 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
9.與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。所以要盡量使用<link>標簽引入樣式；
css屬性順序
1.結構性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
2.表現性屬性：
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規范
1.文件命名可讀性強。文件夾、文件的命名與命名空間應能代表代碼功能，增強可讀性。
2.函數命名按照駝峰命名法。
function funName() {}
3.常量要全部大寫,變量駝峰命名：
var VARIABLENAME //常量
var variableName //變量
4.排版縮進采用統一的縮進方式排版代碼。縮進為2個空格。
If(condition1 || condition2) {
action1;
} else if (condition3 && condition4) {
action2;
} else if (condition5
&& condition6
&& condition7
&& condition8) {
action2;
} else {
default action;
}
5.關鍵詞、條件括弧后面使用空格；運算操作符號兩側使用空格；語句分割符‘,’后面使用空格;
var name[空格]=[空格]value;
if[空格](a,[空格]b) {
}
6.左大括號"{"可以居行尾,右大括號"}"單獨占一行，居行首
if (a && b) {
}
- 句末必須使用分好結尾；
var fn = function () {
};//這里沒有分號的話，腳本解析器會報錯！！！
(function () {
alert(1);
})();
8.if、while、for、do語句的執行體總是用"{"和"}"括起來
- 總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量，這將對變量難以控制。如果沒有聲明，變量處于什么定義域就變得不清（可以是在 Document 或 Window 中，也可以很容易地進入本地定義域）；
- 變量聲明可以只用一個 var 關鍵字聲明，多個變量用逗號隔開；賦值盡量寫在變量聲明當中。
- 使用 === 精確的比較操作符，避免在判斷的過程中，由 JavaScript 的強制類型轉換所造成的錯誤（比較的雙方必須是同一類型才會有效）；
- 在用if作判斷的時候。下列表達式統統返回 false：false, 0, undefined, null, NaN, ''（空字符串）.
- 統一使用單引號(‘)，不使用雙引號(“)。這在創建 HTML 字符串非常容易辨別；
注釋規范
代碼注釋，永遠也不嫌多，特別是在寫一些看似瑣碎的無關緊要的代碼時，由于記憶點不深刻，注釋就變得尤為重要了。避免發生過一段時間回頭看自己的代碼不能立即明白作用；
1.文件注釋要標明作者、文件版本、創建/修改時間、重大版本修改記錄；
2.函數或者類等都要添加頭描述；
3.注釋的時候不止寫代碼都干了些什么，還要加上代碼為什么要這么寫，背后的考量是什么。當然也可以加入所思考問題或是解決方案的鏈接地址。
4.代碼注釋中英文都可以。
/**
* 簡述
* 功能詳細描述
*
* @param <String> arg1 參數1
* @param <Number> arg2 參數2，默認為0
* @return <Boolean> 看xxx是否成功
*/
function fooFunction (arg1, arg2) {
}
- 單行注釋,寫在代碼上面;多行注釋應有描述；
/*
* 注釋操作說明
*/
for( var i = 0; i < 100; i++) {
}
4.為了便于CSS 閱讀， css 大模塊時間使用區塊分割標記；
/****** 注釋描述 ********/
制定參考：
- 極客學院前端規范；
- 淘寶團隊前端規范；
