单一var模式
在介绍单一var模式之前,先聊聊代码优化,为下文做一个简单的铺垫
我认为作为一个程序员要有一个觉悟就是要拥抱变化,无论是技术的革新还是需求的变动,变化如流水,人也要 “随波逐流”,我们在完成一款软件的设计之后,需求的变化以及BUG是非常常见的事情,我们在解决这些问题的同时,其实是把大量的时间,投入到了重新学习和理解相应的问题 以及理解当时用于解决相应问题的代码 所以编写可维护的代码显得尤为重要
易于维护的代码有如下特性
- 阅读性好
- 具有一致性
- 预见性好
- 看起来如同是一个人编写
- 有文档
那么在javascript编程实际开发中,可以从如下角度去优化:
尽量少用全局变量
全局变量的问题在生存于同一个全局命名空间中,可能发生命名冲突,至于如何解决这种冲突,暂时不在本文的讨论范围内。
接下来我们开始 单一var模式
如下所示:
var a = 123,
b = "abc",
obj = {
},
i,
j;
//函数体 ···
使用一个var关键字声明由逗号分割的多个变量
这种只使用一个var 在函数顶部进行变量声明的模式有如下几点好处
- 提供一个单一的地址以查找到函数需要的所有的局部变量。
- 防止出现变量在定义之前就被使用的逻辑错误
- 帮助牢记要声明变量,以尽可能少地使用全局变量
- 更少的编码 ,无论是输入代码还是传输代码都更加少了
除了以上应用,我们还会有这样的应用场景
关于for循环的一个优化
首先我们来看这样一个案例,
要求使用原生js,给每个li绑定一个点击事件,输出他们的顺序
我们可以通过如下方法实现:
var li = document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
(function(i){
li[i].addEventListener('click',function(){
console.log(i);
},false)
}(i))
}
这里使用了立即执行函数解决了闭包问题 ,也可以通过 let 的方式声明 i 来解决
这样循环的问题在于:
每次循环迭代时,都要访问数据的长度,这样会使代码变慢,特别是当array不是数据,而是HTML容器对象时
我们可以通过如下方式优化
var li = document.getElementsByTagName('li');
for (var i = 0 ,max = li.length; i < max; i++) {
(function(i){
li[i].addEventListener('click',function(){
console.log(i);
},false)
}(i))
}
在这个代码中,我们将已经遍历过得数组(或容器)的长度缓存下来
这种方式下,对长度的值只提取一次,但是可以应用在整个循环中。
《javascript模式》一书中,不难看出此方法可以大大提高速度。
对于循环还有一个改进就是, 使用 i++
代替
i = i +1
i += 1
这是一个很显而易见的方法,就不在叙述了。