前端代碼規範（阿裡） --- Javascript

程式員寫好看的代碼，不亞于寫一行好看的字

好看的代碼總是讓人心曠神怡，

不好，不規範的代碼，讓人看了想說mmp，

那我們就來學習一下規範的代碼怎麼寫的吧

以下來自B站的學習視訊：前端必備-阿裡大廠前端開發規範！

五、Javascript規範

(一) 命名

• 采用小寫駝峰命名

  lowerCameCase

  ，代碼命名均不能以下劃線開頭，也不能以下劃線或美元符号結尾

反例：

_name / name_ / name$

• 方法名、參數名、成員變量、局部變量統一采用駝峰命名風格

正确命名：

localValue / getHttpMessage()

錯誤命名：

localvalue / gethttpmessage()

• 方法名 必須是 動詞 或者 動詞+名詞 形式
• 增删查改，統一使用如下 5 個單詞

add  /  update  /  delete  /  get  /  detail
           

附：函數常用方法的動詞：

get 擷取       / set 設定
add 增加       / remove 删除
create 建立    / destory 移除
start 啟動     / stop 停止
open 打開      / close 關閉
read 讀取      / write寫入
load 載入      / save 儲存
begin 開始     / end 結束
backup 備份    / restore 恢複
import 導入    / export 導出
split 分割     / merge 合并
inject 注入    / extract 提取
           

• 常量全部大寫，單詞之間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長

(二) 代碼格式

• 使用兩個空格進行縮進

if (x < y) {
	x += 10;
} else {
	x += 1;
}
           

• 不同邏輯，不同語義，不同業務之間插入一個空行分隔

(三) 字元串

統一使用單引号

''

，不使用雙引号

""

，這對建立HTML字元串非常有好處

let str = 'foo';
let testDiv = '<div id="test"></div>'
           

(四) 對象聲明

• 使用字面量建立對象

推薦：

不推薦：

• 使用字面量來代替對象建構器

推薦：

let user = {
	age: 0
}
           

不推薦：

let user = new Object();
user.age = 0;
           

(五) 優先使用ES6、ES7、ES8的文法

簡化程式，使代碼更加靈活和可複用

如：箭頭函數、await/async、解構、let、for…of 等

(六) 括号

下列關鍵詞必須有大括号（即使代碼隻有一行）:

if / else / for / while / try / catch / finally / with

推薦：

if (isTrue) {
	doSomeThing();
}
           

不推薦：

(七) undefined判斷

永遠不要直接使用

undefined

進行變量判斷；使用

typeof

和字元串

'undefined'

對變量進行判斷

推薦：

if (typeof person === 'undefined') {
	...
}
           

不推薦

if (person === undefined) {
	...
}
           

(八) 條件判斷和循環最多三層

條件判斷能使用 三目運算符 和 邏輯運算符的，就不要使用條件判斷。

如果超過三層的 ，抽成函數，并寫清楚注釋

(九) this的轉換命名

對上下文

this

的引用隻能使用

self

來命名

(十) 慎用 console.log

對

console.log

會有性能問題，生産環境下請清除

console.log