阅读 353

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

最后照旧是一个广告贴,最近新开了一个分享技术的公众号,欢迎大家关注👇(目前关注人数可怜🤕)