【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-…

最后照旧是一个广告贴，最近新开了一个分享技术的公众号，欢迎你们关注👇（目前关注人数可怜🤕）