命名规则
23.1 避免使用单字母名字。名字应该要具有描述性
// bad
function q() {
// ...
}
// good
function query() {
// ...
}
23.2 命名对象、函数和实例的时候使用驼峰命名
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
23.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',
});
23.4 不要使用头或者尾下划线
为什么?Javascript没有私有属性或者方法的概念。虽然通常来讲,前置下划线值私有的意思,实际上,所有的属性都是公共的,这是你公共API条约的一部分。这个管理可能会导致开发者错误的任务变更不会破坏掉程序,或者认为不需要测试。tl;dr:如果你想要什么东西是私有的,你必须不让它被看见
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';
// good
this.firstName = 'Panda';
23.5 不要保存this
的引用。使用箭头函数,或者是Function#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);
};
}
23.6 如果文件只有一个default export,那么文件名应该保持和输出名一致
// file 1 contents
class CheckBox {
// ...
}
export default CheckBox;
// file 2 contents
export default function fortyTwo() { return 42; }
// file 3 contents
export default function insideDirectory() {}
// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export
// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly
// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js
23.7 当使用export-default输出一个函数的时候,使用驼峰命名。文件名也应该和函数名一致
function makeStyleGuide() {
// ...
}
export default makeStyleGuide;
23.8 当你导出构造函数、类、单例、函数库、空对象时使用帕斯卡式命名
const AirbnbStyleGuide = {
es6: {
},
};
export default AirbnbStyleGuide;
23.8 简写或者是首字母缩略应该全部大写,或者全部小写
为什么?名字是为了可读性而不是为了照顾计算机的算法
// bad
import SmsContainer from './containers/SmsContainer';
// bad
const HttpRequests = [
// ...
];
// good
import SMSContainer from './containers/SMSContainer';
// good
const HTTPRequests = [
// ...
];
// also good
const httpRequests = [
// ...
];
// best
import TextMessageContainer from './containers/TextMessageContainer';
// best
const requests = [
// ...
];