javascript代码风格

浏览数：16 / 时间：2015年06月09日

记录学习javascript代码风格

引用文章：

https://github.com/adamlu/javascript-style-guide

1. 使用字面值创建对象

var ite = {};

2. 不要使用保留字作为键

3. 使用字面值创建数组

var items=[];

4. 不知道数组的长度,用push

var stack=[];
stack.push(‘aaaa‘);

5. 需要拷贝数组时使用slice

var itemsCopy = items.slice();

6. 使用slice讲类数组的对象转成数组

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

7. 对字符串使用单引号‘‘

var fullName = ‘Bob Parr‘;

8.超过80个字符的字符串应该使用字符串连接换行

9. 编程时使用join而不是字符串连接来构建字符串

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

10. 函数表达式

// 匿名函数表达式
var anonymous = function() {
  return true;
};

// 有名函数表达式
var named = function named() {
  return true;
};

// 立即调用函数表达式
(function() {
  console.log(‘Welcome to the Internet. Please follow me.‘);
})();

11. 绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象.

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

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

12. 当使用变量访问属性时使用中括号

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

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

var isJedi = getProp(‘jedi‘);

13. 总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。

// good
var superPower = new SuperPower();

14. 使用一个 var 以及新行声明多个变量，缩进4个空格。

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

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

15. 最后再声明未赋值的变量，当以后你想给一个依赖之前已赋值变量的变量时很有用。

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

如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上 FIXME 或 TODO 帮助其他人迅速理解

function Calculator() {

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

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

在语句的开始执行类型转换.

//  => 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‘;