likes
comments
collection

javascript代码规范之命名规范

作者站长头像
站长
· 阅读数 13

这是我参与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'
};