前端代碼規范
JavaScript代碼編寫規范
縮進
每一層級由4個空格組成，避免使用制表符（Tab）進行縮進。
行的長度
每行長度不應該超過80個字符，多於80個字符，應該在運算符后換行，下一行增加兩級縮進（8個字符）
doSomething(argument1,argument2,argument3,argument4,
atgument5);原始值
1、字符串應當始終使用雙引號且保持一行。
2、特殊值null在以下情況下可用：
（1）用來初始化一個可能被賦值為對象的變量時使用。
（2）用來和一個已經初始化的變量比較，這個變量有可能是對象。
（3）當函數的參數期望是對象時，，被用作參數傳入。
（4）當函數的返回值期望是對象時，被用作返回值傳入。
其余情況避免使用null
3、避免使用特殊值undefined。判斷一個變量是否定義應當使用typeof操作符。
運算符間距
二元運算符前后必須使用一個空格保持表達式整潔，操作符包括運算符和邏輯運算符。
//好的寫法
var found = (value[i] === item);
if(found && (count > 10)){
doSomething();
}
括號間距
使用括號時，緊接左括號之后和緊接右括號之前不應該有空格。
對象直接量
- 起始左花括號應當同表達式保持一行
- 每個屬性的名值對應當保持一個縮進，第一個屬性應當在左花括號后另起一行
- 每個屬性的名值對使用不含引號的屬性名，其后緊跟冒號（之前不含空格）
- 若屬性值是函數類型，函數體在屬性名之下另起一行，而且其前后均應保留一個空行
- 一組相關屬性前后可插入空行提升代碼的可讀性
-
結束的右花括號獨占一行
var object = { key1:value1, key2:value2, func:function() { //doSomething }, key3 = value3 };
當對象字面量作為函數參數時，若值是變量，起始花括號應當同函數名在同一行。
doSomething({
key1:value1,
key2:value2
});注釋
1.單行注釋
- 獨占一行的注釋，用來解釋下一行代碼
- 在代碼行的尾部的注釋，用來解釋它之前的代碼
- 多行，用來注釋掉一個代碼塊
代碼行尾單行注釋的情況，應該確保代碼結尾同注釋之間至少一個縮進
單行注釋之前要空格
if (condition) {
//如果代碼執行到這里，表明通過了安全檢查
allowed();
}行內注釋var result = something + somethingElse; // 行內注釋
2.多行注釋
每個多行注釋都至少包含如下三行
- 首行僅僅包括/*注釋開始，該行不應當有其他內容
- 接下來的行以*開頭並保持左對齊，這些行可以文字描述
- 最后一行以*/開頭並同先前行保持對齊，不應該有文字
注釋前空行，星號后空格
if (condition) {
/*
* 如果代碼執行到這里
* 說明通過了所有檢測
*/
allowed();
}變量聲明
- 變量定義放在函數開頭，使用var表達式每行一個變量
- 除首行，所有行都應該多一層縮進使變量名能夠垂直方向對齊
- 初始化的變量應當在未初始化變量之前
var count = 10,
name = "Nicoho",
found = false,
empty;函數聲明
- 函數名和開始圓括號之間不應該有空格
- 結束圓括號和右邊起始花括號應該有空格，右側花括號和函數關鍵字保持一行
- 參數名之間應當有在逗號之后保留一個空格
- 立即被調用的函數應當在調用的外層用圓括號包裹
function outer(arg1, arg2){
var count = arg1,
name = arg2,
found = false,
empty;
function inner(){
//代碼
}
//調用inner()的代碼
}命名
- 變量命名應當采用駝峰命名格式，首字母小寫，每個單詞首字母大寫，第一個單詞應當是一個名詞，不要在變量命名中使用下划線
- 函數命名也采用駝峰命名格式，首字母小寫，第一個單詞應當是動詞，和變量名進行區分
- 構造函數命名采用駝峰命名格式，首字母大寫，以非動詞開頭
- 常量的命名應當是所有字母大寫，不同字母之間用單個下划線隔開
- 對象的屬性和方法命名同變量和函數，私有屬性或者方法，在前面加一個下划線
賦值
給變量賦值時，如果右側是含有比較語句的表達式，需要用圓括號包裹
等號運算符
使用===（嚴格相等）和！==（嚴格不相等）替代相等（==）和不等（！=）來避免弱類型轉換錯誤
三元操作符
三元操作符應當僅僅用在條件賦值語句中，而不要作為if語句的替代品
var value = condition ？ value1 ： value2;語句
1、簡單語句
每行最多只包含一條語句，所有簡單的語句以分號（；）結束。
2、復合語句
- 括起來的語句應當比較復合語句多縮進一個層級
- 開始的大括號應當在復合語句所在行的末尾；結束的大括號獨占一行，且與符合語句開始保持同樣的縮進
- 若是if語句開始的關鍵字，其后緊跟一個空格，起始大括號在空格之后
if語句
if (condition) {
statements
}絕不允許在if語句中中省略花括號，單行語句同樣需要花括號
if (condition) {
statements
} else if (condition) {
statements
} else {
statements
}for語句
for語句的初始化部分不應該有變量聲明
var i,
len;
for (i=0, len=10; i < len; i++){
//代碼
}當使用for-in語句時，記得使用hasOwnProperty()進行雙重檢查來過濾出對象的成員.
switch語句
switch (value) {
case 1:
/*falls through*/
case 2:
doSomething();
break;
case 3:
return true;
default:
throw new Error ("This shouldn't happen");
}留白
1、兩行空行如下情況使用
- 在不同的源代碼文件之間
- 在類和接口定義之間
2、單行空行如下情況使用
- 方法之間
- 方法中局部變量和第一行語句之間
- 多行或者單行注釋之前
- 方法中邏輯代碼塊之間以提升代碼的可讀性
3、空格在如下情況下使用
- 關鍵字后跟括號的情況應當用空格隔開
- 參數列表中逗號之后應當保留一個空格
- 所有的除了點（.）之外的二元運算符，其操作數都應該用空格隔開。單目運算符的操作數之間不應該用空白隔開
- for語句中的表達式之間應當用空格隔開
HTML代碼編寫規范
HTML頭部文檔類型
建議使用 text/html 格式的 HTML。
避免使用XHTML，因為XHTML以及它的屬性，比如application/xhtml+xml在瀏覽器中的應用支持與優化空間都十分有限。<!DOCTYPE html>
HTML標簽的閉合
1、自閉合的標簽無需閉合，如：<input>、<img>、<br>、<meta>、<link>和<hr> 等
不推薦方式：<input type="text" name="antzone"/></input>
推薦的方式：<input type="text" name="antzone"/>
2、可選閉合標簽建議閉合，如：<body>、<li>
3、閉合標簽必須閉合
HTML頁面使用雙引號，標簽和標簽屬性統一使用小寫形式
縮進
縮進使用soft tab（4個空格），嵌套的節點應該縮進；
HTML標簽嵌套規則
1、HTML4/XHTML的嵌套規則
（1）內聯元素不能嵌套塊元素
（2）<p>元素和<h1>~<h6>元素不能嵌套塊元素
（3）ul,li/ol,li/dl,dt,dd擁有父子級關系的標簽；ul、ol下都只能跟li，dl下只能跟dt.dd
（4）a標簽不能嵌套a；
2、HTML5元素嵌套規則
元素的分類不再是塊元素或內聯元素這樣來分類（其實從來就沒有這樣分），而是按照如下分類來分：Flow（流式元素）、Heading（標題元素）、Sectioning（章節元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元數據元素）
使用語義化標簽，盡量少的使用毫無意義的標簽，僅僅用於設置樣式，語義化的HTML結構，有助於搜索引擎理解，另一方面多人協作時，能迅速了解開發者意圖
HTML多媒體回溯
頁面中的圖片、視頻和canvas 動畫等都要確保有替代的顯示內容。
圖片文件我們可采用有意義的備選文本（alt屬性規定），視頻和音頻文件我們可以為其加上說明文字或字幕。
例如：<img src="antozen.jpg" alt="網絡圖譜">
代碼格式規則
- 每一個塊狀元素，列表元素和表格元素后，加上一新空白行。
- 內聯元素寫在一行內，塊狀元素還有列表和表格要另起一行。
內容、表現和行為分離
盡量在文檔和模板中只包含結構性的HTML；而將所有表現代碼，移入樣式表中；將所有動作行為，移入腳本之中。
此外，為使得它們之間的聯系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。
主要規則如下:
（1）.頁面中盡量不要引入超過兩個樣式表，例如main.css和vendor.css。
（2）.頁面中保證只引入一個js文件（如果有多個文件，將它們合並壓縮后引入）。
（3）.不要使用內聯樣式和內部樣式。
（4）.不要使用表象元素，例如<b>, <u>, <center>, <font>和<b>等。
（5）.不使用元素中表象的屬性，例如align="center"。
結構的搭建
- 采用HTML5標准時開頭應該加上<!DOCTYPE html>
- 應在head標簽中引入CSS文件，這樣瀏覽器就可以在輸出HTML之前獲取CSS信息
- 在<body>標簽的末尾引入JavaScript文件，這樣可以在頁面顯示之后再編譯JavaScript文件，以加快頁面讀取速度，同時有助於JavaScript對頁面中的元素進行操作
對元素的操作應添加在JavaScript代碼中，而不要在HTML中添加，下面這個例子就是錯誤的，這樣后期難以維護
HTML布爾屬性值
HTML5規范中 disabled、checked、selected 等屬性不用設置值。
HTML代碼注釋
如果可能盡量不寫注釋，盡可能減少文檔的體積；如果必須要添加注釋，那么就要遵循如下規則:
（1）.詳盡注釋，解釋代碼解決問題、解決思路、是否為新鮮方案等。
（2）.模塊注釋，github建議不使用模塊結束注釋。
（3）.待辦注釋
如：<!-- TODO:待辦事項 -->
特別說明:注釋文本與兩端（--）之間要有一個空格。
網頁標簽語義化
如何判斷網頁標簽語義是否良好：去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性
語義化標簽注意的一些問題：
- 盡可能少的使用無語義標簽div和span
- 語義不明顯時，可用p也可用div的地方，盡量使用p，因為p默認有上下邊距，去除樣式后的可讀性更好，對兼容特殊終端有利
- 不要使用純樣式標簽，例如bfontu,改用CSS設置語義上強調的文本可以包在strong和em標簽里，strong的默認樣式是加粗，而em的默認樣式是斜體
部分標簽的語義：
div 主要用於布局，分割頁面的結構;
ul/ol 主要用於無序/有序列表;
dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力而且能輔助表單排版;
不推薦使用的標簽：
font 文字的外觀，大小和顏色;
u 文本下划線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;
屬性
1.HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
- class(首位)
- id 、 name
- data-*
- src、for、 type、 href
- title、alt
- aria-*、 role
2.id 和 class
- class 用於標識高度可復用組件，因此應該排在首位。id 用於標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。
- id一般用於網頁大致布局，比如標志、導航、主體內容、版權，規范命名為#logo , #nav, #content ,#copyright。
一般項目中class用於css中，id被js用來操作dom且不添加樣式，（jq操作class一般不加樣式）。
表單
每個input標簽對應的說明文本都需要使用label標簽，並且通過為input設置id屬性，在label標簽中設置“for = someId"來讓說明文本和相應的input關聯起來