前言

在開(kāi)發(fā)過(guò)程中，遵循標(biāo)準(zhǔn)的命名約定可以提高代碼的可讀性并且代碼更容易理解。下面就來(lái)看看 JavaScript 中命名約定的最佳實(shí)踐。

1. 變量的命名約定

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

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 所有類(lèi)型的變量使用駝峰式命名約定，這樣就不會(huì)相同命名的變量。

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

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

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

2. 布爾值的命名約定

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

// 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ù)的名稱(chēng)也是區(qū)分大小寫(xiě)的。因?yàn)樵诼暶骱瘮?shù)時(shí)，推薦使用駝峰式方法來(lái)命名函數(shù)。 ?

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

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

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

4. 常量的命名約定

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

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

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

const DAYS_UNTIL_TOMORROW = 1;

5. 類(lèi)的命名約定

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

函數(shù)名和類(lèi)名之間的主要區(qū)別在于類(lèi)名要使用大寫(xiě)開(kāi)頭：

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等前端框架中。組件的命名建議與類(lèi)保持一致，使用開(kāi)頭大寫(xiě)的駝峰式命名法：

// 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> 
  );
}

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

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

7. 方法的命名約定

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

推薦需要使用駝峰式方法來(lái)聲明 JavaScript 方法，并使用動(dòng)詞作為前綴，使方法名稱(chē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 等語(yǔ)言中廣泛用于定義變量、函數(shù)和方法。但在 JavaScript 中，下劃線用于表示私有變量或函數(shù)。 ?

例如，有一個(gè)私有函數(shù)名 toonName，則可以通過(guò)添加下劃線作為前綴 (_toonName) 來(lái)將其表示為私有函數(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 全局變量，沒(méi)有特定的命名標(biāo)準(zhǔn)。建議對(duì)可變?nèi)肿兞渴褂民劮迨酱笮?xiě)的方式，對(duì)不可變?nèi)謱?duì)象使用大寫(xiě)。

10. 文件名的命名約定

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

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

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

附：正確案例

同時(shí)應(yīng)用所有規(guī)則，我們得到如下函數(shù)：

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

  return totalBalance;
}

雖然accountIndex與i可能存在爭(zhēng)議，但函數(shù)的其余部分應(yīng)該更清楚。getAccountsTotalBalance完全傳達(dá)了函數(shù)的意圖，前綴get表示它不會(huì)導(dǎo)致任何突變。為了讀者的利益，代碼作者投入更多的精力是值得的。6個(gè)月后，當(dāng)他們維護(hù)代碼時(shí)，你未來(lái)的自己會(huì)感激他們所做的額外工作。

如果擔(dān)心行長(zhǎng)度，可以考慮使用Prettier之類(lèi)的工具來(lái)自動(dòng)格式化代碼。

總結(jié)

到此這篇關(guān)于JavaScript命名約定的文章就介紹到這了,更多相關(guān)JavaScript命名約定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論