命名规则

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 = [
  // ...
];

results matching ""

    No results matching ""