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

Airbnb 是一家位于美国旧金山的公司，本文是其内部的 JavaScript 风格指南/编码规范，在 Github 上有 11,000+ Star，2100+ fork，前端开发者可参考。

基本类型

• 当你访问基本类型时，你是直接对它的值进行操作。

• string
• number
• boolean
• null
• undefined

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

对象

• 使用字面量语法来创建对象

// badvar item = new Object(); // goodvar item = {};

• 不要使用保留字作为“键值”，因为在IE8不能运行。More info

// badvar superman = {  default: { clark: 'kent' },  private: true}; // goodvar superman = {  defaults: { clark: 'kent' },  hidden: true};

• 使用容易理解的同义词来替代保留字

// badvar superman = {  class: 'alien'}; // badvar superman = {  klass: 'alien'}; // goodvar superman = {  type: 'alien'};

• 数组

• 使用字面量语法来创建数组

// badvar items = new Array(); // goodvar items = [];

• 如果你不知道数组长度，数组添加成员使用push方法。

var someStack = []; // badsomeStack[someStack.length] = 'abracadabra'; // goodsomeStack.push('abracadabra');

• 当你需要复制一个数组时，使用数组的slice方法。jsPerf

var len = items.length,    itemsCopy = [],    i; // badfor (i = 0; i < len; i++) {  itemsCopy[i] = items[i];} // gooditemsCopy = items.slice();

• 当你需要把“类似数组对象”转为数组时，使用数组的slice方法。

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

• 字符串

• 字符串使用单引号‘’

// badvar name = "Bob Parr"; // goodvar name = 'Bob Parr'; // badvar fullName = "Bob " + this.lastName; // goodvar fullName = 'Bob ' + this.lastName;

• 大于80个元素的字符串需要通过分隔符进行多行操作。
• 注意：如果在长字符串中过度使用分隔符会影响性能。. jsPerf & Discussion

// badvar 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.'; // badvar errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to dowith this, you would get nowhere fast.'; // goodvar 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; // badfunction inbox(messages) {  items = '<ul>';   for (i = 0; i < length; i++) {    items += '<li>' + messages[i].message + '</li>';  }   return items + '</ul>';} // goodfunction 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 expressionvar anonymous = function() {  return true;}; // named function expressionvar 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

// badif (currentUser) {  function test() {    console.log('Nope.');  }} // goodvar test;if (currentUser) {  test = function test() {    console.log('Yup.');  };}

• 不要将参数命名为arguments，它将在每个函数的作用范围内优先于arguments对象。

// badfunction nope(name, options, arguments) {  // ...stuff...} // goodfunction yup(name, options, args) {  // ...stuff...}

• 属性

• 使用点符号 . 来访问属性

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

• 当你在变量中访问属性时，使用[ ]符号

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

• 变量

• 使用var来声明变量，否则将声明全局变量，我们需要尽量避免污染全局命名空间，Captain Planet这样警告过我们。

// badsuperPower = new SuperPower(); // goodvar superPower = new SuperPower();

• 多个变量时只使用一个var声明，每个变量占一新行。

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

• 最后再声明未赋值的变量，这对你之后需要依赖之前变量的变量赋值会有帮助。

// badvar i, len, dragonball,    items = getItems(),    goSportsTeam = true; // badvar i, items = getItems(),    dragonball,    goSportsTeam = true,    len; // goodvar items = getItems(),    goSportsTeam = true,    dragonball,    length,    i;

• 在范围内将变量赋值置顶，这有助于避免变量声明和赋值提升相关的问题

// badfunction() {  test();  console.log('doing stuff..');   //..other stuff..   var name = getName();   if (name === 'test') {    return false;  }   return name;} // goodfunction() {  var name = getName();   test();  console.log('doing stuff..');   //..other stuff..   if (name === 'test') {    return false;  }   return name;} // badfunction() {  var name = getName();   if (!arguments.length) {    return false;  }   return true;} // goodfunction() {  if (!arguments.length) {    return false;  }   var name = getName();   return true;}

来源 http://blog.jobbole.com/79484/