Airbnb前端编码规范总结

遵循编码规范和使用语法检测，可以很好的提高代码的可读性，可维护性，并有效的减少一些编码错误，这里学习的是著名的独角兽公司 Airbnb 的前端编码规范，该项目是github上很受欢迎的一个开源项目，目前获得了40000多个star。

附：ESLint简介

ESLint 是一个开源的 JavaScript 代码检查工具。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调适。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，也可以在使用过程中自定义规则。

以下的编码规范多数都可以配置成ESLint的规则从而在编译时进行语法检查，下面的规范有ESLint规则的都在后面附上了相应的说明，方便之后进行配置。

一 Airbnb javascript编码规范

1 引用

1.1 对所有的引用使用 const ，不要使用 var。

eslint: prefer-const, no-const-assign

这能确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解

// bad
  var a = 1;
  var b = 2;

  // good
  const a = 1;
  const b = 2;

1.2 如果一定需要可变动的引用，使用 let 代替 var。

eslint: no-var jscs: disallowVar

因为 let 是块级作用域，而 var 是函数作用域。

// bad
  var count = 1;
  if (true) {
    count += 1;
  }

  // good, use the let.
  let count = 1;
  if (true) {
    count += 1;
  }

2 对象

2.1 使用字面值创建对象。

eslint: no-new-object

// bad
const item = new Object();

// good
const item = {};

2.2 使用对象方法的简写。

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

2.3 使用对象属性值的简写。

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

这样更短更有描述性。

const lukeSkywalker = 'Luke Skywalker';

  // bad
  const obj = {
    lukeSkywalker: lukeSkywalker,
  };

  // good
  const obj = {
    lukeSkywalker,
  };

2.4 不要直接调用 Object.prototype 的方法，如：hasOwnProperty, propertyIsEnumerable, 和 isPrototypeOf

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
const has = require('has');
…
console.log(has.call(object, key));

2.5 浅拷贝对象的时候最好是使用 … 操作符而不是 Object.assign

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original`
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

3 数组

3.1 使用字面值创建数组。eslint: no-array-constructor

// bad
const items = new Array();

// good
const items = [];

3.2 使用拓展运算符 … 复制数组。

// bad
const items = new Array();

// good
const items = [];

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

3.3 使用 Array#from 把一个类数组对象转换成数组

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

4 函数

4.1 使用函数声明代替函数表达式

为什么？因为函数声明是可命名的，所以他们在调用栈中更容易被识别。此外，函数声明会把整个函数提升（hoisted），而函数表达式只会把函数的引用变量名提升。这条规则使得箭头函数可以取代函数表达式。

// bad
  const foo = function () {
   
  };

  // good
  function foo() {
   
  }

4.2 函数表达式:

// 立即调用的函数表达式 (IIFE)
(() => {
   console.log('Welcome to the Internet. Please follow me.');
})();

4.3 永远不要在一个非函数代码块（if、while 等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致

// bad
if (currentUser) {