单一var模式以及for循环的小优化(阅读《javascript模式》笔记)

本文探讨了单一var模式在JavaScript编程中的应用,强调了代码的可维护性,包括阅读性、一致性和预见性。文章详细介绍了如何通过单一var模式减少全局变量的使用,避免变量在定义前使用,以及在for循环中优化数组长度访问,提高代码执行效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

单一var模式

在介绍单一var模式之前,先聊聊代码优化,为下文做一个简单的铺垫
我认为作为一个程序员要有一个觉悟就是要拥抱变化,无论是技术的革新还是需求的变动,变化如流水,人也要 “随波逐流”,我们在完成一款软件的设计之后,需求的变化以及BUG是非常常见的事情,我们在解决这些问题的同时,其实是把大量的时间,投入到了重新学习和理解相应的问题 以及理解当时用于解决相应问题的代码 所以编写可维护的代码显得尤为重要

易于维护的代码有如下特性

  1. 阅读性好
  2. 具有一致性
  3. 预见性好
  4. 看起来如同是一个人编写
  5. 有文档

那么在javascript编程实际开发中,可以从如下角度去优化:

尽量少用全局变量
全局变量的问题在生存于同一个全局命名空间中,可能发生命名冲突,至于如何解决这种冲突,暂时不在本文的讨论范围内。

接下来我们开始 单一var模式

如下所示:

	var a = 123,
			b = "abc",
			obj = {},
			i,
			j;
			//函数体 ···

使用一个var关键字声明由逗号分割的多个变量

这种只使用一个var 在函数顶部进行变量声明的模式有如下几点好处

  1. 提供一个单一的地址以查找到函数需要的所有的局部变量。
  2. 防止出现变量在定义之前就被使用的逻辑错误
  3. 帮助牢记要声明变量,以尽可能少地使用全局变量
  4. 更少的编码 ,无论是输入代码还是传输代码都更加少了

除了以上应用,我们还会有这样的应用场景

这里是引用

关于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

这是一个很显而易见的方法,就不在叙述了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值