你有想過如何合適地給 JavaScript 變量命名嗎？

在開發(fā)過程中，遵循標(biāo)準(zhǔn)的命名約定可以提高代碼的可讀性。下面就來看看 JavaScript 中命名約定的最佳實(shí)踐。

1. 變量的命名約定

JavaScript 變量名稱是區(qū)分大小寫的，大寫和小寫字母是不同的。比如：

let?DogName?=?'Scooby-Doo';
let?dogName?=?'Droopy';
let?DOGNAME?=?'Odie';
console.log(DogName);???//?"Scooby-Doo"
console.log(dogName);???//?"Droopy"
console.log(DOGNAME);???//?"Odie"

但是，最推薦的聲明 JavaScript 變量的方法是使用駝峰式變量名。我們可以對(duì)JavaScript 所有類型的變量使用駝峰式命名約定，這樣就不會(huì)相同命名的變量。

//?bad
let?dogname?=?'Droopy';?
//?bad
let?dog_name?=?'Droopy';?
//?bad
let?DOGNAME?=?'Droopy';?
//?bad
let?DOG_NAME?=?'Droopy';?
//?good
let?dogName?=?'Droopy';

變量的名稱應(yīng)該是不言自明的，并描述了儲(chǔ)存的值。例如，如果需要一個(gè)變量來儲(chǔ)存狗的名字，應(yīng)該使用 dogName 而不是 Name，因?yàn)?dogNam 更有意義：

//?bad
let?d?=?'Droopy';
//?bad
let?name?=?'Droopy';
//?good
let?dogName?=?'Droopy';

2. 布爾值的命名約定

當(dāng)定義布爾類型的變量時(shí)，應(yīng)該使用is或者h(yuǎn)as作為變量的前綴。例如，如果需要一個(gè)變量來檢查狗是否有主人，應(yīng)該使用 hasOwner 作為變量名：

//?bad
let?bark?=?false;
//?good
let?isBark?=?false;

//?bad
let?ideal?=?true;
//?good
let?areIdeal?=?true;

//?bad
let?owner?=?true;
//?good
let?hasOwner?=?true;

3. 函數(shù)的命名約定

JavaScript 中函數(shù)的名稱也是區(qū)分大小寫的。因?yàn)樵诼暶骱瘮?shù)時(shí)，推薦使用駝峰式方法來命名函數(shù)。

除此之外，推薦使用描述性名詞和動(dòng)詞來作為前綴。例如，如果聲明一個(gè)函數(shù)來獲取名稱，則函數(shù)名字應(yīng)該是 getName：

//?bad
function?name(dogName,?ownerName)?{?
??return?'${dogName}?${ownerName}';
}

//?good
function?getName(dogName,?ownerName)?{?
??return?'${dogName}?${ownerName}';
}

4. 常量的命名約定

JavaScript 中的常量和變量是一樣的，都區(qū)分大小寫，在定義常量時(shí)，推薦使用大寫，因?yàn)樗鼈兪遣蛔兊淖兞俊?/p>

const?LEG?=?4;
const?TAIL?=?1;
const?MOVABLE?=?LEG?+?TAIL;

如果變量聲明名稱中包含多個(gè)單詞，就應(yīng)該使用 UPPER_SNAKE_CASE。

const?DAYS_UNTIL_TOMORROW?=?1;

5. 類的命名約定

JavaScript 中類的命名約定規(guī)則與函數(shù)非常相似，推薦使用描述性的名稱來描述類的功能。

函數(shù)名和類名之間的主要區(qū)別在于類名要使用大寫開頭：

class?DogCartoon?{?
??constructor(dogName,?ownerName)?{?
????this.dogName?=?dogName;?
????this.ownerName?=?ownerName;?
??}
}

const?cartoon?=?new?DogCartoon('Scooby-Doo',?'Shaggy');

6. 組件的命名規(guī)則

JavaScript 組件廣泛應(yīng)用于React、Vue等前端框架中。組件的命名建議與類保持一致，使用開頭大寫的駝峰式命名法：

//?bad
function?dogCartoon(roles)?{?
??return?(?
????<div>?
??????<span>?Dog?Name:?{?roles.dogName?}?span>?
??????<span>?Owner?Name:?{?roles.ownerName?}?span>?
????div>?
??);
}?

//?good
function?DogCartoon(roles)?{?
??return?(?
????<div>?
??????<span>?Dog?Name:?{?roles.dogName?}?span>?
??????<span>?Owner?Name:?{?roles.ownerName?}?span>?
????div>?
??);
}

由于組件的命名開頭字母是大寫，因此在使用時(shí)，就很容易和HTML、屬性值等區(qū)分開來：

?
??<DogCartoon?
????roles={{?dogName:?'Scooby-Doo',?ownerName:?'Shaggy'?}}?
??/>
</div>

7. 方法的命名約定

這里說的方法指的是類中方法，在 JavaScript 中，類的方法和函數(shù)的結(jié)構(gòu)是非常類似的，因此，命名約定規(guī)則也是一樣的。

推薦需要使用駝峰式方法來聲明 JavaScript 方法，并使用動(dòng)詞作為前綴，使方法名稱更有意義：

class?DogCartoon?{
??constructor(dogName,?ownerName)?{?
????this.dogName?=?dogName;?
????this.ownerName?=?ownerName;?
??}

??getName()?{?
????return?'${this.dogName}?${this.ownerName}';?
??}
}

const?cartoon=?new?DogCartoon('Scooby-Doo',?'Shaggy');

console.log(cartoon.getName());???//?"Scooby-Doo?Shaggy"

8. 私有函數(shù)的命名約定

下劃線 (_) 在 MySQL 和 PHP 等語言中廣泛用于定義變量、函數(shù)和方法。但在 JavaScript 中，下劃線用于表示私有變量或函數(shù)。

例如，有一個(gè)私有函數(shù)名 toonName，則可以通過添加下劃線作為前綴 (_toonName) 來將其表示為私有函數(shù)。

class?DogCartoon?{?
??constructor(dogName,?ownerName)?{?
????this.dogName?=?dogName;?
????this.ownerName?=?ownerName;?
????this.name?=?_toonName(dogName,?ownerName);?
??}?
??_toonName(dogName,?ownerName)?{?
????return?`${dogName}?${ownerName}`;?
??}?
}

const?cartoon?=?new?DodCartoon('Scooby-Doo',?'Shaggy');?

//?good
const?name?=?cartoon.name;
console.log(name);???//?"Scooby-Doo?Shaggy"?

//?bad
name?=cartoon._toonName(cartoon.dogName,?cartoon.ownerName);
console.log(name);???//?"Scooby-Doo?Shaggy"

9. 全局變量的命名約定

對(duì)于 JavaScript 全局變量，沒有特定的命名標(biāo)準(zhǔn)。建議對(duì)可變?nèi)肿兞渴褂民劮迨酱笮懙姆绞?，?duì)不可變?nèi)謱?duì)象使用大寫。

10. 文件名的命名約定

大多數(shù) Web 服務(wù)器（Apache、Unix）在處理文件時(shí)都區(qū)分大小寫。例如，flower.jpg 和 Flower.jpg 是不一樣的。

但是，如果從不區(qū)分大小寫的服務(wù)器切換到區(qū)分大小寫的服務(wù)器，即使是一個(gè)小錯(cuò)誤也可能導(dǎo)致網(wǎng)站崩潰。

因此，盡管它們是支持區(qū)分大小寫的，建議在所有服務(wù)器中還是使用小寫來命名文件。