1. 程式人生 > >前端開發規範之命名規範

前端開發規範之命名規範

HTML:
1.單標記標籤統一加/結尾
2.所有跟資料有關的按鈕都用input
3.定位屬性要寫全,為0不省略
4.給有事件的元素統一加類
5.單獨模組用section包起來,class是模組名
6.導航,footer單獨之外,其餘的儘量用一個大的容器包裹。
7.對於元素屬性的定義,確保全部使用雙引號,杜絕單引號。
8.引入css檔案和js檔案的時候不要指定type屬性。
9.HTML屬性順序 class>id, name>data->src> for>type>href>value>title>alt>role>aria-


10.布林型屬性不用賦值。
11.儘量減少標籤的數量。
12.儘量避免js生成標籤。
CSS
1.用兩個空格來代替製表符(tab) – 這是唯一能保證在所有環境下獲得一致展現的方法。
2.為選擇器分組時,將單獨的選擇器單獨放在一行。
3.為了程式碼的易讀性,在每個宣告塊的左花括號前新增一個空格。
4.宣告塊的右花括號應當單獨成行。
5.每條宣告語句的 : 後應該插入一個空格。
6.為了獲得更準確的錯誤報告,每條宣告都應該獨佔一行
7.所有宣告語句都應當以分號結尾。最後一條宣告語句後面的分號是可選的,但是,如果省略這個分號,你的程式碼可能更易出錯。
8.對於以逗號分隔的屬性值,每個逗號後面都應該插入一個空格(例如,box-shadow)。
9.不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號後面插入空格。這樣利於從多個屬性值(既加逗號也加空格)中區分多個顏色值(只加逗號,不加空格)
10.對於屬性值或顏色引數,省略小於 1 的小數前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。
11.十六進位制值應該全部小寫,例如,#fff。在掃描文件時,小寫字元易於分辨,因為他們的形式更易於區分。
12.儘量使用簡寫形式的十六進位制值,例如,用 #fff 代替 #ffffff。
13.為選擇器中的屬性新增雙引號,例如,input[type=”text”]。只有在某些情況下是可選的,但是,為了程式碼的一致性,建議都加上雙引號。
14.避免為 0 值指定單位,例如,用 margin: 0; 代替 margin: 0px;
15.宣告順序:①Positioning(定位)②box modal(盒模型)③Typographic④Visual
16.不要使用@important(代替的幾種方法:①使用多個link②使用sass或less預處理將謳歌檔案編譯成一個檔案③通過rails,jekyll或其他系統中提供的css檔案合併功能)
17.媒體查詢儘量放在相關規則附近
18.使用私有字首的屬性時,通過縮排的方式,讓每個屬性的值在垂直方向對齊,以便於多行編輯
19.對於只包含一條宣告的樣式,為了易讀和便於編輯,建議放在同一行,對於有多條宣告的樣式,還是用改將宣告分為多行。
20.儘量使用簡寫形式宣告屬性。常見的有(padding,margin,font,background,border,border-radius)
21.Less和sass避免不必要的巢狀
22.較長的註釋,要寫完整的句子,一般註釋,要簡潔
23.CLASS命名
a.名稱中只能出現小寫字母和破折號(中橫線)
b.避免過度任意的簡寫(.btn 代表 button,但是 .s 不能表達任何意思。)
c.Class應該儘可能的短,並且意義明確。
d.使用有意義的名稱。使用有組織有目的的名稱。
e.基於最近的父class或基本的class作為新的class字首
f.使用.js-*來表示行為(與樣式相對)並且不要包含到css檔案
24.選擇器
(1)對於通用元素使用class,利於渲染效能優化
(2)對於經常出現的元件,避免使用屬性選擇器
(3)選擇器儘可能短,並且儘量限制組成選擇器的元素個數(建議不超過3)
(4)只有在必要的時候才將class限制在最近的父級元素內
25.程式碼組織
(1)以元件為單位組織程式碼段
(2)制定一致的註釋規範
(3)使用一致的空白符程式碼分隔塊,這樣利於掃描較大的文件
(4)如果使用多個css檔案,將其按照元件而非頁面的形式拆分,因為頁面會被重組,而組建智慧移動
26.編輯器配置
(1)用兩個空格代替tab
(2)儲存文件時,刪除尾部的空白符
(3)設定檔案編碼為utf-8
(4)在檔案結尾新增一個空白格

JS
A.一律使用4個空格
B.Continuation-indentation同樣使用4個 空格,跟上一行對齊
C.Statement之後一律以分號結束,不省略
D.單行長度,理論上不要超過80列,不過如果編輯器開啟soft wrap可以不考慮單行長度
E.若需要換行,存在操作符的情況,一定在操作符後換行。然後換的行縮排4個空格
F.若多次換行的話不用繼續縮排
G.方法之間加空行
H.單行或多行註釋前加空行
I.邏輯塊之間加空行以增加可讀性
J.標準變數採用駝峰標識
K.使用ID的地方一定要全大寫.。如targetID
L.使用URL的地方一定全大寫。如reportURL
M.涉及Android的,一律大寫第一個字母
N.涉及iOS 的,一律小寫第一個字母,大寫後兩個字母
O.常量採用大寫字母,下劃線連線的方式
P.建構函式,大寫第一個字母
Q.字元常量統一使用’’單引號
R.初始化一個變數,該變數後來可能被賦值為物件值,變數初始話值為null
S.與一個可能或可能沒有物件值得初始變數進行比較,變數初始值為null
T.該變數傳遞到一個物件被期望的函式,變數初始值為null
U.該變數作為從期望物件的函式返回,變數初始值為null
V.不要用null來測試是否為空
W.不要用null來判斷初始值變數是不是為null
X.不要直接使用undefined進行變數判斷
Y.使用字串“undefined”對變數進行判斷
Z.雙斜線後,必須跟註釋內容保留一個空格
AA.單行註釋應獨佔一行,前邊不允許有空行,縮排與下一行程式碼保持一致
AB.單行註釋可位於一個程式碼行的末尾。格式( .// 舒適內容)
AC.多行註釋最少三行
AD.多行註釋前邊留空一行
AE.難於理解的程式碼段使用多行註釋
AF.可能存在錯誤的程式碼段使用多行註釋
AG.瀏覽器特殊的hack程式碼使用多行註釋
AH.想吐槽產品的邏輯合作的同事使用多行註釋
AI.業務邏輯相關的程式碼使用多行註釋
AJ.註釋內容與星標保留一個空格
AK.所有方法,建構函式,具有方法的物件使用文件註釋 如需要的引數等
AL.括號前後有空格,花括號起始,不另換行,結尾新起一行
AM.花括號必須要,即使內容只有一行。
AN.涉及if for while do…while try…catch..finally的地方都必須使用花括號
AO.If else else 前後都留有空格
AP.Switch和括號之間留有空格,case需要縮排,break之後跟下一個case中間留一個break li ne
AQ.花括號必須要,即使內容只有一行,絕不允許下邊情況switch的falling through一定要有註釋特別說明,no default的情況也要特別說明switch (condition) { case “first”: // code break; case “third”: // code break; default: // code } switch (condition) { // obvious fall through // 這裡為啥JSHint預設就會放過,因為 case “first” 內無內容 case “first”: case “second”: // code break; case “third”: // code /* falls through */ // 這裡為啥要加這樣的註釋, 明確告知JSHint放過此處告警 default: // code } switch(condition) { case “first”: // code break; case “second”: // code break; // no default }
AR.普通for迴圈,分號後留有一個空格,判斷條件等操作符兩邊不留空格,前置條件如果有多個,逗號後留一個空格
AS.For-in一定要有hasownproperty的判斷,否則jslint或者jshint都會有一個警告
AT.所有函式內部變數宣告放在函式內頭部,只使用一個var(多了會報錯),一個變數一行,在行末跟註釋
AU.函式一定要先宣告再使用,
AV.unction declaration 和 function expression 的不同,function expression 的()前後必須有空格,而function declaration 在有函式名的時候不需要空格, 沒有函式名的時候需要空格。
AW.函式呼叫括號前後不需要空格
AX.立即執行函式的寫法,最外層必須包一層括號
AY.”use strict” 決不允許全域性使用, 必須放在函式的第一行, 可以用自執行函式包含大的程式碼段, 如果 “use strict” 在函式外使用, JSLint 和 JSHint 均會報錯
AZ.完全避免 == != 的使用, 用嚴格比較條件 === !==
BA.eval 非特殊業務, 禁用!!!
BB.with 非特殊業務, 禁用!!!