JavaScript命名約定的最佳實踐指南

2022-03-19 13:00:31

前言

在開發過程中，遵循標準的命名約定可以提高程式碼的可讀性並且程式碼更容易理解。下面就來看看 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 是不一樣的。

但是，如果從不區分大小寫的伺服器切換到區分大小寫的伺服器，即使是一個小錯誤也可能導致網站崩潰。

因此，儘管它們是支援區分大小寫的，建議在所有伺服器中還是使用小寫來命名檔案。

附：正確案例

同時應用所有規則，我們得到如下函數：

function getAccountsTotalBalance(accounts) {
  let totalBalance = 0;
  for (let accountIndex = 0; accountIndex < accounts.length; accountIndex++) {
    totalBalance += accounts[accountIndex].balance;
  }

  return totalBalance;
}

雖然accountIndex與i可能存在爭議，但函數的其餘部分應該更清楚。getAccountsTotalBalance完全傳達了函數的意圖，字首get表示它不會導致任何突變。為了讀者的利益，程式碼作者投入更多的精力是值得的。6個月後，當他們維護程式碼時，你未來的自己會感激他們所做的額外工作。

如果擔心行長度，可以考慮使用Prettier之類的工具來自動格式化程式碼。