JavaScript命名約定規則整理

今天跟大家分享的是JavaScript 命名約定示例介紹——它為你提供了在 JavaScript 中命名變量、函數、類或元件時的常識。沒有人強制執行這些命名約定規則，但是，它們在JavaScript開發中被廣泛接受為标準。

01、變量

JavaScript 變量區分大小寫。是以，帶有小寫和大寫字元的 JavaScript 變量是不同的：

var name = 'Robin Wieruch';


var Name = 'Dennis Wieruch';


var NAME = 'Thomas Wieruch';


console.log(name);
// "Robin Wieruch"


console.log(Name);
// "Dennis Wieruch"


console.log(NAME);
// "Thomas Wieruch"      

一個JavaScript變量應該是自我描述。不需要為變量添加附加文檔的注釋：

// bad
var value = 'Robin';


// bad
var val = 'Robin';


// good
var firstName = 'Robin';      

大多數情況下，你會發現使用帶有前導小寫字元的駝峰式變量名聲明的 JavaScript 變量：

// bad
var firstname = 'Robin';


// bad
var first_name = 'Robin';


// bad
var FIRSTNAME = 'Robin';


// bad
var FIRST_NAME = 'Robin';


// good
var firstName = 'Robin';      

JavaScript 常量、私有和類/元件有例外——我們将在後面探讨。然而，一般來說，JavaScript 變量——一個字元串、布爾值或數字，以及一個對象、數組或函數——是用駝峰式變量名聲明的。

關于不同案例樣式的簡要概述：

• camelCase（在 JS 中使用）
• PascalCase（在 JS 中使用）
• snake_case
• kebab-case

02、布爾值

像 is、are 或 has 這樣的字首可以幫助每個 JavaScript 開發人員通過檢視布爾值和其他變量來區分它：

// bad
var visible = true;


// good
var isVisible = true;


// bad
var equal = false;


// good
var areEqual = false;


// bad
var encryption = true;


// good
var hasEncryption = true;      

與字元串和整數相比，你可以将其視為 JavaScript 布爾命名約定的另一個軟規則，除了以駝峰命名。

03、函數

JavaScript 函數也是用駝峰式編寫的。此外，最佳實踐是通過給函數名稱一個動詞作為字首來實際告訴函數正在做什麼。

// bad
function name(firstName, lastName) {
  return `${firstName} ${lastName}`;
}


// good
function getName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}      

這個動詞作為字首可以是任何東西（例如get、fetch、push、apply、calculate、compute、post）。對于擁有更多自我描述性 JavaScript 變量，這是另一個需要考慮的軟規則。

04、類

與其他 JavaScript 資料結構相比，JavaScript 類使用 PascalCase 聲明：

class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}


var me = new SoftwareDeveloper('Robin', 'Wieruch');      

每次調用 JavaScript 構造函數來執行個體化一個類的新執行個體時，類的名稱都應該出現在 Pascal Case 中，因為該類首先是用 Pascal Case 聲明的。

05、元件

元件在 JavaScript 中并非無處不在，但在React等前端架構中很常見。由于元件有點執行個體化——而是附加到 DOM 中——就像一個 JavaScript 類，它們也被廣泛地用 Pascal Case 聲明。

// bad
function userProfile(user) {
  return (
    <div>
      <span>First Name: {user.firstName}</span>
      <span>Last Name: {user.lastName}</span>
    </div>
  );
}


// good
function UserProfile(user) {
  return (
    <div>
      <span>First Name: {user.firstName}</span>
      <span>Last Name: {user.lastName}</span>
    </div>
  );
}      

當一個元件被使用時，它差別于原生 HTML 和web 元件，因為它的第一個字母總是大寫的。

<div>
  <UserProfile
    user={{ firstName: 'Robin', lastName: 'Wieruch' }}
  />
</div>      

06、方法

與 JavaScript 函數相同，JavaScript 類上的方法使用駝峰命名法聲明：

class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }


  getName() {
    return `${this.firstName} ${this.lastName}`;
  }
}


var me = new SoftwareDeveloper('Robin', 'Wieruch');


console.log(me.getName());
// "Robin Wieruch"      

此處适用與 JavaScript 函數相同的規則——例如添加動詞作為字首——以使方法名稱更具自我描述性。

07、私有

在 JavaScript 中，你很少會在變量/函數/方法前面找到下劃線 ( _ )。如果你看到一個，它旨在為私人。盡管 JavaScript 不能真正強制執行它，但将某些内容聲明為 private 告訴我們應該如何使用它或不應該如何使用它。

例如，類中的私有方法隻能在類内部使用，而應避免在類的執行個體上使用：

class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.name = _getName(firstName, lastName);
  }


  _getName(firstName, lastName) {
    return `${firstName} ${lastName}`;
  }
}


var me = new SoftwareDeveloper('Robin', 'Wieruch');


// good
var name = me.name;
console.log(name);
// "Robin Wieruch"


// bad
name = me._getName(me.firstName, me.lastName);
console.log(name);
// "Robin Wieruch"      

私有變量/函數也可以出現在 JavaScript 檔案中。這可能意味着變量/函數不應該在這個檔案之外使用，而隻能在内部為同一檔案中的其他函數計算進一步的業務邏輯。

08、常量

最後，但并非最不重要的是，在 JavaScript 中有一些常量——旨在成為不變的變量——用大寫字母（大寫）寫成：

var SECONDS = 60;
var MINUTES = 60;
var HOURS = 24;


var DAY = SECONDS * MINUTES * HOURS;      

如果一個變量的變量聲明名稱中包含多個單詞，則使用下劃線 ( _ )：

var DAYS_UNTIL_TOMORROW = 1 ;      

通常 JavaScript 常量定義在 JavaScript 檔案的頂部。正如之前所暗示的，除了原始資料結構的變量的const 聲明之外，沒有人強制一個人不要改變這裡的變量，但它的大寫命名建議避免它。

09、全局變量

JavaScript 變量是全局定義的，如果它的所有上下文都可以通路它。上下文通常由聲明/定義變量的 JavaScript 檔案定義，但在較小的 JavaScript 項目中，它可能是整個項目。全局 JavaScript 變量沒有特殊的命名約定。

• 全局 JavaScript 變量在項目/檔案的頂部聲明。
• 如果全局 JavaScript 變量是可變的，則它會以駝峰命名。
• 如果全局 JavaScript 變量是不可變的，則它以大寫形式寫入。

10、下劃線

那麼 JavaScript 變量命名中的下劃線和破折号呢？由于在 JS 中主要考慮了駝峰式大小寫和 PascalCase，你已經看到下劃線很少用于私有變量或常量。有時，你會在從第三方（如資料庫或API）擷取資訊時發現下劃線。你可能會看到下劃線的另一種情況是未使用的函數參數，但如果你還沒有在那裡看到它們，請不要擔心這些 ;-)

11、DASH

JavaScript 變量中的破折号也不是常識。它隻會讓事情變得更加困難；就像在對象中使用它們一樣：

// bad
var person = {
  'first-name': 'Robin',
  'last-name': 'Wieruch',
};


var firstName = person['first-name'];


// good
var person = {
  firstName: 'Robin',
  lastName: 'Wieruch',
};


var firstName = person.firstName;      

甚至不可能直接對變量聲明使用破折号：

var first-name = 'Robin';
// Uncaught SyntaxError: Unexpected token '-'      

這就是為什麼最好避免它們。

12、檔案

JavaScript 中有兩種命名檔案的政策：PascalCase 和 kebab-case。在 JavaScript 前端應用程式中，你經常會看到 PascalCase 用于命名元件（例如 React 元件）。

- components/
--- user/
----- UserProfile.js
----- UserList.js
----- UserItem.js
--- ui/
----- Dialog.js
----- Dropdown.js
----- Table.js      

相比之下，在 JavaScript 後端應用程式中，kebab-case 是常識：

- routing/
--- user-route.js
--- messages-route.js      

你還将看到駝峰命名法，但與 PascalCase（抱歉，前端應用程式）類似，存在作業系統以不同方式處理它們的風險，這可能會導緻錯誤。這就是為什麼堅持 kebab-case 應該成為 JavaScript 中檔案名的規範。