前端程式碼規範 — JavaScript 風格指南

前言

本文基於 github 專案 airbnb/javascript 翻譯，也加入了一些個人理解。規範有利於我們更好的提高程式碼可讀性，避免一些不必要的 bug。但是，並沒有統一的標準和硬性要求，這裡只是給大家提供一些參考，適合團隊和自己的才是最好的。

個人部落格地址 ?? fe-code

型別

• 1.1 基本型別

基本型別賦值時，應該直接使用型別的值

• string
• number
• boolean
• null
• undefined
• symbol

const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1,9
複製程式碼

• 複雜型別

複雜型別賦值其實是地址的引用

• object
• array
• function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9
// const 只能阻止引用型別地址的重新賦值
// 並不能保證引用型別的屬性等不變
複製程式碼

狀態的使用（原文為 Reference）

• 2.1 所有的賦值都用const，避免使用var. eslint: prefer-const, no-const-assign

儘量確保你的程式碼中的狀態是可控範圍內的，重複引用會出現難以理解的 bug 和程式碼。

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

// good
const a = 1;
const b = 2;
複製程式碼

• 2.2 如果你一定要對引數重新賦值，那就用let，而不是var. eslint: no-var

let是塊級作用域，var是函式級作用域，同樣是為了減少程式碼的不可控，減少 “意外”

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

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}
複製程式碼

• 2.3 let、const都是塊級作用域

// const 和 let 都只存在於它定義的那個塊級作用域
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
複製程式碼

物件

• 3.1 使用字面值建立物件. eslint: no-new-object

// bad
const item = new Object();

// good
const item = {};
複製程式碼

• 3.2 當建立一個帶有動態屬性名的物件時，將定義的所有屬性放在物件的一個地方。

function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good getKey('enabled')是動態屬性名
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};
複製程式碼

• 3.3 方法簡寫. eslint: object-shorthand

// bad
const atom = {
  value: 1,

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

// good
const atom = {
  value: 1,

  // 物件的方法
  addValue(value) {
    return atom.value + value;
  },
};
複製程式碼

• 3.4 屬性值縮寫. eslint: object-shorthand

const lukeSkywalker = 'Luke Skywalker';

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

// good
const obj = {
  lukeSkywalker
};
複製程式碼

• 3.5 將屬性的縮寫放在物件宣告的開頭。

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};
複製程式碼

• 3.6 只對那些無效的標示使用引號 ''. eslint: quote-props

一般來說，我們認為它在主觀上更容易閱讀。它改進了語法突出顯示，並且更容易被JS引擎優化。

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};
複製程式碼

• 3.7 不要直接呼叫Object.prototype上的方法，如hasOwnProperty, propertyIsEnumerable, isPrototypeOf。

在一些有問題的物件上， 這些方法可能會被遮蔽掉 - 如：{ hasOwnProperty: false } - 或這是一個空物件Object.create(null)

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

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

// best
const has = Object.prototype.hasOwnProperty; // 在模組作用內做一次快取
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
// ...
console.log(has.call(object, key));
複製程式碼

• 3.8 物件淺拷貝時，更推薦使用擴充套件運算子 ...，而不是Object.assign。解構賦值獲取物件指定的幾個屬性時，推薦用 rest 運算子，也是 ...。

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

// 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 }
複製程式碼

陣列

• 4.1 用字面量賦值。 eslint: no-array-constructor

// bad
const items = new Array();

// good
const items = [];
複製程式碼

• 4.2 用Array#push 向陣列中新增一個值而不是直接用下標。

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');
複製程式碼

• 4.3 用擴充套件運算子做陣列淺拷貝，類似上面的物件淺拷貝

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

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

// good
const itemsCopy = [...items];
複製程式碼

• 4.4 推薦用 ... 運算子而不是Array.from來將一個類陣列轉換成陣列。

const foo = document.querySelectorAll('.foo');

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];
複製程式碼

• 4.5 用 Array.from 去將一個類陣列物件轉成一個陣列。

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);
複製程式碼

• 4.6 用 Array.from 而不是 ... 運算子去迭代。 這樣可以避免建立一箇中間陣列。

// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);
複製程式碼

• 4.7 在陣列方法的回撥函式中使用 return 語句。 如果函式體由一條返回一個表示式的語句組成， 並且這個表示式沒有副作用， 這個時候可以忽略return，詳見 8.2. eslint: array-callback-return

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// good 函式只有一個語句
[1, 2, 3].map(x => x + 1);

// bad 沒有返回值， 導致在第一次迭代後acc 就變成undefined了
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  acc[index] = flatten;
});

// good
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  acc[index] = flatten;
  return flatten;
});

// bad
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});
複製程式碼

• 4.8 如果一個陣列有很多行，在陣列的 [ 後和 ] 前換行。

// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];
複製程式碼

解構

• 5.1 用物件的解構賦值來獲取和使用物件某個或多個屬性值。 eslint: prefer-destructuring

這樣就不需要給這些屬性建立臨時/引用

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}
複製程式碼

• 5.2 陣列解構.

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;
複製程式碼

• 5.3 多個返回值用物件的解構，而不是陣列解構。

不依賴於返回值的順序，更可讀

// bad
function processInput(input) {
  // 然後就是見證奇蹟的時刻
  return [left, right, top, bottom];
}

const [left, __, top] = processInput(input);

// good
function processInput(input) {
  return { left, right, top, bottom };
}

const { left, top } = processInput(input);
複製程式碼

字串

• 6.1 string 統一用單引號 '' 。 eslint: quotes

// bad
const name = "Capt. Janeway";

// bad - 模板應該包含插入文字或換行
const name = `Capt. Janeway`;

// good
const name = 'Capt. Janeway';
複製程式碼

• 6.2 不應該用 + 連線換行字串。

不好用，且可讀性差

// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// bad
const errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

// good
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
複製程式碼

• 6.3 用字串模板而不是 + 來拼接字串。 eslint: prefer-template template-curly-spacing

模板字串更具可讀性、語法簡潔、字串插入引數。

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}
複製程式碼

• 6.4 永遠不要在字串中用eval()，漏洞太多。 eslint: no-eval

• 6.5 不要使用不必要的轉義字元。eslint: no-useless-escape

反斜線可讀性差，只在必要時使用

// bad
const foo = '\'this\' \i\s \"quoted\"';

// good
const foo = '\'this\' is "quoted"';

//best
const foo = `my name is '${name}'`;
複製程式碼

函式

• 7.1 用命名函式表示式而不是函式宣告。eslint: func-style

函式宣告作用域會提升，降低了程式碼可讀性和可維護性。如果你發現一個函式又大又複雜，這個函式妨礙這個檔案其他部分的理解性，這可能就是時候把這個函式單獨抽成一個模組了。(Discussion)

// bad
function foo() {
  // ...
}

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

// good

const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};
複製程式碼

• 7.2 把立即執行函式包裹在圓括號裡。 eslint: wrap-iife

一個立即呼叫的函式表示式是一個單元 - 把它和他的呼叫者（圓括號）包裹起來。當然，現代模組開發中，你基本用不到。

// immediately-invoked function expression (IIFE)
(function () {
  console.log('Welcome to the Internet. Please follow me.');
}());
複製程式碼

• 7.3 不要在非函式塊（if、while等等）內宣告函式。而是把這個函式分配給一個變數。瀏覽器會允許你這樣做，但瀏覽器解析方式不同，結果也許會有差異。【詳見no-loop-func】 eslint: no-loop-func

• 7.4 注意: 在ECMA-262中 [塊 block] 的定義是： 一系列的語句； 但是函式宣告不是一個語句。 函式表示式是一個語句。

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}
複製程式碼

• 7.5 永遠不要用arguments命名引數。它的優先順序高於每個函式作用域自帶的 arguments 物件， 所以會導致函式自帶的 arguments 值被覆蓋。

// bad
function foo(name, options, arguments) {
  // ...
}

// good
function foo(name, options, args) {
  // ...
}
複製程式碼

• 7.6 優先使用rest語法...，而不是 arguments。 eslint: prefer-rest-params

... 更明確你想用哪些引數。

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}
複製程式碼

• 7.8 使用預設引數語法，而不是在函式裡對引數重新賦值。

// really bad
function handleThings(opts) {
  // 雖然你想這麼寫， 但是這個會帶來一些細微的bug
  // 如果 opts 的值為 false, 它會被賦值為 {}
  opts = opts || {};
  // ...
}

// still bad
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
}

// good
function handleThings(opts = {}) {
  // ...
}
複製程式碼

• 7.8 使用預設引數時，需要避免副作用

var b = 1;
// bad
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3
// 很容易讓人懵逼
複製程式碼

• 7.9 把預設引數賦值放在最後

// bad
function handleThings(opts = {}, name) {
  // ...
}

// good
function handleThings(name, opts = {}) {
  // ...
}
複製程式碼

• 7.10 不要用 Function 建立函式。 eslint: no-new-func

// bad
var add = new Function('a', 'b', 'return a + b');

// still bad
var subtract = Function('a', 'b', 'return a - b');
複製程式碼

• 7.11 函式簽名部分要有空格。eslint: space-before-function-paren space-before-blocks

// bad
const f = function(){};
const g = function (){};
const h = function() {};

// good
const x = function () {};
const y = function a() {};
複製程式碼

• 7.12 永遠不要改引數. eslint: no-param-reassign

特別注意引用型別的操作，保證資料的不可變性

// bad
function f1(obj) {
  obj.key = 1;
};

// good
function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
};
複製程式碼

• 7.13 不要對引數重新賦值。 eslint: no-param-reassign

// bad
function f1(a) {
  a = 1;
  // ...
}

function f2(a) {
  if (!a) { a = 1; }
  // ...
}

// good
function f3(a) {
  const b = a || 1;
  // ...
}

function f4(a = 1) {
  // ...
}
複製程式碼

• 7.14 活用 ...。 eslint: prefer-spread

Why? 這樣更清晰，你不必提供上下文，而且你不能輕易地用apply來組成new

// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);

// good
const x = [1, 2, 3, 4, 5];
console.log(...x);

// bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));

// good
new Date(...[2016, 8, 5]);
複製程式碼

• 7.15 多個引數的函式應該像這個指南里的其他多行程式碼寫法一樣： 每行只有一個引數，每行逗號結尾。

// bad
function foo(bar,
             baz,
             quux) {
  // ...
}

// good
function foo(
  bar,
  baz,
  quux,
) {
  // ...
}

// bad
console.log(foo,
  bar,
  baz);

// good
console.log(
  foo,
  bar,
  baz,
);
複製程式碼

箭頭函式

• 8.1 如果要用匿名函式做回撥，最好使用箭頭函式 eslint: prefer-arrow-callback, arrow-spacing

它建立了一個在上下文中執行的函式，這通常是您想要的，並且是一種更簡潔的語法。

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
複製程式碼

• 8.2 如果函式體由一個沒有副作用的表示式的單個語句組成，去掉大括號和 return。否則，保留大括號且使用 return 語句。 eslint: arrow-parens, arrow-body-style

// bad
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map(number => `A string containing the ${number}.`);

// good
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map((number, index) => ({
  [index]: number
}));

// 表示式有副作用就不要用隱式返回
function foo(callback) {
  const val = callback();
  if (val === true) {
    // Do something if callback returns true
  }
}

let bool = false;

// bad
foo(() => bool = true);

// good
foo(() => {
  bool = true;
});
複製程式碼

• 8.3 如果表示式有多行，首尾放在圓括號裡更可讀。

// bad
['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod
  )
);

// good
['get', 'post', 'put'].map(httpMethod => (
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod
  )
));
複製程式碼

• 8.4 為了清晰和一致，始終在引數周圍加上括號 eslint: arrow-parens

// bad
[1, 2, 3].map((x) => x * x);

// good
[1, 2, 3].map(x => x * x);

// good
[1, 2, 3].map(number => (
  `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));

// bad
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
複製程式碼

• 8.5 避免箭頭函式語法 => 和比較操作符 <=, >= 混淆. eslint: no-confusing-arrow

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};
複製程式碼

• 8.6 使用隱式返回時強制約束函式體在箭頭後面。 eslint: implicit-arrow-linebreak

// bad
(foo) =>
  bar;

(foo) =>
  (bar);

// good
(foo) => bar;
(foo) => (bar);
(foo) => (
   bar
)
複製程式碼

類和建構函式

• 9.1 始終用class，避免直接操作prototype

// bad
function Queue(contents = []) {
  this.queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
};


// good
class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}
複製程式碼

• 9.2 使用extends實現繼承

內建的方法來繼承原型，而不會破壞 instanceof

// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
  return this._queue[0];
}

// good
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}
複製程式碼

• 9.3 方法可以返回this來實現方法鏈

// bad
Jedi.prototype.jump = function () {
  this.jumping = true;
  return true;
};

Jedi.prototype.setHeight = function (height) {
  this.height = height;
};

const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined

// good
class Jedi {
  jump() {
    this.jumping = true;
    return this;
  }

  setHeight(height) {
    this.height = height;
    return this;
  }
}

const luke = new Jedi();

luke.jump()
  .setHeight(20);
複製程式碼

• 9.4 允許寫一個自定義的 toString() 方法，但是要保證它是可以正常工作且沒有副作用

class Jedi {
  constructor(options = {}) {
    this.name = options.name || 'no name';
  }

  getName() {
    return this.name;
  }

  toString() {
    return `Jedi - ${this.getName()}`;
  }
}
複製程式碼

• 9.5 如果沒有特殊說明，類有預設的構造方法。不用特意寫一個空的建構函式或只是代表父類的建構函式。 eslint: no-useless-constructor

// bad
class Jedi {
  constructor() {}

  getName() {
    return this.name;
  }
}

// bad
class Rey extends Jedi {
  // 這種建構函式是不需要寫的
  constructor(...args) {
    super(...args);
  }
}

// good
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = 'Rey';
  }
}
複製程式碼

• 9.6 避免重複類的成員。 eslint: no-dupe-class-members

重複類成員會默默的執行最後一個，有重複肯定就是一個錯誤

// bad
class Foo {
  bar() { return 1; }
  bar() { return 2; }
}

// good
class Foo {
  bar() { return 1; }
}

// good
class Foo {
  bar() { return 2; }
}
複製程式碼

模組

• 10.1 在非標準模組系統上使用(import/export)。或者隨時換成其他的首選模組系統。

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;
複製程式碼

• 10.2 不要用 import * 這種萬用字元

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';
複製程式碼

• 10.3 不要直接從 import 中直接 export

看起來簡潔，但是影響可讀性

// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;
複製程式碼

• 10.4 一個入口只 import 一次。 eslint: no-duplicate-imports

Why? 從同一個路徑下import多行會使程式碼難以維護

// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';

// good
import foo, { named1, named2 } from 'foo';

// good
import foo, {
  named1,
  named2,
} from 'foo';
複製程式碼

• 10.5 不要匯出可變的繫結 eslint: import/no-mutable-exports

儘量減少狀態，保證資料的不可變性。雖然在某些場景下可能需要這種技術，但總的來說應該匯出常量。

// bad
let foo = 3;
export { foo }

// good
const foo = 3;
export { foo }
複製程式碼

• 10.6 在只有一個匯出的模組裡，用 export default 更好。 eslint: import/prefer-default-export

鼓勵使用更多檔案，每個檔案只做一件事情並匯出，這樣可讀性和可維護性更好。

// bad
export function foo() {}

// good
export default function foo() {}
複製程式碼

• 10.7 import 放在其他所有語句之前。 eslint: import/first

防止意外行為。

// bad
import foo from 'foo';
foo.init();

import bar from 'bar';

// good
import foo from 'foo';
import bar from 'bar';

foo.init();
複製程式碼

• 10.8 多行 import 應該縮排，就像多行陣列和物件字面量

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';
複製程式碼

• 10.9 在 import 語句裡不允許 Webpack loader 語法 eslint: import/no-webpack-loader-syntax

最好是在webpack.config.js裡寫

// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';

// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';
複製程式碼

迭代器和生成器

• 11.1 不要用迭代器。用 JavaScript 高階函式代替for-in、 for-of。 eslint: no-iterator no-restricted-syntax

不可變原則，處理純函式的返回值比處理副作用更容易。

陣列的迭代方法： map() / every() / filter() / find() / findIndex() / reduce() / some() / ... , 物件的處理方法 ：Object.keys() / Object.values() / Object.entries() 去產生一個陣列， 這樣你就能去遍歷物件了。

const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;

// good
let sum = 0;
numbers.forEach(num => sum += num);
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}

// good
const increasedByOne = [];
numbers.forEach(num => increasedByOne.push(num + 1));

// best (keeping it functional)
const increasedByOne = numbers.map(num => num + 1);
複製程式碼

• 11.2 現在不要用 generator

相容性不好

• 11.3 如果你一定要用，或者你忽略我們的建議, 請確保它們的函式簽名之間的空格是正確的。 eslint: generator-star-spacing

function 和 * 是同一概念，關鍵字 *不是function的修飾符，function*是一個和function不一樣的獨特結構

// bad
function * foo() {
  // ...
}

// bad
const bar = function * () {
  // ...
}

// bad
const baz = function *() {
  // ...
}

// bad
const quux = function*() {
  // ...
}

// bad
function*foo() {
  // ...
}

// bad
function *foo() {
  // ...
}

// very bad
function
*
foo() {
  // ...
}

// very bad
const wat = function
*
() {
  // ...
}

// good
function* foo() {
  // ...
}

// good
const foo = function* () {
  // ...
}
複製程式碼

屬性

• 12.1 訪問屬性時使用點符號. eslint: dot-notation

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;
複製程式碼

• 12.2 獲取的屬性是變數時用方括號[]

const luke = {
  jedi: true,
  age: 28,
};

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp('jedi');
複製程式碼

• 12.3 做冪運算時用冪操作符 ** 。 eslint: no-restricted-properties.

// bad
const binary = Math.pow(2, 10);

// good
const binary = 2 ** 10;
複製程式碼

變數

• 13.1 始終用 const 或 let 宣告變數。如果你不想遇到一對變數提升、全域性變數的 bug 的話。 eslint: no-undef prefer-const

// bad
superPower = new SuperPower();

// good
const superPower = new SuperPower();
複製程式碼

• 13.2 每個變數單獨用一個 const 或 let。 eslint: one-var

// bad
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';
複製程式碼

• 13.3 const放一起，let放一起

新變數依賴之前的變數或常量時，是有幫助的

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;
複製程式碼

• 13.4 變數宣告放在合理的位置

// bad - unnecessary function call
function checkName(hasName) {
  const name = getName();

  if (hasName === 'test') {
    return false;
  }

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

// good
function checkName(hasName) {
  if (hasName === 'test') {
    return false;
  }

  // 在需要的時候分配
  const name = getName();

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}
複製程式碼

• 13.5 不要使用連續變數分配。 eslint: no-multi-assign

Why? 連結變數分配建立隱式全域性變數。

// bad
(function example() {
  // JavaScript 將其解釋為
  // let a = ( b = ( c = 1 ) );
  // let 只對變數 a 起作用; 變數 b 和 c 都變成了全域性變數
  let a = b = c = 1;
}());

console.log(a); // undefined
console.log(b); // 1
console.log(c); // 1

// good
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // undefined
console.log(b); // undefined
console.log(c); // undefined

// `const` 也一樣
複製程式碼

• 13.6 不要使用一元遞增遞減運算子（++， --）. eslint no-plusplus

根據 eslint 文件，一元遞增和遞減語句受到自動分號插入的影響，並且可能會導致應用程式中的值遞增或遞減的靜默錯誤。 使用num += 1 而不是 num++ 或代替語句來改變你的值也更具表現力。禁止一元遞增和遞減語句也會阻止您無意中預先遞增/預遞減值，從而減少程式出現意外行為。

  // bad

  let array = [1, 2, 3];
  let num = 1;
  num++;
  --num;

  let sum = 0;
  let truthyCount = 0;
  for(let i = 0; i < array.length; i++){
    let value = array[i];
    sum += value;
    if (value) {
      truthyCount++;
    }
  }

  // good

  let array = [1, 2, 3];
  let num = 1;
  num += 1;
  num -= 1;

  const sum = array.reduce((a, b) => a + b, 0);
  const truthyCount = array.filter(Boolean).length;
複製程式碼

• 13.7 避免在 = 前/後換行。 如果你的語句超出 max-len， 那就用()把這個值包起來再換行。 eslint operator-linebreak.

// bad
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// bad
const foo
  = 'superLongLongLongLongLongLongLongLongString';

// good
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

// good
const foo = 'superLongLongLongLongLongLongLongLongString';
複製程式碼

• 13.8 不允許有未使用的變數。 eslint: no-unused-vars

// bad

var some_unused_var = 42;

// 定義了沒有使用
var y = 10;
y = 5;

// 不會將用於修改自身的讀取視為已使用
var z = 0;
z = z + 1;

// 引數定義了但未使用
function getX(x, y) {
    return x;
}

// good
function getXPlusY(x, y) {
  return x + y;
}

var x = 1;
var y = a + 2;

alert(getXPlusY(x, y));

// 'type' 即使沒有使用也可以被忽略， 因為這個有一個 rest 取值的屬性。
// 這是從物件中抽取一個忽略特殊欄位的物件的一種形式
var { type, ...coords } = data;
// 'coords' 現在就是一個沒有 'type' 屬性的 'data' 物件
複製程式碼

提升

• 14.1 var 宣告被提升。const 和 let 宣告被賦予一個所謂的新概念Temporal Dead Zones (TDZ)。 重要的是要知道為什麼 typeof不再安全.

function example() {
  console.log(notDefined); // => throws a ReferenceError
}

// 在變數宣告之前使用會正常輸出，是因為變數宣告提升，值沒有。
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// 表現同上
function example() {
  let declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

// 用 const， let 不會發生提升
function example() {
  console.log(declaredButNotAssigned); // => throws a ReferenceError
  console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
  const declaredButNotAssigned = true;
}
複製程式碼

• 14.2 匿名函式表示式和 var 情況相同

function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function () {
    console.log('anonymous function expression');
  };
}
複製程式碼

• 14.3 已命名的函式表示式提升他的變數名，而不是函式名或函式體

function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  superPower(); // => ReferenceError superPower is not defined

  var named = function superPower() {
    console.log('Flying');
  };
}

// 函式名和變數名相同也是一樣
function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  var named = function named() {
    console.log('named');
  };
}
複製程式碼

• 14.4 函式宣告則提升了函式名和函式體

function example() {
  superPower(); // => Flying

  function superPower() {
    console.log('Flying');
  }
}
複製程式碼

• 更多資訊前往JavaScript Scoping & Hoisting by Ben Cherry.

比較和相等

• 15.1 使用 === 和 !== 而不是 == 和 !=. eslint: eqeqeq

• 15.2 if 等條件語句使用強制 ToBoolean 抽象方法來評估它們的表示式，並且始終遵循以下簡單規則：

• Objects => true

• Undefined => false

• Null => false

• Booleans => the value of the boolean

• Numbers

  • +0, -0, or NaN => false
  • 其他 => true

• Strings

  • '' => false
  • 其他 => true

if ([0] && []) {
  // true
  // 陣列（即使是空陣列）是物件，物件會計算成 true
}
複製程式碼

• 15.3 布林值比較可以省略，但是字串和數字要顯示比較

// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}
複製程式碼

• 15.4 switch case 中，在 case 和 default 分句裡用大括號建立一個塊(如：let, const, function, and class). eslint rules: no-case-declarations.

詞彙宣告在整個 switch 塊中都是可見的，但只有在分配時才會被初始化，這隻有在 case 達到時才會發生。當多個 case 子句嘗試定義相同的事物時，會出現問題。

// bad
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}
複製程式碼

• 15.5 三元表示式不應該巢狀，通常是單行表示式。

eslint rules: no-nested-ternary.

// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

// better
const maybeNull = value1 > value2 ? 'baz' : null;

const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

// best
const maybeNull = value1 > value2 ? 'baz' : null;

const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
複製程式碼

• 15.7 避免不需要的三元表示式

eslint rules: no-unneeded-ternary.

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

// good
const foo = a || b;
const bar = !!c;
const baz = !c;
複製程式碼

• 15.8 混合操作符時，要放在 () 裡，只有當它們是標準的算術運算子(+, -, *, & /)， 並且它們的優先順序顯而易見時，可以不用。 eslint: no-mixed-operators

// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;

// bad
const bar = a ** b - 5 % d;

// bad
if (a || b && c) {
  return d;
}

// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

// good
const bar = (a ** b) - (5 % d);

// good
if (a || (b && c)) {
  return d;
}

// good
const bar = a + b / c * d;
複製程式碼

塊

• 16.1 用大括號 {} 包裹多行程式碼塊。 eslint: nonblock-statement-body-position

// bad
if (test)
  return false;

// good
if (test) return false;

// good
if (test) {
  return false;
}

// bad
function foo() { return false; }

// good
function bar() {
  return false;
}
複製程式碼

• 16.2 else 和 if 的大括號保持在一行。 eslint: brace-style

// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}

// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}
複製程式碼

• 16.3 如果 if 語句都要用 return 返回， 那後面的 else 就不用寫了。 如果 if 塊中包含 return， 它後面的 else if 塊中也包含了 return， 這個時候就可以把 else if 拆開。 eslint: no-else-return

// bad
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}

// bad
function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}

// bad
function dogs() {
  if (x) {
    return x;
  } else {
    if (y) {
      return y;
    }
  }
}

// good
function foo() {
  if (x) {
    return x;
  }

  return y;
}

// good
function cats() {
  if (x) {
    return x;
  }

  if (y) {
    return y;
  }
}

// good
function dogs(x) {
  if (x) {
    if (z) {
      return y;
    }
  } else {
    return z;
  }
}
複製程式碼

控制

• 17.1 當你的控制語句 if, while 等太長或者超過最大長度限制的時候，把每個判斷條件放在單獨一行裡，邏輯運算子放在行首。

// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  thing1();
}

// bad
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}

// bad
if (foo === 123
  && bar === 'abc') {
  thing1();
}

// bad
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}

// good
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}

// good
if (
  (foo === 123 || bar === 'abc')
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}

// good
if (foo === 123 && bar === 'abc') {
  thing1();
}
複製程式碼

• 17.2 不要用選擇操作符代替控制語句。

// bad
!isRunning && startRunning();

// good
if (!isRunning) {
  startRunning();
}
複製程式碼

註釋

• 18.1 多行註釋用 /** ... */

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}
複製程式碼

• 18.2 單行註釋用//，將單行註釋放在被註釋區域上方。如果註釋不是在第一行，就在註釋前面加一個空行

// bad
const active = true;  // is current tab

// good
// is current tab
const active = true;

// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this._type || 'no type';

  return type;
}

// good
function getType() {
  console.log('fetching type...');

  // set the default type to 'no type'
  const type = this._type || 'no type';

  return type;
}

// also good
function getType() {
  // set the default type to 'no type'
  const type = this._type || 'no type';

  return type;
}
複製程式碼

• 18.3 所有註釋開頭加一個空格，方便閱讀。 eslint: spaced-comment

// bad
//is current tab
const active = true;

// good
// is current tab
const active = true;

// bad
/**
 *make() returns a new element
 *based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}
複製程式碼

• 18.4 在註釋前加上 FIXME' 或TODO` 字首， 這有助於其他開發人員快速理解你指出的問題， 或者您建議的問題的解決方案。

class Calculator extends Abacus {
  constructor() {
    super();

    // FIXME: shouldn't use a global here
    total = 0;
  }
}
複製程式碼

class Calculator extends Abacus {
  constructor() {
    super();

    // TODO: total should be configurable by an options param
    this.total = 0;
  }
}
複製程式碼

空格

• 19.1 Tab 使用兩個空格（或者 4 個，你開心就好，但是團隊統一是必須的）。 eslint: indent

// bad
function foo() {
∙∙∙∙const name;
}

// bad
function bar() {
∙const name;
}

// good
function baz() {
∙∙const name;
}
複製程式碼

• 19.2 在大括號 {} 前空一格。 eslint: space-before-blocks

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});
複製程式碼

• 19.3 在控制語句 if, while 等的圓括號前空一格。在函式呼叫和定義時，函式名和圓括號之間不空格。 eslint: keyword-spacing

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}
複製程式碼

• 19.4 用空格來隔開運算子。 eslint: space-infix-ops

// bad
const x=y+5;

// good
const x = y + 5;
複製程式碼

• 19.5 檔案結尾空一行. eslint: eol-last

// bad
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;
複製程式碼

// bad
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵
↵
複製程式碼

// good
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵
複製程式碼

• 19.6 當出現長的方法鏈（一般超過兩個的時候）時換行。用點開頭強調該行是一個方法呼叫，而不是一個新的語句。eslint: newline-per-chained-call no-whitespace-before-property

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);
複製程式碼

• 19.7 在一個程式碼塊之後，下一條語句之前空一行。

// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// good
const obj = {
  foo() {
  },

  bar() {
  },
};

return obj;

// bad
const arr = [
  function foo() {
  },
  function bar() {
  },
];
return arr;

// good
const arr = [
  function foo() {
  },

  function bar() {
  },
];

return arr;
複製程式碼

• 19.8 不要故意留一些沒必要的空白行。 eslint: padded-blocks

// bad
function bar() {

  console.log(foo);

}

// also bad
if (baz) {

  console.log(qux);
} else {
  console.log(foo);

}

// good
function bar() {
  console.log(foo);
}

// good
if (baz) {
  console.log(qux);
} else {
  console.log(foo);
}
複製程式碼

• 19.9 圓括號裡不要加空格。 eslint: space-in-parens

// bad
function bar( foo ) {
  return foo;
}

// good
function bar(foo) {
  return foo;
}

// bad
if ( foo ) {
  console.log(foo);
}

// good
if (foo) {
  console.log(foo);
}
複製程式碼

• 19.10 方括號裡不要加空格。看示例。 eslint: array-bracket-spacing

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

// good， 逗號後面要加空格
const foo = [1, 2, 3];
console.log(foo[0]);
複製程式碼

• 19.11 花括號 {} 里加空格。 eslint: object-curly-spacing

// bad
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };


// bad
function foo() {return true;}
if (foo) { bar = 0;}

// good
function foo() { return true; }
if (foo) { bar = 0; }
複製程式碼

• 19.12 避免一行程式碼超過 100 個字元（包含空格、純字串就不要換行了）。

// bad
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

// bad
$.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));

// good
const foo = jsonData
  && jsonData.foo
  && jsonData.foo.bar
  && jsonData.foo.bar.baz
  && jsonData.foo.bar.baz.quux
  && jsonData.foo.bar.baz.quux.xyzzy;

// good
$.ajax({
  method: 'POST',
  url: 'https://airbnb.com/',
  data: { name: 'John' },
})
  .done(() => console.log('Congratulations!'))
  .fail(() => console.log('You have failed this city.'));
複製程式碼

• 19.13 , 前避免空格， , 後需要空格。 eslint: comma-spacing

// bad
var foo = 1,bar = 2;
var arr = [1 , 2];

// good
var foo = 1, bar = 2;
var arr = [1, 2];
複製程式碼

• 19.14 在物件的屬性中， 鍵值之間要有空格。 eslint: key-spacing

// bad
var obj = { "foo" : 42 };
var obj2 = { "foo":42 };

// good
var obj = { "foo": 42 };
複製程式碼

• 19.15 行末不要空格。 eslint: no-trailing-spaces

• 19.16 避免出現多個空行。 在檔案末尾只允許空一行。 eslint: no-multiple-empty-lines

// bad
var x = 1;

var y = 2;

// good
var x = 1;

var y = 2;
複製程式碼

逗號

• 20.1 不要前置逗號。 eslint: comma-style

// bad
const story = [
    once
  , upon
  , aTime
];

// good
const story = [
  once,
  upon,
  aTime,
];

// bad
const hero = {
    firstName: 'Ada'
  , lastName: 'Lovelace'
  , birthYear: 1815
  , superPower: 'computers'
};

// good
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  birthYear: 1815,
  superPower: 'computers',
};
複製程式碼

• 20.2 結尾額外加逗號，看團隊習慣吧 eslint: comma-dangle

// bad - 沒有結尾逗號的 git diff
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

// good - 有結尾逗號的 git diff
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};
複製程式碼

// bad
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

const heroes = [
  'Batman',
  'Superman'
];

// good
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

const heroes = [
  'Batman',
  'Superman',
];

// bad
function createHero(
  firstName,
  lastName,
  inventorOf
) {
  // does nothing
}

// good
function createHero(
  firstName,
  lastName,
  inventorOf,
) {
  // does nothing
}

// good (note that a comma must not appear after a "rest" element)
function createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
) {
  // does nothing
}

// bad
createHero(
  firstName,
  lastName,
  inventorOf
);

// good
createHero(
  firstName,
  lastName,
  inventorOf,
);

// good (note that a comma must not appear after a "rest" element)
createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
)
複製程式碼

分號

• 21.1 當 JavaScript 遇到沒有分號的換行符時，它會使用Automatic Semicolon Insertion這一規則來決定行末是否加分號。但是，ASI 包含一些古怪的行為，如果 JavaScript 弄錯了你的換行符，你的程式碼就會破壞。所以明確地使用分號，會減少這種不確定性。

// bad
(function () {
  const name = 'Skywalker'
  return name
})()

// good
(function () {
  const name = 'Skywalker';
  return name;
}());

// good
;(() => {
  const name = 'Skywalker';
  return name;
}());
複製程式碼

更多.

型別

• 22.1 在宣告開頭執行強制型別轉換。

• 22.2 String eslint: no-new-wrappers

// => this.reviewScore = 9;

// bad
const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string"

// bad
const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf()

// bad
const totalScore = this.reviewScore.toString(); // 不保證返回string

// good
const totalScore = String(this.reviewScore);
複製程式碼

• 22.3 Number eslint: radix

const inputValue = '4';

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);
複製程式碼

• 22.4 請在註釋中解釋為什麼要用移位運算，無論你在做什麼，比如由於 parseInt 是你的效能瓶頸導致你一定要用移位運算。 請說明這個是因為效能原因,

// good
/**
 * parseInt 導致程式碼執行慢
 * Bitshifting the String 將其強制轉換為數字使其快得多。
 */
const val = inputValue >> 0;
複製程式碼

• 22.5 注意: 使用 bitshift 操作時要小心。數字表示為 64 位值，但 bitshift 操作始終返回 32 位整數。對於大於32位的整數值，Bitshift可能會導致意外行為。

2147483647 >> 0 //=> 2147483647
2147483648 >> 0 //=> -2147483648
2147483649 >> 0 //=> -2147483647
複製程式碼

• 22.6 Booleans

const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// best
const hasAge = !!age;
複製程式碼

命名約定

• 23.1 避免用一個字母命名，讓你的命名更加語義化。 eslint: id-length

// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}
複製程式碼

• 23.2 用 camelCase 命名你的物件、函式、例項。 eslint: camelcase

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
複製程式碼

• 23.3 用 PascalCase 命名類。 eslint: new-cap

// 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 不要用前置或後置下劃線。 eslint: no-underscore-dangle

JavaScript 沒有私有屬性或方法的概念。儘管前置下劃線通常的概念上意味著 “private”，但其實，這些屬性是完全公開的，因此這部分也是你的 API 的內容。這一概念可能會導致開發者誤以為更改這個不會導致崩潰或者不需要測試。

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';
複製程式碼

• 23.5 不要儲存 this 的引用，使用箭頭函式或硬繫結。

// 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 檔名應與預設匯出（export default）的名稱完全匹配

// 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 當你 export 一個建構函式/類/單例/函式庫物件時用 PascalCase。

const AirbnbStyleGuide = {
  es6: {
  }
};

export default AirbnbStyleGuide;
複製程式碼

• 23.9 簡稱和首字母縮寫應該全部大寫或全部小寫。

名字是給人看的，不是給電腦看的。

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// best
import TextMessageContainer from './containers/TextMessageContainer';

// best
const Requests = [
  // ...
];
複製程式碼

• 23.10 全大寫字母定義用來匯出的常量

// 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';

// ---

// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';

// better in most cases
export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
  KEY: 'value'
};

// good
export const MAPPING = {
  key: 'value'
};
複製程式碼

訪問器

• 24.1 不需要使用屬性的訪問器函式。

• 24.2 不要使用 JavaScript 的 getters/setters，因為他們會產生副作用，並且難以測試、維護和理解。如果必要，你可以用 getVal()和 setVal() 去構建。

// bad
class Dragon {
  get age() {
    // ...
  }

  set age(value) {
    // ...
  }
}

// good
class Dragon {
  getAge() {
    // ...
  }

  setAge(value) {
    // ...
  }
}
複製程式碼

• 24.3 如果屬性/方法是一個 boolean， 請用 isVal() 或 hasVal()。

// bad
if (!dragon.age()) {
  return false;
}

// good
if (!dragon.hasAge()) {
  return false;
}
複製程式碼

• 24.4 可以用 get() 和 set() 函式，但是要保持一致。

class Jedi {
  constructor(options = {}) {
    const lightsaber = options.lightsaber || 'blue';
    this.set('lightsaber', lightsaber);
  }

  set(key, val) {
    this[key] = val;
  }

  get(key) {
    return this[key];
  }
}
複製程式碼

Events

• 25.1 給事件或其他傳遞資料時，不直接使用原始值，而是通過物件包裝。這樣在未來需要增加或減少引數，不必找到每個使用中的處理器。

// bad
$(this).trigger('listingUpdated', listing.id);

...

$(this).on('listingUpdated', (e, listingId) => {
  // do something with listingId
});
複製程式碼

prefer:

// good
$(this).trigger('listingUpdated', { listingId: listing.id });

...

$(this).on('listingUpdated', (e, data) => {
  // do something with data.listingId
});
複製程式碼

小結

所謂規範，更多的還是為了程式碼的可讀性，畢竟我們的程式碼更重要的是給人看。同時，合理的規範，也會幫助我們規避很多不必要的 bug。

交流群

關注微信公眾號：前端發動機，回覆：加群。

後記

如果你看到了這裡，且本文對你有一點幫助的話，希望你可以動動小手支援一下作者，感謝?。文中如有不對之處，也歡迎大家指出，共勉。好了，又耽誤大家的時間了，感謝閱讀，下次再見！

• 文章倉庫 ??fe-code
• 社交聊天系統（vue + node + mongodb）- ???Vchat

感興趣的同學可以關注下我的公眾號 前端發動機，好玩又有料。