js编程风格

框架能够让我们跑的更快,但只有了解原生的JS才能让我们走的更远。

1.单一var

这条规则的意思是,把函数内部的所有变量,放到顶部声明。比如:

1
2
3
4
5
6
//示例
function A(){
var a = 1,
b = 2,
c = a + b ;
}

优点:

  • 便于查找函数内部使用的局部变量
  • 防止变量未定义时就被使用
  • 防止变量声明提升后引发的误解   关于第三点,这里举个例子说明:
1
2
3
4
5
6
7
var x = 1;

(function () {
console.log(x);//第一处输出 ,注意结果
var x = 2;
console.log(x);//第二处输出 2,没问题
})();

从代码上看,第二处输出肯定没问题,可能会有人认为第一处输出的是1,因为此时在函数内部还没声明变量x,根据作用域链,向外层查找的话,x值为1。但是实际输出的值应该是undefined,因为js允许在函数任何地方声明变量,并且无论在哪里声明都等同于在顶部声明,这就是声明提升。所以上面的代码相当于:

1
2
3
4
5
6
7
8
9
  var x = 1;

(function () {
var x;
console.log(x);//此时已声明 未赋值
x = 2; //赋值
console.log(x);
})();
}

为了避免可能出现的问题,不如把变量声明都放在代码块的头部。

注意:所有变量声明都放在函数的头部;所有函数都在使用之前定义。

2.全局变量大写

Javascript最大的语法缺点,可能就是全局变量对于任何一个代码块,都是可读可写。这对代码的模块化和重复使用,非常不利。

避免使用全局变量;如果不得不使用,用大写字母表示变量名,比如UPPER_CASE

3.严格相等

Javascript有两个表示”相等”的运算符:”相等”(==)和”严格相等”(===),使用==有可能促使类型转换,建议主加===

1
2
3
4
5
6
1 == '1'; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == false; // true

你有什么理由不用我?

1
2
console.log(""===''); // true
`

4.for循环缓存length

使用for循环时,缓存长度值通常用使用for循环遍历数组时,会采用以下写法:

1
2
3
4
for(var i = 0;i<arr.length;i++){
// 具体操作
}
`

这段代码存在的问题在于,在循环的每个迭代步骤,都必须访问一次arr的长度。如果arr是静态数值还好,但是我们在使用js时可能会碰到arr是dom元素对象,由于dom对象载页面下是活动的查询,这个长度查询就相当耗时,//用len缓存长度值

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

按照上面的代码,我们在第一次获取长度值时就缓存这个长度值,就可以避免上述问题。

5.模块化

拒绝全局function到底,引入模块模式 

1
2
3
4
5
6
7
8
9
10
var s = 20;
function test(s){
}
function go(){
test(s);
$.ajax({})
}
$('#test').click(function(){
go();
})

base module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var index = {
init(){

},
datas(){

},
bind(){
var y = this;
y.btn = $('#test');
},
render(){
var y = this;
$.proxy(y.btn,'click',func,this);
},
func(){

}
}
index.init();
module.exports = index;

6.优化if…else嵌套

三元

1
2
3
if (foo) bar(); else baz(); ==> foo?bar():baz(); 
if (!foo) bar(); else baz(); ==> foo?baz():bar();
if (foo) return bar(); else return baz(); ==> return foo?bar():baz();

&& 和 ||

1
2
if (foo) bar(); ==> foo&&bar(); 
if (!foo) bar(); ==> foo||bar();

参考