JavaScript 風格指南/編碼規範（Airbnb公司版）

kinolee發表於2014-11-14

Airbnb 是一家位於美國舊金山的公司，本文是其內部的 JavaScript 風格指南/編碼規範，在 Github 上有 11,000+ Star，2100+ fork，前端開發者可參考。

基本型別：當你訪問基本型別時，你是直接對它的值進行操作。

string
number
boolean
null
undefined

JavaScript

var foo = 1, bar = foo; bar = 9; console.log(foo, bar); // => 1, 9

1
2
3
4
5
6

var foo = 1,
bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

object
array
function

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

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

var foo = [1, 2],

bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

物件

使用字面量語法來建立物件
JavaScript

// bad var item = new Object(); // good var item = {};

1
2
3
4
5

// bad
var item = new Object();

// good
var item = {};

不要使用保留字作為“鍵值”，因為在IE8不能執行。More info
JavaScript

// bad var superman = { default: { clark: 'kent' }, private: true }; // good var superman = { defaults: { clark: 'kent' }, hidden: true };

1
2
3
4
5
6
7
8
9
10
11

// bad
var superman = {
  default: { clark: 'kent' },
  private: true
};

// good
var superman = {
  defaults: { clark: 'kent' },
  hidden: true
};
使用容易理解的同義詞來替代保留字
JavaScript

// bad var superman = { class: 'alien' }; // bad var superman = { klass: 'alien' }; // good var superman = { type: 'alien' };

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// bad
var superman = {
  class: 'alien'
};

// bad
var superman = {
  klass: 'alien'
};

// good
var superman = {
  type: 'alien'
};
陣列
使用字面量語法來建立陣列
JavaScript

// bad var items = new Array(); // good var items = [];

1
2
3
4
5

// bad
var items = new Array();

// good
var items = [];
如果你不知道陣列長度，陣列新增成員使用push方法。
JavaScript

var someStack = []; // bad someStack[someStack.length] = 'abracadabra'; // good someStack.push('abracadabra');

1
2
3
4
5
6
7

var someStack = [];

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

// good
someStack.push('abracadabra');
當你需要複製一個陣列時，使用陣列的slice方法。jsPerf

var len = items.length,
    itemsCopy = [],
    i;

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

// good
itemsCopy = items.slice();

var len = items.length,

itemsCopy = [],

// bad

for (i = 0; i < len; i++) {

itemsCopy[i] = items[i];

}

// good

itemsCopy = items.slice();

當你需要把“類似陣列物件”轉為陣列時，使用陣列的slice方法。
JavaScript

function trigger() { var args = Array.prototype.slice.call(arguments); ... }

1
2
3
4

function trigger() {
var args = Array.prototype.slice.call(arguments);
...
}
字串
字串使用單引號‘’

// bad
var name = "Bob Parr";

// good
var name = 'Bob Parr';

// bad
var fullName = "Bob " + this.lastName;

// good
var fullName = 'Bob ' + this.lastName;

// bad

var name = "Bob Parr";

// good

var name = 'Bob Parr';

// bad

var fullName = "Bob " + this.lastName;

// good

var fullName = 'Bob ' + this.lastName;

大於80個元素的字串需要通過分隔符進行多行操作。
注意：如果在長字串中過度使用分隔符會影響效能。. jsPerf & Discussion

// bad
var 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
var 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
var 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

var 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

var 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

var 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.';

通過程式設計的方式建立字串，應該使用陣列的join方法，而不是字串連結方法。特別是對於IE而言。 jsPerf.

var items,
    messages,
    length,
    i;

messages = [{
  state: 'success',
  message: 'This one worked.'
}, {
  state: 'success',
  message: 'This one worked as well.'
}, {
  state: 'error',
  message: 'This one did not work.'
}];

length = messages.length;

// bad
function inbox(messages) {
  items = '<ul>';

  for (i = 0; i < length; i++) {
    items += '<li>' + messages[i].message + '</li>';
  }

  return items + '</ul>';
}

// good
function inbox(messages) {
  items = [];

  for (i = 0; i < length; i++) {
    items[i] = messages[i].message;
  }

  return '<ul><li>' + items.join('</li><li>') + '</li></ul>';

var items,

messages,

length,

messages = [{

state: 'success',

message: 'This one worked.'

}, {

state: 'success',

message: 'This one worked as well.'

}, {

state: 'error',

message: 'This one did not work.'

}];

length = messages.length;

// bad

function inbox(messages) {

items = '<ul>';

for (i = 0; i < length; i++) {

items += '<li>' + messages[i].message + '</li>';

}

return items + '</ul>';

}

// good

function inbox(messages) {

items = [];

for (i = 0; i < length; i++) {

items[i] = messages[i].message;

}

return '<ul><li>' + items.join('</li><li>') + '</li></ul>';

函式
函式表示式

// anonymous function expression
var anonymous = function() {
  return true;
};

// named function expression
var named = function named() {
  return true;
};

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

// anonymous function expression

var anonymous = function() {

return true;

};

// named function expression

var named = function named() {

return true;

};

// immediately-invoked function expression (IIFE)

(function() {

console.log('Welcome to the Internet. Please follow me.');

})();

不要直接在非函式塊（if，while等）裡宣告一個函式，最好將函式賦值給一個變數。雖然瀏覽器允許你在非函式塊中宣告函式，但是由於不同的瀏覽器對Javascript的解析方式不同，這樣做就很可能造成麻煩。
注意：ECMA-262 將塊定義為一組語句，而函式宣告不是語句。Read ECMA-262′s note on this issue

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

// good
var test;
if (currentUser) {
  test = function test() {
    console.log('Yup.');
  };
}

// bad

if (currentUser) {

function test() {

console.log('Nope.');

}

// good

var test;

if (currentUser) {

test = function test() {

console.log('Yup.');

};

}

不要將引數命名為arguments，它將在每個函式的作用範圍內優先於arguments物件。
JavaScript

// bad function nope(name, options, arguments) { // ...stuff... } // good function yup(name, options, args) { // ...stuff... }

1
2
3
4
5
6
7
8
9

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

// good
function yup(name, options, args) {
// ...stuff...
}
屬性
使用點符號 . 來訪問屬性
JavaScript

var luke = { jedi: true, age: 28 }; // bad var isJedi = luke['jedi']; // good var isJedi = luke.jedi;

1
2
3
4
5
6
7
8
9
10

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

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

// good
var isJedi = luke.jedi;
當你在變數中訪問屬性時，使用[ ]符號
JavaScript

var luke = { jedi: true, age: 28 }; function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi');

1
2
3
4
5
6
7
8
9
10

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

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

var isJedi = getProp('jedi');
變數
使用var來宣告變數，否則將宣告全域性變數，我們需要儘量避免汙染全域性名稱空間，Captain Planet這樣警告過我們。
JavaScript

// bad superPower = new SuperPower(); // good var superPower = new SuperPower();

1
2
3
4
5

// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();
多個變數時只使用一個var宣告，每個變數佔一新行。

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

// good
var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// bad

var items = getItems();

var goSportsTeam = true;

var dragonball = 'z';

// good

var items = getItems(),

goSportsTeam = true,

dragonball = 'z';

最後再宣告未賦值的變數，這對你之後需要依賴之前變數的變數賦值會有幫助。

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

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

// good
var items = getItems(),
    goSportsTeam = true,
    dragonball,
    length,
    i;
·

// bad

var i, len, dragonball,

items = getItems(),

goSportsTeam = true;

// bad

var i, items = getItems(),

dragonball,

goSportsTeam = true,

len;

// good

var items = getItems(),

goSportsTeam = true,

dragonball,

length,

在範圍內將變數賦值置頂，這有助於避免變數宣告和賦值提升相關的問題

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

  //..other stuff..

  var name = getName();

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

  return name;
}

// good
function() {
  var name = getName();

  test();
  console.log('doing stuff..');

  //..other stuff..

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

  return name;
}

// bad
function() {
  var name = getName();

  if (!arguments.length) {
    return false;
  }

  return true;
}

// good
function() {
  if (!arguments.length) {
    return false;
  }

  var name = getName();

  return true;
}

// bad

function() {

test();

console.log('doing stuff..');

//..other stuff..

var name = getName();

if (name === 'test') {

return false;

}

return name;

}

// good

function() {

var name = getName();

test();

console.log('doing stuff..');

//..other stuff..

if (name === 'test') {

return false;

}

return name;

}

// bad

function() {

var name = getName();

if (!arguments.length) {

return false;

}

return true;

}

// good

function() {

if (!arguments.length) {

return false;

}

var name = getName();

return true;

}

提升
變數宣告在範圍內提升，但賦值並沒有提升

// we know this wouldn't work (assuming there
// is no notDefined global variable)
function example() {
  console.log(notDefined); // => throws a ReferenceError
}

// creating a variable declaration after you
// reference the variable will work due to
// variable hoisting. Note: the assignment
// value of `true` is not hoisted.
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// The interpreter is hoisting the variable
// declaration to the top of the scope.
// Which means our example could be rewritten as:
function example() {
  var declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

// we know this wouldn't work (assuming there

// is no notDefined global variable)

function example() {

console.log(notDefined); // => throws a ReferenceError

}

// creating a variable declaration after you

// reference the variable will work due to

// variable hoisting. Note: the assignment

// value of `true` is not hoisted.

function example() {

console.log(declaredButNotAssigned); // => undefined

var declaredButNotAssigned = true;

}

// The interpreter is hoisting the variable

// declaration to the top of the scope.

// Which means our example could be rewritten as:

function example() {

var declaredButNotAssigned;

console.log(declaredButNotAssigned); // => undefined

declaredButNotAssigned = true;

}

匿名函式表示式提升變數名，但函式賦值並沒有提升，

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

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

  var anonymous = function() {
    console.log('anonymous function expression');
  };
}

· function example() {

console.log(anonymous); // => undefined

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

var anonymous = function() {

console.log('anonymous function expression');

};

}

命名函式表示式提升變數名，但函式名字和函式體並沒有提升。

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');
  };
}

// the same is true when the function name
// is the same as the variable name.
function example() {
  console.log(named); // => undefined

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

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

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

};

}

// the same is true when the function name

// is the same as the variable name.

function example() {

console.log(named); // => undefined

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

var named = function named() {

console.log('named');

}

函式宣告能提升他們的函式名和函式體
JavaScript

function example() { superPower(); // => Flying function superPower() { console.log('Flying'); } }

1
2
3
4
5
6
7

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

  function superPower() {
    console.log('Flying');
  }
}
更多的資訊在JavaScript Scoping & Hoisting by Ben Cherry

條件表示式和相等
條件表示式強制使用 ToBoolean方法進行解析，並遵從以下簡單的規則Object ：返回 true
Undefined：返回 false
Null：返回 false
Booleans ：返回 boolean的值
Numbers ：如果是+0, -0, or NaN返回 false, 其他則 true
Strings ：空字串''返回 false 其他返回true
JavaScript

if ([0]) { // true // An array is an object, objects evaluate to true }

1
2
3
4

if ([0]) {
// true
// An array is an object, objects evaluate to true
}
使用簡易方式

// bad
if (name !== '') {
  // ...stuff...
}

// good
if (name) {
  // ...stuff...
}

// bad
if (collection.length > 0) {
  // ...stuff...
}

// good
if (collection.length) {
  // ...stuff...
}

// bad

if (name !== '') {

// ...stuff...

}

// good

if (name) {

// ...stuff...

}

// bad

if (collection.length > 0) {

// ...stuff...

}

// good

if (collection.length) {

// ...stuff...

}

更多的資訊檢視 Truth Equality and JavaScript by Angus Croll

塊

在多行塊中使用大括號

// bad
if (test)
  return false;

// good
if (test) return false;

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

// bad
function() { return false; }

// good
function() {
  return false;
}

// bad

if (test)

return false;

// good

if (test) return false;

// good

if (test) {

return false;

}

// bad

function() { return false; }

// good

function() {

return false;

}

註釋

多行註釋使用 /** ... */ ，包括描述，指定型別、所有引數的值和返回值

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

  // ...stuff...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param <String> tag
 * @return <Element> element
 */
function make(tag) {

  // ...stuff...

  return element;
}

// bad

// make() returns a new element

// based on the passed in tag name

// @param <String> tag

// @return <Element> element

function make(tag) {

// ...stuff...

return element;

}

// good

/**

* make() returns a new element

* based on the passed in tag name

* @param <String> tag

* @return <Element> element

function make(tag) {

// ...stuff...

return element;

}

單行註釋使用 //, 在註釋的內容前另起一行進行單行註釋，並在註釋前留一空行。

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

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

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

  return type;
}

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

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

  return type;
}

// bad

var active = true; // is current tab

// good

// is current tab

var active = true;

// bad

function getType() {

console.log('fetching type...');

// set the default type to 'no type'

var type = this._type || 'no type';

return type;

}

// good

function getType() {

console.log('fetching type...');

// set the default type to 'no type'

var type = this._type || 'no type';

return type;

}

在你的註釋加上FIXME或TODO的字首可以幫助其他開發者迅速理解你指出的問題和需要的幫助，以及你建議需要完善的解決問題，這跟常規註釋不一樣因為其具有可行動性，FIXME——是需要解決的而TODO——是需要完善的
使用// FIXME: 來標記問題
JavaScript

function Calculator() { // FIXME: shouldn't use a global here total = 0; return this; }

1
2
3
4
5
6
7

function Calculator() {

  // FIXME: shouldn't use a global here
  total = 0;

  return this;
}
使用 // TODO：給待解決問題進行標註
JavaScript

function Calculator() { // TODO: total should be configurable by an options param this.total = 0; return this; }

1
2
3
4
5
6
7

function Calculator() {

  // TODO: total should be configurable by an options param
  this.total = 0;

  return this;
}
空格
使用tabs設定兩個空格
JavaScript

// bad function() { ∙∙∙∙var name; } // bad function() { ∙var name; } // good function() { ∙∙var name; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// bad
function() {
∙∙∙∙var name;
}

// bad
function() {
∙var name;
}

// good
function() {
∙∙var name;
}
分支前面空一格

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

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

});

操作符前後空一格
JavaScript

// bad var x=y+5; // good var x = y + 5;

1
2
3
4
5

// bad
var x=y+5;

// good
var x = y + 5;
檔案末尾用換行符結束

// bad
(function(global) {
  // ...stuff...
})(this);

// bad
(function(global) {
  // ...stuff...
})(this);

// good
(function(global) {
  // ...stuff...
})(this)

// bad

(function(global) {

// ...stuff...

})(this);

// bad

(function(global) {

// ...stuff...

})(this);

// good

(function(global) {

// ...stuff...

})(this)

使用長方法鏈時使用縮排

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

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

// bad
var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)
    .attr('width',  (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// good
var leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .class('led', true)
    .attr('width',  (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// bad

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

// good

$('#items')

.find('.selected')

.highlight()

.end()

.find('.open')

.updateCount();

// bad

var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)

.attr('width', (radius + margin) * 2).append('svg:g')

.attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')

.call(tron.led);

// good

var leds = stage.selectAll('.led')

.data(data)

.enter().append('svg:svg')

.class('led', true)

.attr('width', (radius + margin) * 2)

.append('svg:g')

.attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')

.call(tron.led);

逗號
不要在句首使用逗號

// bad
var once
  , upon
  , aTime;

// good
var once,
    upon,
    aTime;

// bad
var hero = {
    firstName: 'Bob'
  , lastName: 'Parr'
  , heroName: 'Mr. Incredible'
  , superPower: 'strength'
};

// good
var hero = {
  firstName: 'Bob',
  lastName: 'Parr',
  heroName: 'Mr. Incredible',
  superPower: 'strength'
};

// bad

var once

, upon

, aTime;

// good

var once,

upon,

aTime;

// bad

var hero = {

firstName: 'Bob'

, lastName: 'Parr'

, heroName: 'Mr. Incredible'

, superPower: 'strength'

};

// good

var hero = {

firstName: 'Bob',

lastName: 'Parr',

heroName: 'Mr. Incredible',

superPower: 'strength'

};

不要使用多餘的逗號，這在IE6/7 和 IE9的混雜模式中會造成問題，同樣，在ES3中有些實現，如果使用多餘的逗號將增加陣列的長度，這在ES5中有闡明(source):

// bad
  var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn',
  };

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

  // good
  var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn'
  };

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

// bad

var hero = {

firstName: 'Kevin',

lastName: 'Flynn',

};

var heroes = [

'Batman',

'Superman',

];

// good

var hero = {

firstName: 'Kevin',

lastName: 'Flynn'

};

var heroes = [

'Batman',

'Superman'

];

分號

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

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

// good (guards against the function becoming an argument when two files with IIFEs are concatenated)
;(function() {
  var name = 'Skywalker';
  return name;
})();

// bad

(function() {

var name = 'Skywalker'

return name

})()

// good

(function() {

var name = 'Skywalker';

return name;

})();

// good (guards against the function becoming an argument when two files with IIFEs are concatenated)

;(function() {

var name = 'Skywalker';

return name;

})();

轉型&強制
在語句的開頭執行強制轉型。
Strings:

//  => this.reviewScore = 9;

// bad
var totalScore = this.reviewScore + '';

// good
var totalScore = '' + this.reviewScore;

// bad
var totalScore = '' + this.reviewScore + ' total score';

// good
var totalScore = this.reviewScore + ' total score';

// => this.reviewScore = 9;

// bad

var totalScore = this.reviewScore + '';

// good

var totalScore = '' + this.reviewScore;

// bad

var totalScore = '' + this.reviewScore + ' total score';

// good

var totalScore = this.reviewScore + ' total score';

使用parseInt對Numbers型進行強制轉型。

var inputValue = '4';

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

// bad
var val = +inputValue;

// bad
var val = inputValue >> 0;

// bad
var val = parseInt(inputValue);

// good
var val = Number(inputValue);

// good
var val = parseInt(inputValue, 10);

var inputValue = '4';

// bad

var val = new Number(inputValue);

// bad

var val = +inputValue;

// bad

var val = inputValue >> 0;

// bad

var val = parseInt(inputValue);

// good

var val = Number(inputValue);

// good

var val = parseInt(inputValue, 10);

如果出於某種原因你需要做些特別的事，而parseInt是你的瓶頸，出於效能考慮你需要使用位移，那麼留下你的註釋來解釋原因。

// good
/**
 * parseInt was the reason my code was slow.
 * Bitshifting the String to coerce it to a
 * Number made it a lot faster.
 */
var val = inputValue >> 0;

// good

/**

* parseInt was the reason my code was slow.

* Bitshifting the String to coerce it to a

* Number made it a lot faster.

var val = inputValue >> 0;

注意：小心位移操作符，Numbers代表著64位的值，而位移操作符只能返回32位的整型，位移對於大於32位的整型的值會有不好的影響，32位最大的有符號整型是2,147,483,647。
（有關討論：Discussion）
JavaScript

2147483647 >> 0 //=> 2147483647 2147483648 >> 0 //=> -2147483648 2147483649 >> 0 //=> -2147483647

1
2
3

2147483647 >> 0 //=> 2147483647
2147483648 >> 0 //=> -2147483648
2147483649 >> 0 //=> -2147483647
Booleans:
JavaScript

var age = 0; // bad var hasAge = new Boolean(age); // good var hasAge = Boolean(age); // good var hasAge = !!age;

1
2
3
4
5
6
7
8
9
10

var age = 0;

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

// good
var hasAge = Boolean(age);

// good
var hasAge = !!age;
命名規則
不要使用一個字母命名，而應該用單詞描述
JavaScript

// bad function q() { // ...stuff... } // good function query() { // ..stuff.. }

1
2
3
4
5
6
7
8
9

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

// good
function query() {
// ..stuff..
}
使用駝峰法來給物件、函式、例項命名。

// bad
var OBJEcttsssss = {};
var this_is_my_object = {};
function c() {}
var u = new user({
  name: 'Bob Parr'
});

// good
var thisIsMyObject = {};
function thisIsMyFunction() {}
var user = new User({
  name: 'Bob Parr'
});

// bad

var OBJEcttsssss = {};

var this_is_my_object = {};

function c() {}

var u = new user({

});

// good

var thisIsMyObject = {};

function thisIsMyFunction() {}

var user = new User({

});

使用駝峰式大小寫給建構函式和類命名。

// bad
function user(options) {
  this.name = options.name;
}

var bad = new user({
  name: 'nope'
});

// good
function User(options) {
  this.name = options.name;
}

var good = new User({
  name: 'yup'
});

// bad

function user(options) {

this.name = options.name;

}

var bad = new user({

});

// good

function User(options) {

this.name = options.name;

}

var good = new User({

});

使用下劃線字首_來命名私有屬性。
JavaScript

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

1
2
3
4
5
6

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

// good
this._firstName = 'Panda';
儲存this的引用使用_this

// bad
function() {
  var self = this;
  return function() {
    console.log(self);
  };
}

// bad
function() {
  var that = this;
  return function() {
    console.log(that);
  };
}

// good
function() {
  var _this = this;
  return function() {
    console.log(_this);
  };
}

// bad

function() {

var self = this;

return function() {

console.log(self);

};

}

// bad

function() {

var that = this;

return function() {

console.log(that);

};

}

// good

function() {

var _this = this;

return function() {

console.log(_this);

};

}

給你的函式命名，這有助於堆疊重寫
JavaScript

// bad var log = function(msg) { console.log(msg); }; // good var log = function log(msg) { console.log(msg); };

1
2
3
4
5
6
7
8
9

// bad
var log = function(msg) {
console.log(msg);
};

// good
var log = function log(msg) {
console.log(msg);
};
注意：IE8以下還有一些關於命名函式表示式的怪癖。詳情見http://kangax.github.io/nfe/

訪問器
如果你建立訪問函式使用getVal() 和 setVal(‘hello’)
JavaScript

// bad dragon.age(); // good dragon.getAge(); // bad dragon.age(25); // good dragon.setAge(25);

1
2
3
4
5
6
7
8
9
10
11

// bad
dragon.age();

// good
dragon.getAge();

// bad
dragon.age(25);

// good
dragon.setAge(25);

如果這個屬性是boolean，使用isVal() 或者 hasVal()

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

// good
if (!dragon.hasAge()) {
  return false;
}

// bad

if (!dragon.age()) {

return false;

}

// good

if (!dragon.hasAge()) {

return false;

}

.也可以使用get() 和 set()函式來建立，但是必須一致。

function Jedi(options) {
  options || (options = {});
  var lightsaber = options.lightsaber || 'blue';
  this.set('lightsaber', lightsaber);
}

Jedi.prototype.set = function(key, val) {
  this[key] = val;
};

Jedi.prototype.get = function(key) {
  return this[key];
};

function Jedi(options) {

options || (options = {});

var lightsaber = options.lightsaber || 'blue';

this.set('lightsaber', lightsaber);

}

Jedi.prototype.set = function(key, val) {

this[key] = val;

};

Jedi.prototype.get = function(key) {

return this[key];

};

構造器
給原型物件新增方法，相比用新物件重寫原型，重寫原型會有繼承問題。如果你要重寫原型方法，請重寫基礎方法。

function Jedi() {
  console.log('new jedi');
}

// bad
Jedi.prototype = {
  fight: function fight() {
    console.log('fighting');
  },

  block: function block() {
    console.log('blocking');
  }
};

// good
Jedi.prototype.fight = function fight() {
  console.log('fighting');
};

Jedi.prototype.block = function block() {
  console.log('blocking');
};

function Jedi() {

console.log('new jedi');

}

// bad

Jedi.prototype = {

fight: function fight() {

console.log('fighting');

block: function block() {

console.log('blocking');

}

};

// good

Jedi.prototype.fight = function fight() {

console.log('fighting');

};

Jedi.prototype.block = function block() {

console.log('blocking');

};

方法返回this有助於方法鏈

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

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

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

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

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

var luke = new Jedi();

luke.jump()
  .setHeight(20);

// bad

Jedi.prototype.jump = function() {

this.jumping = true;

return true;

};

Jedi.prototype.setHeight = function(height) {

this.height = height;

};

var luke = new Jedi();

luke.jump(); // => true

luke.setHeight(20); // => undefined

// good

Jedi.prototype.jump = function() {

this.jumping = true;

return this;

};

Jedi.prototype.setHeight = function(height) {

this.height = height;

return this;

};

var luke = new Jedi();

luke.jump()

.setHeight(20);

可以重寫常規的toString()方法。但必須保證可以成功執行並沒有別的影響

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

Jedi.prototype.getName = function getName() {
  return this.name;
};

Jedi.prototype.toString = function toString() {
  return 'Jedi - ' + this.getName();
};

function Jedi(options) {

options || (options = {});

this.name = options.name || 'no name';

}

Jedi.prototype.getName = function getName() {

return this.name;

};

Jedi.prototype.toString = function toString() {

return 'Jedi - ' + this.getName();

};

將為事件載入資料時（不管是DOM事件還是其他專用事件的，比如Backbone事件）用雜湊表來取代原始值。因為這將允許後續新增更多的資料載入事件而不用更新每個事件的處理程式。例如：

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

...

$(this).on('listingUpdated', function(e, listingId) {
  // do something with listingId
});

// bad

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

...

$(this).on('listingUpdated', function(e, listingId) {

// do something with listingId

});

更好的方式：

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

...

$(this).on('listingUpdated', function(e, data) {
  // do something with data.listingId
});

// good

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

...

$(this).on('listingUpdated', function(e, data) {

// do something with data.listingId

});

模組

模組應該以 “！”開始，以確保當模組忘記包含最後一個分號時，在指令碼連線時不會報錯。
文件需要用駝峰法命名，同一檔案內要用一樣的名字以及要與單個輸出相匹配。
增加一個叫noConflict()的方法，使模組輸出早期版本並返回。
在模組開始的部位宣告'use strict'。

// fancyInput/fancyInput.js

!function(global) {
  'use strict';

  var previousFancyInput = global.FancyInput;

  function FancyInput(options) {
    this.options = options || {};
  }

  FancyInput.noConflict = function noConflict() {
    global.FancyInput = previousFancyInput;
    return FancyInput;
  };

  global.FancyInput = FancyInput;
}(this);

// fancyInput/fancyInput.js

!function(global) {

'use strict';

var previousFancyInput = global.FancyInput;

function FancyInput(options) {

this.options = options || {};

}

FancyInput.noConflict = function noConflict() {

global.FancyInput = previousFancyInput;

return FancyInput;

};

global.FancyInput = FancyInput;

}(this);

jQuery

JQuery物件變數字首使用$
JavaScript

// bad var sidebar = $('.sidebar'); // good var $sidebar = $('.sidebar');

1
2
3
4
5

// bad
var sidebar = $('.sidebar');

// good
var $sidebar = $('.sidebar');
jQuery快取查詢

// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...stuff...

  $('.sidebar').css({
    'background-color': 'pink'
  });
}

// good
function setSidebar() {
  var $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...stuff...

  $sidebar.css({
    'background-color': 'pink'
  });
}

// bad

function setSidebar() {

$('.sidebar').hide();

// ...stuff...

$('.sidebar').css({

'background-color': 'pink'

});

}

// good

function setSidebar() {

var $sidebar = $('.sidebar');

$sidebar.hide();

// ...stuff...

$sidebar.css({

'background-color': 'pink'

});

}

在DOM查詢中使用層疊樣式 $('.sidebar ul')或parent > child $('.sidebar > ul'). jsPerf

使用find來查詢jQuery物件

// bad
$('ul', '.sidebar').hide();

// bad
$('.sidebar').find('ul').hide();

// good
$('.sidebar ul').hide();

// good
$('.sidebar > ul').hide();

// good
$sidebar.find('ul').hide();

// bad

$('ul', '.sidebar').hide();

// bad

$('.sidebar').find('ul').hide();

// good

$('.sidebar ul').hide();

// good

$('.sidebar > ul').hide();

// good

$sidebar.find('ul').hide();

前端程式碼規範 — JavaScript 風格指南
2019-08-22
前端JavaScript
JavaScript編碼風格指南
2019-02-24
JavaScript
JavaScript 編碼風格指南
2018-07-24
JavaScript
PHP編碼風格規範
2019-08-02
PHP
Airbnb JavaScript程式碼規範（完整）
2021-03-09
AIJavaScript
談談編碼風格與規範
2018-10-26
Go 語言程式碼風格規範-指南篇
2022-12-26
Go
Javascript編碼規範
2020-02-14
JavaScript
Google JavaScript 程式碼風格指南
2018-10-24
GoJavaScript
談談JavaScript編碼風格
2019-04-10
JavaScript
Google JavaScript 風格指南
2020-12-30
GoJavaScript
優步公司的Go語言編寫風格指南
2019-10-12
Go
求求你規範下你的程式碼風格
2019-01-24
統一規範化程式碼的命名風格
2023-05-10
Go 語言程式碼風格規範-概述篇
2022-12-26
Go
JavaScript編碼指南
2018-08-16
JavaScript
PEP 8 程式程式碼的編寫風格指南
2019-12-24
Vue專案使用eslint + prettier規範程式碼風格
2018-08-19
VueEsLint
擴充套件01：程式碼風格/python規範style
2024-12-05
套件Python
程式碼規範之前端編寫碼規範
2020-10-20
前端
stylus編碼規範
2018-09-25
html編碼規範
2020-02-14
HTML
Pear 編碼規範
2020-02-14
CSS編碼規範
2020-02-14
CSS
python編碼規範
2021-09-09
Python
.Net Core 編碼規範
2018-07-25
前端安全編碼規範
2020-11-03
前端
WEB前端編碼規範
2019-02-15
Web前端
常見編碼規範
2023-02-02
.Net編碼規範整理
2020-12-05
JavaScript寫程式碼要規範
2020-11-08
JavaScript
Vue 前端程式碼風格指南
2021-12-17
Vue前端
前端規範之javascript規範
2019-06-25
前端JavaScript
HTML編碼規範建議
2019-02-16
HTML
前端開發編碼規範
2018-12-13
前端
Java語言編碼規範
2020-04-06
Java
【翻譯】Python PEP8編碼規範（中文版）
2021-02-25
Python
統一規範化專案的命名風格
2023-05-09
Python 編碼風格參考
2019-02-16
Python

JavaScript 風格指南/編碼規範（Airbnb公司版）

物件

陣列

字串

函式

屬性

變數

提升

條件表示式和相等

塊

註釋

空格

逗號

分號

轉型&強制

命名規則

訪問器

構造器

模組

jQuery

相關文章