javascript闭包的使用--按钮切换
闭包实现按钮状态切换
看下面的代码:
var toggleBtn = document.getElementById('toggle'); var toggleFun = (function() {
var checked = true; return function() {
var color = checked ? 'red' : 'white';
toggleBtn.style.backgroundColor = color;
checked = !checked;
};
})(); // 切换按钮
toggleBtn.addEventListener('click', toggleFun);
解释
上面的代码实现了点击按钮切换样式的功能,它用到了js的闭包特性。简单解释下:
toggleFun为一个立即执行函数,执行后toggleFun被赋值为内部函数:
toggleFun = function() {
color = checked ? 'red' : 'white';
toggleBtn.style.backgroundColor = color;
checked = !checked;
}
这个函数用到了外部函数的checked变量,这也是checked变量在立即执行函数执行完成后未被销毁的原因,因为还有其他地方用到了它。那么这个内部函数被用作事件监听器的回调函数,每点击一次就会被调用一次,从而可以通过更改checked的值来实现按钮切换效果。立即执行函数内的函数被全局下的toggleFun变量引用了,这就创建了一个闭包。
简而言之,闭包的作用就是在立即执行函数执行完并返回后,使得javascript的垃圾回收机制不会收回立即函数所占用的资源,因为立即执行函数的内部函数依赖立即执行函数中的变量。
额,上面写的太啰嗦了,下面把代码稍微改下,加些注释就会更加清晰:
var toggleBtn = document.getElementById('toggle'); var outerFun = function() {
var checked = true; // innerFun声明时用到了outerFun的局部变量
var innerFun = function() {
var color = checked ? 'red' : 'white';
toggleBtn.style.backgroundColor = color;
checked = !checked;
}; return innerFun;
}; var toggleFun = outerFun(); // toggleFun指向innerFun // 切换按钮,每次点击都会调用innerFun
toggleBtn.addEventListener('click', toggleFun);
不用闭包,用全局变量
其实不用闭包也能实现按钮切换,不过就得用到全局变量来存储按钮状态:
var toggleBtn = document.getElementById('toggle');
var checked = true; // 全局变量存储按钮状态 var toggleFun = function() {
var color = checked ? 'red' : 'white';
toggleBtn.style.backgroundColor = color;
checked = !checked;
}; toggleBtn.addEventListener('click', toggleFun);
但全局变量用多了会不好维护,代码不好控制。
这篇文章最初发表在我自己折腾的博客站点上:javascript闭包的使用--按钮切换,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛。
javascript闭包的使用--按钮切换的更多相关文章
- JavaScript强化教程 -- cocosjs场景切换
场景切换 在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...
- JavaScript 应用开发 #4:切换任务的完成状态
在勾选了任务项目左边的对号(复选框)以后,会将任务的状态标记为已完成,取消勾选的话,又会把任务的状态标记为未完成.所以, 我们需要一个可以切换任务完成状态的方法.在任务模型里面,表示任务状态的属性是 ...
- javascript——闭包
<script type="text/javascript"> //什么是闭包: //是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域 ...
- 原生javascript-图片按钮切换
原生javascript-图片按钮切换 即上次被分配写原生JS相册弹窗后,这次又接到了写原生JS,图片按钮切换,真激情: 个人在线实例:http://www.lgyweb.com/picSwitch/ ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- 我从来不理解JavaScript闭包,直到有人这样向我解释它...
摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ...
- 我从来不理解 JavaScript 闭包,直到有人这样向我解释它...
正如标题所述,JavaScript 闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识. 最近看国外的一些文章,终于,有人用于一种 ...
- JavaScript banner轮播 左右切换 圆点点击切换
1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- JavaScript ---- 闭包(什么是闭包,为什么使用闭包,闭包的作用)
经常被问到什么是闭包? 说实话闭包这个概念很难解释.JavaScript权威指南里有这么一段话:“JavaScript函数是将要执行的代码以及执行这些代码作用域构成的一个综合体.在计算机学术语里,这种 ...
随机推荐
- 【读书笔记】iOS-访问网络
iOS平台是按照一直有网络连接的思路来设计的,开发者利用这一特点创造了很多优秀的第三方应用.大多数的iOS应用都需要联网,甚至有些应用严重依赖网络,没有网络就无法正常工作. "在访问网络失败 ...
- Apex 的异常处理
Apex 中的异常处理 在 Apex 中,和其他语言类似,对于异常处理通常使用 try.catch.finally.throw 等关键字. 对于每一个 try 代码段,必须要有至少一个 catch 或 ...
- LeanCloud数据存储相关问题
1.短信验证码 当注册用户的时候,会发现收不到短信验证码,打印e : That operation isn't allowed for clients. 含义 - 该操作无法从客户端发起.请检查该错误 ...
- spring BeanFactory及ApplicationContext中Bean的生命周期
spring bean 的生命周期 spring BeanFactory及ApplicationContext在读取配置文件后.实例化bean前后.设置bean的属性前后这些点都可以通过实现接口添加我 ...
- (网页)web性能优化(转)
转自CSDN: Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行 ...
- 【Python】keras使用Lenet5识别mnist
原始论文中的网络结构如下图: keras生成的网络结构如下图: 代码如下: import numpy as np from keras.preprocessing import image from ...
- LazyMan深入解析和实现
一.题目介绍 以下是我copy自网上的面试题原文: 实现一个LazyMan,可以按照以下方式调用: LazyMan("Hank")输出: Hi! This is Hank! ...
- 洗礼灵魂,修炼python(29)--装饰器(1)—>利用经典案例解析装饰器概念
前提必备 不急着进入正题,在前面函数作用域那一章介绍了闭包,全局变量局部变量,这里再看几个简单的闭包案例: 1):不带参数 注意: 1.这里的name属性是每个函数都有的,可以反馈函数名 2.temp ...
- 在VS 一切正常,发布到IIS出现问题 [System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本]
在VS 一切正常,发布到IIS出现问题 [System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本] 前提条件: 在vs 开发的时候,一 ...
- [Compression] Hadoop 压缩
0. 说明 Hadoop 压缩介绍 && 压缩格式总结 && 压缩编解码器测试 1. 介绍 [文件压缩的好处] 文件压缩的好处如下: 减少存储文件所需要的磁盘空间 加速 ...