JavaScript常用代码书写规范的超全面总结(2)

3.die 总是被调用。因为数组减 1 的结果是 NaN,它不等于任何东西(无论 resultOfOperation 是否返回 NaN)。所以最终的结果是 die() 执行完所获得值将赋给 THINGS_TO_EAT.

八、语句块内的函数声明

切勿在语句块内声明函数,在 ECMAScript 5 的严格模式下,这是不合法的。函数声明应该在作用域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

不推荐

if (x) { function foo() {} }

推荐

if (x) { var foo = function() {}; }

九、不要使用eval函数

eval() 不但混淆语境还很危险,总会有比这更好、更清晰、更安全的另一种方案来写你的代码,因此尽量不要使用 eval 函数。

十、数组和对象字面量

1.用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。

不推荐

//数组长度3 var a1 = new Array(x1, x2, x3); //数组长度2 var a2 = new Array(x1, x2); //如果x1是一个自然数,那么它的长度将为x1 //如果x1不是一个自然数,那么它的长度将为1 var a3 = new Array(x1); var a4 = new Array();

正因如此,如果将代码传参从两个变为一个,那数组很有可能发生意料不到的长度变化。为避免此类怪异状况,请总是采用可读的数组字面量。

推荐

var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 = [x1]; var a4 = [];

2.对象构造器不会有类似的问题,但是为了可读性和统一性,我们应该使用对象字面量。

不推荐

var o = new Object(); var o2 = new Object(); o2.a = 0; o2.b = 1; o2.c = 2; o2['strange key'] = 3;

推荐

var o = {}; var o2 = { a: 0, b: 1, c: 2, 'strange key': 3 };

十一、三元条件判断(if 的快捷方法)

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

不推荐

if(x === 10) { return 'valid'; } else { return 'invalid'; }

推荐

return x === 10 ? 'valid' : 'invalid';

十二、for循环

使用for循环过程中,数组的长度,使用一个变量来接收,这样有利于代码执行效率得到提高,而不是每走一次循环,都得重新计算数组长度

不推荐

for(var i=0;i<arr.length,i++){ }

推荐

for(var i=0,len=arr.length;i<len,i++){ }

十三、重复的dom操作

重复的dom操作,使用一个变量来进行接收很有必要,而不是频繁的去操作dom树,这对性能与代码的整洁及易维护性带来不好的影响

不推荐

$('.myDiv').find('.span1').text('1'); $('.myDiv').find('.span2').text('2'); $('.myDiv').find('.span3').text('3'); $('.myDiv').find('.span4').text('4');

推荐

var mydiv=$('.myDiv'); mydiv.find('.span1').text('1'); mydiv.find('.span2').text('2'); mydiv.find('.span3').text('3'); mydiv.find('.span4').text('4');

在jquery .end()可使用的情况下应该优先使用.end()

推荐

$('.myDiv').find('.span1').text('1') .end().find('.span2').text('2'); .end().find('.span3').text('3'); .end().find('.span4').text('4');

十四、注释规范

在描写注释时,推荐格式化且统一的注释风格,在写注释时尽量描述写代码时的思路,而不是代码做了什么。

不推荐

//获取订单 function getOrderByID(id){ var order; //... return order; }

方法的注释应该统一用块级注释

推荐

/** * 根据订单id获取订单详细数据 * @param {[number]} id [订单ID] * @return {[order]} [订单详细信息] */ function getOrderByID(id){ var order; //... return order; }

总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjpgs.html