前端自我提升系列：代碼規範篇

前言

中國有句老話：“沒有規矩，不成方圓”，前端學習也是一樣。一個良好的代碼風格不僅能提升代碼的美觀程度，同時也能很大程度上減輕未來的維護成本。對于剛入職的我而言，通過好的代碼規範來限制住我放蕩不羁的代碼風格是非常重要的。

提示：以下是本篇文章正文内容，下面案例可供參考

一、Javascript代碼規範

• 縮進

統一使用 4 空格

• 花括号

if (foo) {
}
           

• 命名

變量（camel命名法） 如camelName

常量（大寫加下劃線命名法） 如CAMEL_NAME

類名（pascal命名法） 如PascalClass

私有成員（以下劃線開頭） 如_camelName

• 空格

var a = b + c
           

• 引号

HTML(pug)中使用雙引号

JavaScript中字元串使用單引号

可能被序列化的JSON中使用雙引号

// html
img src="picture.gif"
// pug
div(data-action="goto")
// JavaScript
var str = 'name';
           

• 注釋

準則

1、不寫文檔風格的注釋

2、如無必要，勿增注釋

3、如有必要，盡量詳盡

4、業務代碼必須寫足量注釋

需要寫注釋的場景

1、說明代碼在幹什麼（why）

2、理清代碼的結構（當一片段代碼比較冗長時，需要寫注釋）

3、當出現非正常情況代碼時（預感到以後自己或别人可能了解不了的代碼）

4、大部分變量名要寫注釋說明，尤其是變量名不能望文生義時

注釋書寫規範

源碼中的注釋，主要使用中文注釋

如果是中文為主的注釋，标點符号用中文全角

中英文夾雜時，英文與中文之間要用一個空格分開

注釋辨別符與注釋内容要用一個空格分開：// 注釋 與 / 注釋 /

注釋與源代碼在一行時，與源代碼末尾分隔兩個空格

所有檔案必須寫檔案注釋，寫明該檔案的作用

語言規則

• 變量

變量在使用前必須聲明

所有變量聲明必須在該作用域的開始位置

• 常量

使用大寫字母與下劃線進行命名。

語句

• 必須以分号結尾

• 不要添加多餘的逗号

{
  b: "dsf",
  a: "ccc"
}
           

使用直接量

減少使用構造函數建立。

var a = [x1, x2, x3];
var a2 = [x1, x2];
           

函數聲明

不要使用塊内聲明

二、HTML編碼規範

空白

空白使用保持前後一緻，使用空白提高可讀性。

1、絕不要混用空格和制表符。

2、堅持使用一種縮進：空格或制表符

3、如果使用空格，确定縮進的字元 (偏好：4個字元)

格式

1、标簽以及屬性名稱總是小寫。

2、一行一個元素。

3、每個嵌套元素使用一個額外的縮進。

4、布爾屬性無值 (e.g. checked 而不是 checked=“checked”)。

5、屬性值總是使用雙引号引起來。

6、省略link樣式表、style以及script元素的type屬性。

7、總是包含結束标簽。

命名

.在命名這個地方我覺得是HTML、css部分最難的地方了。但是大家一定要主要命名的規範，不能應為太麻煩就不去命名。

1、使用清晰，貼切，适當的HTML類名。名稱應該展現HTML和2、2、CSS檔案的資訊。

3、避免很系統地使用類名縮寫，這會讓事情變得難以了解。

前端目錄規範

目錄命名

前端目錄和檔案名全使用全小寫’_’ 連字元。不要使用駝峰命名，不要使用’-‘連接配接，’-'在架構中将用于檔案目錄的解析

總結

目前隻總結了這些，等我在經曆一些項目在繼續更新。