基于对参考文档进行整理,方便读者参照,有建议之处,欢迎留言。
无论有多少人在维护,所有在代码仓库中的代码理应看起来像同一个人写的。
注:使用一个 var 打头申明一组变量,是最有效率的。
var items = getItems(),
goSportsTeam = true,
dragonball = 'z';
function() {
var name = getName();
test();
console.log('doing stuff..');
//..other stuff..
if (name === 'test') {
return false;
}
return name;
}
var name = 'Bob Parr';
var fullName = 'Bob ' + this.lastName;
注:如果过度使用连接符,长字符串拼接会有性能问题。
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.';
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;
function inbox(messages) {
items = [];
for (i = 0; i < length; i++) {
items[i] = '<li>' + messages[i].message + '</li>';
}
return '<ul>' + items.join('') + '</ul>';
}
var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];
var someStack = [];
someStack.push('abracadabra');
var len = items.length;
var itemsCopy = [];
var i;
itemsCopy = items.slice();
// 匿名 function 表达式
var anonymous = function() {
return true;
};
// 命名 function 表达式
var named = function named() {
return true;
};
// 立即执行 function 表达式
(function() {
console.log('Welcome to the Internet. Please follow me.');
})();
注:绝对不要在“非功能”块中申明方法(如,if、while等),而是通过将方法赋值给一个变量实现。
var test;
if (currentUser) {
test = function test() {
console.log('Yup.');
};
}
绝对不用使用arguments作为方法的参数名。它会高优先级的覆盖掉每个方法中默认都有的arguments对象。
// bad
function nope(name, options, arguments) {
// ...stuff...
}
// good
function yup(name, options, args) {
// ...stuff...
}
使用锯齿状缩进将函数连分割成多行,并以 . 开头,以强调只是针对一个函数的调用,而不是一个新的语句。
('#items')
.find('.selected')
.highlight()
.end()
.find('.open')
.updateCount();
var leds = stage.selectAll('.led')
.data(data)
.enter().append('svg:svg')
.classed('led', true)
.attr('width', (radius + margin) * 2)
.append('svg:g')
.attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
.call(tron.led);
var item = {};
var item2 = {
a: 0,
b: 1,
c: 2,
'strange key': 3
};
注:不要使用保留关键字作为key,IE8中会报错。
// bad
var superman = {
default: { clark: 'kent' },
private: true
};
// good
var superman = {
defaults: { clark: 'kent' },
hidden: true
};
使用可辨识的同义词替换保留关键词
// bad
var superman = {
class: 'alien'
};
// good
var superman = {
type: 'alien'
};
###(1)访问对象属性
var luke = {
jedi: true,
age: 28
};
var isJedi = luke.jedi;//使用 . 访问对象的属性
当属性名放在一个变量中时,使用下标 [] 的形式访问属性
var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');
(1) 优先使用 === 和 !== 替换 == 和 !=
if条件判断语句,会遵循下面简单的规则,将表达式转换为布尔型的值:
if ([0]) {
// true
// Objects 等价于 true,数组也是对象
}
(2)短判断
// bad
if (name !== '') {
// ...stuff...
}
// good
if (name) {
// ...stuff...
}
// bad
if (collection.length > 0) {
// ...stuff...
}
// good
if (collection.length) {
// ...stuff...
}
if (test) return false;
如果使用多行的if、else语句,else 应该跟在前一个 if 代码块的 } 后面。
if (test) {
thing1();
thing2();
} else {
thing3();
}
var i,
length = 100;
for ( i = 0; i < length; i++ ) {
// 语句
}
var prop;
for ( prop in object ) {
// 语句
}
在每个代码块后面保留一个空行,然后再写后面的语句。
var obj = {
foo: function() {
},
bar: function() {
}
};
return obj;
/** … */注释内容包括描述,所有参数、返回值的具体类型和值.
sublime 下载 DocBlockr插件,帮助你创造你的代码注释
/**
* make() returns a new element
* based on the passed in tag name
*
* @param {String} tag
* @return {Element} element
*/
function make(tag) {
// ...stuff...
return element;
}
使用 javascript// 进行单行注释。注释时,在需要注释的语句上面新起一行,并在注释的上面保留一行空行。
// good
// is current tab
var active = true;
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
var type = this._type || 'no type';
return type;
}
使用前缀 FIXME 和 TODO 标注注释,方便开发人员快速理解需要解决的问题,或着提出解决的建议。
// 使用 FIXME 标注一个问题
function Calculator() {
// FIXME: shouldn't use a global here
total = 0;
return this;
}
// 使用 TODO 标注问题的解决方案
function Calculator() {
// TODO: total should be configurable by an options param
this.total = 0;
return this;
}
(1)永远都不要混用空格和Tab;
(2)编辑中设置两个空格代替Tab;
(3)在 { 前放着一个空格;
(4)在 if 、while等语句的 ( 前放置一个空格。
(5)用空格将操作符隔开
var x = y + 5;
需要在每个语句结束的时候都添加分号。
(function() {
var name = 'Skywalker';
return name;
})();
使用parseInt转换成数字是需要标注出进制;
var inputValue = '4';
var val = Number(inputValue);
//or
var val = parseInt(inputValue, 10);
var age = 0;
var hasAge = Boolean(age);
//or
var hasAge = !!age;
(1) 避免使用单个字母进行命名。尽量描述清楚你的命名;
(2)使用全字母大写,下划线分隔的方式命名不变量。不要使用 const 关键词命名常量,ie不支持。
var MD5_key = 'ya23adfuodf4sd';
(3)使用驼峰命名法(camelCase),命名你的对象、方法和实例
var thisIsMyObject = {};
function thisIsMyFunction() {}
(4) 正则表达式变量使用 r 作为前缀
rNumber = /(\d)+/;
(5)使用帕斯卡命名法(PascalCase),命名你的构造函数或类
function User(options) {
this.name = options.name;
}
var good = new User({
name: 'yup'
});
(6)用下划线打头命名私有属性
this._firstName = 'Panda';
(7)用 _this 保存 this 的引用
function() {
var _this = this;
return function() {
console.log(_this);
};
}
var $sidebar = $('.sidebar');
闭包会在它封闭的作用域中保存变量引用。其结果是,附带着会创建DOM对象的循环引用,从而产生内存泄露。 例如下面的代码:
// bad
function foo(element, a, b) {
element.onclick = function() { /* uses a and b */ };
}
在这个匿名方法中,闭包保存了element、a和b的引用,即使它不会用到element。我们构建了一个闭环,导致不会被垃圾清理回收。 在这种情况下,可以做如下重构:
// good
function foo(element, a, b) {
element.onclick = bar(a, b);
}
function bar(a, b) {
return function() { /* uses a and b */ };
}
尽量避免使用delete删除键
// bad
Foo.prototype.dispose = function() {
delete this.property_;
};
// good
Foo.prototype.dispose = function() {
this.property_ = null;
};
{
"name": "Alice",
"id": 31502,
"email": "looking_glass@example.com"
}
var userInfo = JSON.parse(feed);
var email = userInfo['email'];
使用with语句速度要比不使用with语句的等价代码的速度慢得多,90%(或者更高比例)的with应用场景都可以用其他更好的方式代替。