JS的编码风格

来自Airbnb JavaScript Style Guide的学习：

1.命名应具备描述性

// bad
function a(){
    alert('hello');
}

// good
function sayHello(){
    alert('hello');
}

2.使用驼峰式命名对象、函数和实例

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

// good
var thisIsMyObject = {};
function thisIsMyFunction() {}

3.使用帕斯卡式命名(大驼峰命名)构造函数或类

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

4.不要使用下划线前/后缀（因为JavaScript 并没有私有属性或私有方法的概念。虽然使用下划线是表示「私有」的一种共识，但实际上这些属性是完全公开的，它本身就是你公共接口的一部分。这种习惯或许会导致开发者错误的认为改动它不会造成破坏或者不需要去测试。长话短说：如果你想要某处为「私有」，它必须不能是显式提出的。）

//bad
this.__firstName__ = 'Jack';
this.__firstName = 'Jack';
this._firstName = 'Jack';
this.firstName_ = 'Jack';

//good
this.firstName = 'Jack';

5.不要保存 this 的引用。使用 Function#bind

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

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

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

// good
function () {
  return function () {
    console.log(this);
  }.bind(this);
}

6.给函数命名。这在做堆栈轨迹时很有帮助(不过IE8 及以下版本对命名函数表达式的处理有些怪异。)

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

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

7.如果你的文件导出一个类，你的文件名应该与类名完全相同。

// file contents
class CheckBox {
// ...
}
module.exports = CheckBox;

// in some other file
// bad
var CheckBox = require('./checkBox');

// bad
var CheckBox = require('./check_box');

// good
var CheckBox = require('./CheckBox');

 8.1存取器（属性的存取函数不是必须的）

如果你需要存取函数时使用 getVal() 和 setVal('hello')。

// bad
dragon.age();

// good
dragon.getAge();

// bad
dragon.age(25);

// good
dragon.setAge(25);

8.2如果属性是布尔值，使用 isVal() 或 hasVal()。

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

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

8.3创建 get() 和 set() 函数是可以的，但要保持一致。

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

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

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

9.1使用 $ 作为存储 jQuery 对象的变量名前缀。

//bad
var content = $('#content');
//good
var $content = $('#content');

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

9.3对 DOM 查询使用层叠 $('.sidebar ul') 或 父元素 > 子元素 $('.sidebar > ul')

9.4对有作用域的 jQuery 对象查询使用 find

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

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

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

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

10.1使用直接量创建数组

// bad
var items = new Array();

// good
var items = [];

10.2向数组增加元素时使用 Array#push 来替代直接赋值

var someStack = []; //console.log(someStack.length); // 0

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

// good
someStack.push('Jack');

10.3当你需要拷贝数组时，使用 Array#slice

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

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

// good
itemsCopy = items.slice();

11.1使用单引号 '' 包裹字符串

// bad
var name = "Jack";
// bad
var introduce = "My name is " + name;
// good
var name = 'Jack';
// good
var introduce = 'My name is ' + name;

11.2超过 100 个字符的字符串应该使用连接符写成多行(注：若过度使用，通过连接符连接的长字符串可能会影响性能)

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

11.3程序化生成的字符串使用 Array#join 连接而不是使用连接符。尤其是 IE 下

var items;
var messages;
var length;
var 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++) {
    // use direct assignment in this case because we're micro-optimizing.(最佳化)
    items[i] = '<li>' + messages[i].message + '</li>';
  }

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

12.1总是使用 var 来声明变量。不这么做将导致产生全局变量。我们要避免污染全局命名空间(比如：var num = 1；

是在当前域中声明变量. 如果在方法中声明，则为局部变量（local variable）；如果是在全局域中声明，则为全局变量。

而 num = 1；事实上是对属性赋值操作。首先，它会尝试在当前作用域链（如在方法中声明，则当前作用域链代表全局作用域和方法局部作用域etc。。。）中解析 num； 如果在任何当前作用域链中找到num，则会执行对num属性赋值； 如果没有找到num，它才会在全局对象（即当前作用域链的最顶层对象，如window对象）中创造num属性并赋值。

注意！它并不是声明了一个全局变量，而是创建了一个全局对象的属性。

var num = 1 跟 num = 1，前者是变量声明，带不可删除属性，因此无法被删除；后者为全局变量的一个属性，因此可以从全局变量中删除。)

// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();

12.2使用 var 声明每一个变量。 这样做的好处是增加新变量将变的更加容易，而且你永远不用再担心调换错 ; 跟 ,。

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

// bad
// （跟上面的代码比较一下，看看哪里错了）
var items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

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

12.3最后再声明未赋值的变量。当你需要引用前面的变量赋值时这将变的很有用

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

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

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

 13.比较运算符&等号

 13.1优先使用 === 和 !== 而不是 == 和 !=.

 13.2条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则：

1.对象 被计算为 true
2.Undefined 被计算为 false
3.Null 被计算为 false
4.布尔值 被计算为 布尔的值
5.数字 如果是 +0、-0 或 NaN 被计算为 false，否则为 true
6.字符串 如果是空字符串 '' 被计算为 false，否则为 true

if ([0]) {
  // true
  // 一个数组就是一个对象，对象被计算为 true
}

var c;
if(c){
  // false
  // Undefined 被计算为false
}

//快捷方式
// bad
if (name !== '') {
  // ...stuff...
}

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

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

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

14.1使用两个空格作为缩进

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

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

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

14.1在大括号前放一个空格

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

14.2在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。

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

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

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

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

14.3使用空格把运算符隔开。

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

15.1类型转换布尔

ar age = 0;

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

// good
var hasAge = Boolean(age);

// good
var hasAge = !!age;

15.2使用 parseInt 转换数字时总是带上类型转换的基数。

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