JavaScript 命名約定優秀實踐
1. 變量的命名約定
JavaScript 變量名稱是區分大小寫的，大寫和小寫字母是不同的。比如：
let DogName = 'Scooby-Doo';
let dogName = 'Droopy';
let DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"但是，最推薦的聲明 JavaScript 變量的方法是使用駝峰式變量名。我們可以對JavaScript 所有類型的變量使用駝峰式命名約定，這樣就不會相同命名的變量。
// bad
let dogname = 'Droopy';
// bad
let dog_name = 'Droopy';
// bad
let DOGNAME = 'Droopy';
// bad
let DOG_NAME = 'Droopy';
// good
let dogName = 'Droopy';變量的名稱應該是不言自明的，并描述了儲存的值。例如，如果需要一個變量來儲存狗的名字，應該使用 dogName 而不是 Name，因為 dogNam 更有意義：
// bad
let d = 'Droopy';
// bad
let name = 'Droopy';
// good
let dogName = 'Droopy';2. 布爾值的命名約定
當定義布爾類型的變量時，應該使用is或者has作為變量的前綴。例如，如果需要一個變量來檢查狗是否有主人，應該使用 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. 函數的命名約定
JavaScript 中函數的名稱也是區分大小寫的。因為在聲明函數時，推薦使用駝峰式方法來命名函數。
除此之外，推薦使用描述性名詞和動詞來作為前綴。例如，如果聲明一個函數來獲取名稱，則函數名字應該是 getName：
// bad
function name(dogName, ownerName) {
return '${dogName} ${ownerName}';
}
// good
function getName(dogName, ownerName) {
return '${dogName} ${ownerName}';
}4. 常量的命名約定
JavaScript 中的常量和變量是一樣的，都區分大小寫，在定義常量時，推薦使用大寫，因為它們是不變的變量。
const LEG = 4;
const TAIL = 1;
const MOVABLE = LEG + TAIL;如果變量聲明名稱中包含多個單詞，就應該使用 UPPER_SNAKE_CASE。
const DAYS_UNTIL_TOMORROW = 1;5. 類的命名約定
JavaScript 中類的命名約定規則與函數非常相似，推薦使用描述性的名稱來描述類的功能。
函數名和類名之間的主要區別在于類名要使用大寫開頭：
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
}
}
const cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');6. 組件的命名規則
JavaScript 組件廣泛應用于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>
);
}由于組件的命名開頭字母是大寫，因此在使用時，就很容易和HTML、屬性值等區分開來：
<div>
<DogCartoon
roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }}
/>
</div>7. 方法的命名約定
這里說的方法指的是類中方法，在 JavaScript 中，類的方法和函數的結構是非常類似的，因此，命名約定規則也是一樣的。
推薦需要使用駝峰式方法來聲明 JavaScript 方法，并使用動詞作為前綴，使方法名稱更有意義：
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. 私有函數的命名約定
下劃線 (_) 在 MySQL 和 PHP 等語言中廣泛用于定義變量、函數和方法。但在 JavaScript 中，下劃線用于表示私有變量或函數。
例如，有一個私有函數名 toonName，則可以通過添加下劃線作為前綴 (_toonName) 來將其表示為私有函數。
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. 全局變量的命名約定
對于 JavaScript 全局變量，沒有特定的命名標準。建議對可變全局變量使用駝峰式大小寫的方式，對不可變全局對象使用大寫。
10. 文件名的命名約定
大多數 Web 服務器（Apache、Unix）在處理文件時都區分大小寫。例如，flower.jpg 和 Flower.jpg 是不一樣的。
但是，如果從不區分大小寫的服務器切換到區分大小寫的服務器，即使是一個小錯誤也可能導致網站崩潰。
因此，盡管它們是支持區分大小寫的，建議在所有服務器中還是使用小寫來命名文件。
