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

• 命名規則

• 不要使用一個字母命名，而應該用單詞描述

// 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
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
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
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’)

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

也可以使用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() {
  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);

• 可以重寫常規的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();
};

• 將爲事件加載數據時（不管是DOM事件還是其他專用事件的，比如Backbone事件）用散列表來取代原始值。因爲這將允許後續添加更多的數據載入事件而不用更新每個事件的處理程序。例如：

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

• 模塊應該以 “！”開始，以確保當模塊忘記包含最後一個分號時，在腳本連接時不會報錯。
• 文檔需要用駝峯法命名，同一文件內要用一樣的名字以及要與單個輸出相匹配。
• 增加一個叫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);

jQuery

• JQuery對象變量前綴使用$

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

• 在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();

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