【转】JavaScript常因此代码书写规范

javascript 代码规范

代码规范我们应该仍古老的尺度:“能召开并无代表当举行”。

大局命名空间污染

连天以代码包裹于一个即的函数表达式里面,形成一个独立的模块。

不推荐

1
2
3
var x = 10,
    y = 100;
console.log(window.x + ' ' + window.y);

推荐

1
2
3
4
5
6
;(function(window){
    'use strict';
    var x = 10,
        y = 100;
    console.log(window.x + ' ' + window.y);
}(window));

立马执行函数

立刻施行函数内,如果产生因此到全局变量应该通过变量传递的主意,让立即施行函数的函数体在调用时,能坐有变量的花样调用,在肯定程度及晋级程序性能。

以该在眼看施行函数的展示参里加上undefined,在最终一个岗位,这是盖ES3里undefined是可读写的,如果在全局位置更改undefined的价值,你的代码可能得无顶过期的结果。

除此以外推荐以立刻执行函数始发跟结尾都加加上分号,避免在集合时因为别人的代码不规范而影响及我们温馨的代码

不推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function(){
    'use strict';
    var x = 10,
        y = 100,
        c,
        elem=$('body');
    console.log(window.x + ' ' + window.y);
    $(document).on('click',function(){
 
    });
    if(typeof c==='undefined'){
        //你的代码
    }
}());

推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
;(function($,window,document,undefined){
    'use strict';
    var x = 10,
        y = 100,
        c,
        elem=$('body');
    console.log(window.x + ' ' + window.y);
    $(document).on('click',function(){
 
    });
    if(typeof c==='undefined'){
        //你的代码
    }
}(jQuery,window,document));

严格模式

ECMAScript 5 严格模式可当所有脚本或独自个点子外为激活。它对诺不同的
javascript 语境会做越严格的荒唐检查。严格模式吗准保了 javascript
代码更加的状,运行的吗更便捷。

严格模式会阻止使用于未来异常可能吃引入的留关键字。

乃当于你的脚本中启用严格模式,最好是以单身的 立即执行函数
中动用它。避免在你的台本第一执以她使致你的具有脚论都启动了从严模式,这发生或会见吸引部分叔正类库的题目。

不推荐

1
2
3
4
'use strict';
(function(){
 
}());

推荐

1
2
3
(function(){
    'use strict';
}());

变量声明

对有的变量声明,我们且应有指定var,如果没点名var,在严厉模式下会报错,并且与一个作用域内之变量应该尽量使用一个var去声明,多只变量用“,”隔开。

不推荐

1
2
3
4
function myFun(){
    x=5;
    y=10;
}

未净推荐

1
2
3
4
function myFun(){
    var x=5;
    var y=10;
}

推荐

1
2
3
4
function myFun(){
    var x=5,
        y=10;
}

采用带来项目判断的比较判断

一连用 === 精确的可比操作符,避免在认清的长河被,由 JavaScript
的要挟类型转换所导致的赘。

如若您采取 ===
操作符,那比的两岸须是千篇一律类型也前提的规格下才见面使得。

不推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function(w){
  'use strict';
 
  w.console.log('0' == 0); // true
  w.console.log('' == false); // true
  w.console.log('1' == true); // true
  w.console.log(null == undefined); // true
 
  var x = {
    valueOf: function() {
      return 'X';
    }
  };
 
  w.console.log(x == 'X');//true
 
}(window.console.log));

推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function(w){
  'use strict';
 
  w.console.log('0' === 0); // false
  w.console.log('' === false); // false
  w.console.log('1' === true); // false
  w.console.log(null === undefined); // false
 
  var x = {
    valueOf: function() {
      return 'X';
    }
  };
 
  w.console.log(x === 'X');//false
 
}(window));

变量赋值时之逻辑操作

逻辑操作符 || 和 &&
也可是为用来回到布尔值。如果操作对象也非布尔目标,那每个表达式将会晤被起左望右侧地召开真假判断。基于此操作,最终总起一个表达式被归回来。这当变量赋值时,是得用来简化你的代码的。

不推荐

1
2
3
4
5
6
7
if(!x) {
  if(!y) {
    x = 1;
  } else {
    x = y;
  }
}

推荐

1
x = x || y || 1;

分号

老是以分号,因为隐式的代码嵌套会引发难以觉察的题材。当然我们又要从根本上来杜绝这些题目[1]
。以下几个示范展示了亏分号的迫害:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 1.
MyClass.prototype.myMethod = function() {
  return 42;
//这里没有分号
 
(function() {
 
})();
 
 //2.
var x = {
  'i': 1,
  'j': 2
// 这里没有分号
//我知道这样的代码你可能永远不会写,但是还是举一个例子
[ffVersion, ieVersion][isIE]();
 
 // 3.
var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // 这里没有分号
 
-1 == resultOfOperation() || die();

荒唐结果

  1. JavaScript 错误 —— 首先返回 42 的深 function 被第二单function
    当中参数传入调用,接着数字 42 也为“调用”而导致差。

  2. 八变为你见面取得 ‘no such property in undefined’
    的缪提示,因为于实环境被的调用是这个法:xffVersion,
    ieVersion().

  3. die 总是吃调用。因为数组减 1 的结果是 NaN,它不对等任何东西(无论
    resultOfOperation 是否返 NaN)。所以最后之结果是 die()
    执行完毕所获价值将授予给 THINGS_TO_EAT.

报句块内的函数声明

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

不推荐

1
2
3
if (x) {
  function foo() {}
}

推荐

1
2
3
if (x) {
  var foo = function() {};
}

不要动eval函数

eval()
不但混淆语境还大危险,总会生比马上再度好、更清、更安全的别样一样栽方案来形容你的代码,因此尽量不要动
eval 函数。

数组和目标字面量

1.用数组和目标字面量来代表数组和对象构造器。数建筑造器很易吃人口于她的参数达到犯错。

不推荐

1
2
3
4
5
6
7
8
9
10
//数组长度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();

正因如此,如果以代码传参从少只变为一个,那往往组好有或有意料不到的长短变化。为避免此类怪异状况,请总是利用可读的累累组字面量。

推荐

1
2
3
4
var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

2.对象构造器不见面发生相近之题目,但是为了可读性和统一性,我们应该使用对象字面量。

不推荐

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

推荐

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

大年初一条件判断(if 的长足方法)

因此三首操作符分配还是回到语句。在比较简单的景下采取,避免在千头万绪的事态下使用。没人愿意为此
10 行三元操作符把团结之脑绕晕。

不推荐

1
2
3
4
5
if(x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

推荐

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

for循环

动for循环过程遭到,数组的长度,使用一个变量来接纳,这样便于代码执行效率得到加强,而非是每走相同蹩脚巡回,都得重计算数组长度

不推荐

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

推荐

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

重复的dom操作

重的dom操作,使用一个变量来进展收好有必要,而无是累累之夺操作dom树,这对准性能和代码的整洁和易维护性带来不好的震慑

不推荐

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

推荐

1
2
3
4
5
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()

推荐

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

注解规范

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

不推荐

1
2
3
4
5
6
//获取订单
function getOrderByID(id){
    var order;
    //...
    return order;
}

主意的诠释应该统一用块级注释

推荐

1
2
3
4
5
6
7
8
9
10
/**
 * 根据订单id获取订单详细数据
 * @param  {[number]} id [订单ID]
 * @return {[order]}    [订单详细信息]
 */
function getOrderByID(id){
    var order;
    //...
    return order;
}