浅谈js代码规范

　　

　　要放假了  后天就可以 回家，心里很高兴，忙里偷闲写篇博客吧！！！！

　　声明：这是我自己总结的，如果有不对的地方请大家不要较真

　　　　

　

一 、变量声明

对所有的变量声明，我们都应该指定var，如果没有指定var，在严格模式下会报错，并且同一个作用域内的变量应该尽量采用一个var去声明，多个变量用“,”隔开。

　　不推荐

function myFun(){
    x=5;
    y=10;
}

　　不完全推荐

function myFun(){
    var x=5;
    var y=10;
}

　　推荐

function myFun(){
    var x=5,
        y=10;
}

二、使用带类型判断的比较判断

总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。

如果你使用 === 操作符，那比较的双方必须是同一类型为前提的条件下才会有效。

不推荐
(function(w){
  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));

推荐
(function(w){
  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));

三、变量赋值时的逻辑操作

　　逻辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象，那每个表达式将会被自左向右地做真假判断。基于此操作，最终总有一个表达式被返回回来。这在变量赋值时，是可以用来简化你的代码的。

//不推荐
if(!x) {
  if(!y) {
    x = 1;
  } else {
    x = y;
  }
}

//推荐
x = x || y || 1;

四、分号

　　总是使用分号，因为隐式的代码嵌套会引发难以察觉的问题。当然我们更要从根本上来杜绝这些问题[1] 。以下几个示例展示了缺少分号的危害：

// 1.
MyClass.prototype.myMethod = function() {
  return 42;
}  //这里没有分号
(function() {
})();
 //2.
var x = {
  'i': 1,
  'j': 2
}  // 这里没有分号

 // 3.
var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // 这里没有分号
-1 == resultOfOperation() || die();

错误结果

1. 1. JavaScript 错误 —— 首先返回 42 的那个 function 被第二个function 当中参数传入调用，接着数字 42 也被“调用”而导致出错。

2. 2. 八成你会得到 ‘no such property in undefined’ 的错误提示，因为在真实环境中的调用是这个样子：xffVersion, ieVersion().

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

五、语句块内的函数声明

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

//不推荐

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

//推荐

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

六、数组和对象字面量

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

八、重复的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');

　　这些都是我一年来的总结，有不对的地方还请指点一二