javascript代码风格
记录学习javascript代码风格
引用文章:
https://github.com/adamlu/javascript-style-guide
https://github.com/airbnb/javascript
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); ... }
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';
当命名对象、函数和实例时使用驼峰命名规则