【DailyENJS第13期】JavaScript命名約定

DailyENJS 致力於翻譯優秀的前端英文技術文章，爲技術同窗帶來更好的技術視野。

這裏提供一些 JavaScript 命名約定的例子—在命名JavaScript 中的變量、函數、類或組件時，這些例子爲您提供了常識。沒有人強制你執行這些命名約定規則，可是，它們在JS社區中做爲一種標準被普遍接受。

JavaScript 命名約定：變量

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';
複製代碼

大多數狀況下，你會發現用 camelCase 變量名聲明的 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 變量名聲明。

命名風格概覽：

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

JavaScript 命名約定：布爾值

像 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布爾命名約定的另外一條軟規則。

JavaScript 命名約定：函數

JavaScript 函數也是以駝峯形式編寫的。另外，最好的作法是經過給函數名稱一個動詞做爲前綴來實際告訴該函數在作什麼。

// bad
function name(firstName, lastName) {
  return `${firstName} ${lastName}`;
}
// good
function getName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}
複製代碼

動詞做爲前綴能夠是任何東西（例如，get, fetch, push, apply, calculate, post）。考慮具備更多自我描述性的 JavaScript 變量，這是另外一個軟規則。

JavaScript 命名約定：類

與其餘 JavaScript 數據結構不一樣，JavaScript 類是用 PascalCase 聲明的:

class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
複製代碼

每次調用一個J avaScript 構造函數來實例化一個類的新實例時，該類的名稱應該以 Pascal Case 出現。

JavaScript 命名約定：組件

組件在 JavaScript 中並不到處可見，但一般在諸如 React 之類的前端框架中找到。因爲組件是實例化的，像JavaScript類同樣被附加到DOM上，所以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>
複製代碼

JavaScript 命名約定：方法

與JavaScript函數相同，JavaScript 類方法用 camelCase 風格聲明：

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 函數相同的規則-例如添加動詞做爲前綴-，以使方法名稱更具描述性。

JavaScript 命名約定：私有變量

不多會在 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 文件中。這可能意味着不該在文件外部使用變量/函數，而應在同一文件中的其餘函數中使用。

JavaScript 命名約定：常量

JavaScript中有一些常量，這些常量用大寫字母表示：

var SECONDS = 60;
var MINUTES = 60;
var HOURS = 24;
var DAY = SECONDS * MINUTES * HOURS;
複製代碼

若是變量的變量聲明名稱中包含多個單詞，則使用下劃線（_）：

var DAYS_UNTIL_TOMORROW = 1;
複製代碼

一般，JavaScript常量在JavaScript文件的頂部定義。除了使用const聲明外，沒有人強制不要更改變量的操做，可是大寫的命名告訴你不該該改變它。

JavaScript 命名約定：全局變量

若是 JavaScript 變量在全部上下文都可訪問，則該變量是全局定義的。全局JavaScript 變量沒有特殊的命名約定。

• 全局 JavaScript 變量在項目/文件的頂部進行聲明。
• 若是全局變量是可變的，則使用 camelCase 風格。
• 若是全局JavaScript變量是不可變的，則使用 UPPERCASE 風格。

JavaScript 命名約定：下劃線

那麼 JavaScript 變量命名中的下劃線和破折號呢？因爲在JS中主要考慮camelCase和PascalCase，下劃線僅不多用於私有變量或常量。從數據庫或API之類的第三方獲取信息時，有時會出現下劃線。也可能會看到下劃線的另外一種狀況是未使用的函數參數，可是若是還沒有看到這些參數，則沒必要擔憂這些;-)

JavaScript 命名約定：中劃線

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 '-'
複製代碼

這就是爲何最好避免使用它們。

若是你想了解有關JavaScript代碼樣式和格式的更多信息（此處出於命名約定的緣由而未在此處討論），則應該查看 ESLint 和Prettier 。

原文： www.robinwieruch.de/javascript-…

最後照舊是一個廣告貼，最近新開了一個分享技術的公衆號，歡迎你們關注👇（目前關注人數可憐🤕）