javascript代码规范之命名规范

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

写在前面：

• 个人前端网站：zhangqiang.hk.cn
• 欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

命名规范

1 避免单字母的名字。用你的命名来描述功能。

// bad
function q() {
  // ...
}
​
// good
function query() {
  // ...
}

2 在命名对象、函数和实例时使用驼峰命名法（camelCase）。

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
​
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

3 只有在命名构造器或者类的时候才用帕斯卡拼命名法（PascalCase）。

// bad
function user(options) {
  this.name = options.name;
}
​
const bad = new user({
  name: 'nope',
});
​
// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}
​
const good = new User({
  name: 'yup',
});

4 不要使用前置或者后置下划线。

为什么? JavaScript 在属性和方法方面没有隐私设置。 虽然前置的下划线是一种常见的惯例，意思是 “private” ，事实上，这些属性是公开的，因此，它们也是你公共 API 的一部分。 这种约定可能导致开发人员错误的认为更改不会被视为中断，或者不需要测试。建议：如果你想要什么东西是 “private” ， 那就一定不能有明显的表现。

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';
​
// good
this.firstName = 'Panda';
​
// 好，在 WeakMapx 可用的环境中
// see https://kangax.github.io/compat-table/es6/#test-WeakMap
const firstNames = new WeakMap();
firstNames.set(this, 'Panda');

5 不要保存 this 的引用。 使用箭头函数或者 函数#bind。

// bad
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}
​
// bad
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}
​
// good
function foo() {
  return () => {
    console.log(this);
  };
}

6 常量大写

你可以大写一个常量，如果它：（1）被导出，（2）使用 const 定义（不能被重新赋值），（3）程序员可以信任它（以及其嵌套的属性）是不变的。

为什么? 这是一个可以帮助程序员确定变量是否会发生变化的辅助工具。UPPERCASE_VARIABLES 可以让程序员知道他们可以相信变量（及其属性）不会改变。

• 是否是对所有的 const 定义的变量？ – 这个是没有必要的，不应该在文件中使用大写。但是，它应该用于导出常量。
• 导出对象呢？ – 在顶级导出属性 (e.g. EXPORTED_OBJECT.key) 并且保持所有嵌套属性不变。

// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';
​
// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';
​
// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';
​
// ---
​
// 允许，但是不提供语义值
export const apiKey = 'SOMEKEY';
​
// 多数情况下，很好
export const API_KEY = 'SOMEKEY';
​
// ---
​
// bad - 不必要大写 key 没有增加语义值
export const MAPPING = {
  KEY: 'value'
};
​
// good
export const MAPPING = {
  key: 'value'
};