新手必看前端開發時所要注意和遵守的規範
摘要: 前端開發規範，讓所有人寫的程式碼都長得一樣。我們的目標是——看不出來哪行程式碼是自己寫的。
前端開發規範
HTML
1.使用軟Tab（2個空格）進行縮排
2.巢狀元素必須縮排一次
3.屬性的值使用雙引號（而不是單引號）
4.在空元素中不用使用反斜槓
5.使用HTML5文件宣告
6.語言屬性使用
<html lang="en-us">7.控制IE版本
<meta http-equiv="X-UA-Compatible" content="IE=Edge">8.style、script標籤無需指明type屬性
9.屬性使用順序：
* class
* id,name
* data-*
* 10.boolean屬性無需賦值：disabled checked selected
11.儘量減少巢狀層級
12.儘量使用語義化的標籤，而不是濫用div+class
CSS
1.使用軟Tab（2個空格）進行縮排
2.在組選擇符中，每個選擇符佔據單獨一行
3.在選擇符和大括號之間留出一個空格
4.選擇符大括號的結束括號在單獨一行
5.每一行樣式宣告在單獨一行
6.每一行樣式宣告以分號結尾（包括最後一行）
7.逗號分隔的樣式值之間留出一個空格
8.十六進位制值小寫, 十六進位制值儘量使用簡寫 #fff
9.需要透明度時才使用rgba/hsla, 避免使用rgb, hsl
10.屬性選擇器的值使用雙引號
11.0值不使用單位 margin:0;
12.樣式宣告順序
* 1. Positioning
* 2. Box model
* 3. Typographic
* 4. Visual13.不使用@import（不是sass中的）
14.媒體查詢樣式儘量放在相關的樣式旁邊
15.樣式的字首通過自動化完成
16.儘量使用單行宣告:padding margin font background border border-radius
17.- sass
18.減少不必要的巢狀，儘量不超過4層
19.計算表示式使用小括號
20.書寫一致並且可讀的註釋
21.將樣式按照元件級別進行組織，而不是頁面級別
22.- className
23.使用小寫字母，以橫槓（不是下劃線或駝峰）隔開
24.避免過度簡化隨意命名
25.保持類名有剋制的簡潔
26.使用有意義的類名，有組織有目的的來詮釋展現
27.如果可以，以父標籤的類名開頭進行命名
28.- 選擇器
29.屬性選擇符儘量避免使用（影響效能）
30.- 編輯器設定
- tab鍵設定為2個空格
- 儲存時去除行尾空格
- 檔案編碼設定為utf-8
- 檔案末尾留出一行31.儘量不要改變元素的display屬性，儘量不要讓元素脫離文件流
32.能用transition， 則不用animation
Javascript
1.- 總體規則
2.99%的程式碼必須封裝在外部Javascript檔案中。這些檔案必須在 BODY 標籤的尾部引入，讓頁面的效能最大化。
3.不要依賴於 user-agent 字串。進行適當的特性檢測.
4.不要使用 document.write()。
5.所有布林變數的命名必須用 “is” 開頭
6.字串單引號由於雙引號
7.一組邏輯之間用空行分開
8.給變數和函式的命名要有邏輯意義：例如：popUpWindowForAd 就比 myWindow 好多了。
9.不要人為縮短命名到最小。除了傳統的 for 迴圈中的計數器 i 等簡化的情況，變數命名必須長到有明確意義。
10.文件必須遵循 NaturalDocs 結構。
11.常量或配置變數（例如動畫持續時間等）必須放在檔案的頂部。
12.盡力編寫可通用化的函式，讓它接受引數並返回值。這樣有利於充分的程式碼重用，而且一旦與引入及外部指令碼配合起來，能在指令碼需要修改時減少開銷。例如，相比硬編碼一個帶有視窗大小、選項和url的彈出式視窗，不如編寫一個接受大小、url和選項作為變數的函式。 給程式碼添加註釋！這會有利於減少在除錯Javascript函式上花費的時間。
13.把你的程式碼組織成一套 物件常量/單例，按照 模組化模式，或做成 帶構造器的物件。
14.最小化全域性變數 - 你建立的全域性變數越少越好。任何全域性變數明確指認：window.xxx =
15.Ajax請求必須處理所有的正常和異常流程，避免使用if else
16.- 留空
17.每個逗號和冒號（以及適用的分號）後面要空一格，但在括號內部的左側和右側都不要加空格。另外，大括號應該總是和他們前面的引數出現在同一行。
18.- 變數
19.所有的 JavaScript 變數必須寫成全小寫或駝峰法。一個例外是構造器函式，按慣例是首字母大寫。
20.常量使用全大寫字母標識，用下劃線分隔，如：NAMES_LIKE_THIS
21.- 優化Javascript的特性
22.不要在塊內宣告一個函式
23.簡化：使用||來指定預設值
24.簡化：使用&&來代替單個if的程式碼塊
25.使用array.join()來拼接字串
26.對於節點集合物件如NodeList, 進行遍歷時，不迴圈使用長度
27.Hoisting：把所有變數宣告統一放到函式的起始位置 （在後部宣告的變數也會被JS視為在頭部定 義，由此會產生問題）
28.不要擴充內建原型（雖然給Object(), Function()之類的內建原型增加屬性和方法很巧妙，但是會破壞可維護性）
29.不要用隱含的型別轉換，如避免使用==和!=
30.不要用 eval()
31.不要用 parseInt() 進行數字轉換
32.（規範）左大括號的位置
33.構造器首字母大寫
34.寫註釋
35.不要用 void
36.不要用 with 語句
37.不要用 continue 語句
38.儘量不要用位運算
39.不要使用基本型別的包裝型別
40.不要使用非標準的特性,如使用str.chatAt(3)而不是str[3]
41.僅在物件構造器, 物件的方法, 閉包中使用 this
42.不使用new Object() new Array()，使用字面量{},[]
* new Array(3)
* for-in
43.不使用多行字串
效能
1.對圖片進行無失真壓縮優化。
2.不要在HTML中寫內聯指令碼 <script> 塊。 它們會阻塞頁面渲染操作，對頁面載入時間帶來破壞性的影響。
3.適當地設定快取標題。
4.針對靜態資源，考慮單獨配置一個無cookie的子域。
5.CSS 必須放在文件的 部分, Javascript 必須正好放在 標籤的前面。
6.CSS 和 JavaScript 都必須以最小化方式載入。
7.CSS 和 JavaScript 都必須 以gzip形式傳輸。
8.CSS 必須串接在一起。
9.- 優化Javascript執行
10.改變頁面視覺習性的指令碼絕對要首先執行。這包括任何的字型調整、盒子佈局、或IE6 pngfix。
11.頁面內容初始化
12.頁面標題、頂部導航和頁尾的初始化
13.繫結事件處理器
14.網頁流量分析、Doubleclick，以及其他第三方指令碼
15.使用CSS Sprites
16.- 快取靜態資源：CSS 和 JavaScript、產品圖片 、主題圖形、 favicon.ico、 flash .swf
17.- 把資原始檔跨域分片
28.- 避免使用IFRAME
新手學習前端開發除了要多動手敲程式碼最重要的還是經驗的交流歡迎有需要的的小夥伴進前端開發交流群624293552來一起交流問題學習經驗，我把所有的教程資料都放到裡了。