JavaScript 风格指南/编码规范（Airbnb公司版）二

• 提升

• 变量声明在范围内提升，但赋值并没有提升

// 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(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() {
  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

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...
}

• 更多的信息查看 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
// 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;
}

• 在你的注释加上FIXME或TODO的前缀可以帮助其他开发者迅速理解你指出的问题和需要的帮助，以及你建议需要完善的解决问题，这跟常规注释不一样因为其具有可行动性，FIXME——是需要解决的而TODO——是需要完善的
• 使用// FIXME: 来标记问题

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

• 使用 // TODO：给待解决问题进行标注

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

• 空格

• 使用tabs设置两个空格

// 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
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
$('#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'
};

• 不要使用多余的逗号，这在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
(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';

• 使用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);

• 如果出于某种原因你需要做些特别的事，而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;

• 注意：小心位移操作符，Numbers代表着64位的值，而位移操作符只能返回32位的整型，位移对于大于32位的整型的值会有不好的影响，32位最大的有符号整型是2,147,483,647。
• （有关讨论：Discussion）

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

• Booleans:

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