前端代碼編寫規範

時間 2019-11-17

標籤前端代碼編寫規範简体版

原文原文鏈接

前端代碼編寫規範javascript

規範的目的css

前端編程人員書寫前端代碼遵循必定的規範。按照規範編寫代碼能夠使代碼具備統一的風格，既能夠提升團隊協做效率，規範文件管理，能夠減少一些錯誤風險，也有利於項目的代碼維護和後期擴展。html

規範的內容前端

前端代碼主要包括html、css和JavaScript代碼，分別負責頁面的結構、表現和行爲，嚴格保證三者的分離，儘可能讓三者沒有太多的交互和聯繫，這樣有利於代碼的維護。html5

前端代碼編寫規範主要是對這三者進行，也就是html代碼編寫規範、css代碼編寫規範和JavaScript代碼編寫規範。這三個編寫規範也有共性的東西，做爲通用規範java

一通用規範編程

1 資源文件命名segmentfault

1.1 資源文件用小寫字母命名，多個單詞組合用中劃線分隔。app

1.2 資源文件的先後綴或者擴展名或者有明顯意義的元數據等用點號分隔。異步

2 縮進

使用4個空格做爲一個縮進層級，不使用tab字符。

3 註釋

3.1 詳盡註釋

解釋代碼解決問題的方法，解決問題的思路。

3.2 模塊註釋

通常在主要節點的開始和結束添加註釋，在循環的結束位置添加註釋。方便閱讀和修改。

3.3 待辦註釋

用TODO標記代辦事情，便於後期搜索。

二 html代碼編寫規範

1 文檔類型

推薦使用HTML5的文檔類型：<!DOCTYPE html>

2 head部分

2.1 編碼

明確編碼方式。<meta charset="utf-8">

2.2 標題

title做爲head的直接子元素，緊跟在編碼後面，<title>標題</title>

2.3 favicon

保證favicon可訪問

在網站根目錄下放置favicon.icon文件或者使用link指定favicon位置

3 CSS和JavaScript文件的引入

3.1 type屬性

根據HTML5規範，CSS和JavaScript文件不須要指定type屬性，它們的默認值分別是text/css 和 text/javascript。

3.2 CSS文件的引入

CSS文件在head中引入。

3.3 JavaScript文件的引入

出於性能的考慮，js使用異步加載，而且在body結束以前的位置加載。

<html>

<head>

</head>

<body>

</body>

</html>

4屬性

4.1 屬性順序

HTML 屬性應當按照如下給出的順序依次排列，確保代碼的易讀性。

class

id, name

data-*

src, for, type, href

title, alt

aria-*, role

class 用於標識高度可複用組件，所以應該排在首位。id 用於標識具體組件，排在第二位。

4.2 布爾值屬性

HTML5 規範規定， disabled、checked、selected 等屬性不用設置值。

5 語法規範

5.1 大小寫

html對大小寫不敏感，但爲了代碼書寫方便和代碼整潔，元素的標籤和屬性名統一小寫, 屬性值加雙引號。

5.2標籤閉合

非自閉合標籤必須有開始標記和結束標記。

自閉合標籤添加符號「/」是可選的，html5不作要求。咱們約定自閉合標籤結尾不添加「/」。

自閉合標籤包括：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

三 CSS代碼編寫規範

1 命名

CSS選擇器的命名，遵循簡單，易懂的語義化命名方式，並且要注意通用性。

1.1 名稱都用小寫，用英文，不用拼音。

1.2 使用中劃線分隔選擇器名的單詞。

1.3 名稱儘可能不用縮寫，若是使用縮寫，必須是語義明確的。

1.4 經常使用的選擇器名稱

頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制總體佈局寬度：wrapper
左右中：left right center
登陸條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情連接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標籤：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
註冊：regsiter
狀態：status
投票：vote
合做夥伴：partner

2 聲明順序

2.1 結構性屬性：

2.1.1 顯示(display)

2.1.2 位置(position, left, top, right 等)

2.1.3 浮動(overflow, float, clear 等)

2.1.4 距離(margin, padding)

2.2 表現性屬性：

2.2.1背景(background, border等)

2.2.2文字系列(font, line-height, letter-spacing, color- text-align等)

2.3 其餘(animation, transition等)

3 選擇器

3.1 不使用id選擇器

id在頁面中是惟一的，不能重複使用。而類選擇器能夠重複使用，通常id選擇器用在JavaScript中，CSS中用類選擇器。

3.2 少用標籤選擇器

考慮HTML和CSS代碼分離，提升可維護性，在CSS中儘可能使用類選擇器，少用或不用標籤選擇器。

3.3選擇器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘量精確。

4 代碼格式

4.1 空格

4.1.1 選擇器與{之間必須包含空格

.selector {

}

4.1.2 屬性名後面緊跟冒號，冒號和屬性值之間必須包含空格

margin: 0;

4.1.3 屬性有多個屬性值，屬性值後面緊跟逗號，逗號和下一個屬性值之間必須包含空格。

font-family: Aria, sans-serif;

4.1.4 >、+、~ 選擇器的兩邊各保留一個空格。

main > nav {

4.2 換行

4.2.1 選擇器和{單獨佔一行，若是是多個選擇器，每一個選擇器佔一行。

.post,

.page,

.comment {

line-height: 1.5;

}

4.2.2 每一項聲明單獨佔一行，結尾}單獨佔一行，有利於調試。

margin: 0;

padding: 0;

}

四 JavaScript代碼編寫規範

1 命名

1.1 變量命名

變量命名採用駝峯式命名法，第一個單詞的首字母小寫，其他單詞的首字母大寫。

1.2 函數命名

使用動詞+名詞的結構，採用駝峯式命名法。

參考動詞

動詞	含義	返回值
can	判斷是否可執行某個動做(權限)	函數返回一個布爾值。true：可執行；false：不可執行
has	判斷是否含有某個值	函數返回一個布爾值。true：含有此值；false：不含有此值
is	判斷是否爲某個值	函數返回一個布爾值。true：爲某個值；false：不爲某個值
get	獲取某個值	函數返回一個非布爾值
set	設置某個值	無返回值、返回是否設置成功或者返回鏈式對象
load	加載某些數據	無返回值或者返回是否加載完成的結果

1.3 常量命名

常量所有采用大寫字母，單詞之間經過下劃線分隔。

2 代碼格式

2.1 空格

2.1.1 var與變量名之間，變量名與等號之間，等號與初始值之間都留一個空格，初始值和分號之間不留空格。

2.1.2 function與函數名之間留一個空格，函數名與括號之間不留空格，括號與左大括號之間留一個空格。

2.1.3 函數的各個參數之間留一個空格。

2.1.4 if、while、for與左括號之間留一個空格，以強調關鍵字；switch與左括號之間不留空格。
2.1.5 二元操做符與左右兩個操做數之間留一個空格。

2.2 換行

2.2.1 每行語句佔用一行，不要多個語句一行。
2.2.2 if、while、for等塊級做用域後的左大括號不要另起一行，就放在關鍵字同一行，結尾的右大括號單獨佔一行，並與對應的左大括號對齊。

3 函數註釋

JavaScript中的註釋，也要有詳盡註釋和待辦註釋，模塊註釋相比html和CSS，應用少一些，但JavaScript中會常常用到函數註釋。

相對正式的函數註釋

/**

* 函數說明

* @關鍵字

經常使用註釋關鍵字：

註釋名	語法	含義	示例
@param	@param 參數名 {參數類型} 描述信息	描述參數的信息	@param name {String} 傳入名稱
@return	@return {返回類型} 描述信息	描述返回值的信息	@return {Boolean} true:可執行;false:不可執行
@author	@author 做者信息 [附屬信息：如郵箱、日期]	描述此函數做者的信息	@author 張三 2015/07/21
@version	@version XX.XX.XX	描述此函數的版本號	@version 1.0.3
@example	@example 示例代碼	演示函數的使用	@example setTitle('測試')