[JavaScript]使用闭包实现点击按钮切换 toggle
前言
- 我以往在实现点击按钮切换DOM元素样式的时候，使用的是在全局范围内定义一个flag变量，然后用true和false来对应不同的状态。
const btn = document.querySelector('#btn'); //获取按钮元素
let flag = false; //flag是全局变量
//事件监听绑定点击事件
btn.addEventListener('click',function(){
if(flag){
//状态1
}else{
//状态2
}
flag = !flag; //切换状态(通过修改flag的值：true或false)
});
//...如果代码量很多的话，我们可能在其他地方不小心使用着同样叫做flag的变量
flag = doSomethingToFlag(); //其他代码可能对flag的值进行了(意料之外的)修改 - 这个flag变量其实本意上只是用在按钮的点击事件上，但是flag位于全局范围内，其他代码都可以对flag的值进行修改，从而可能导致意料之外的情况发生。因此，使用全局变量表示不同状态是不可取的做法。
- 最近在学习闭包的概念，尝试着使用闭包实现点击按钮切换不同状态。
分析
- 使用闭包我们可以把表示状态的flag变成私有变量。
const btn = document.querySelector('#btn'); //获取按钮元素
function click(){
let flag = true; //这里的flag不再是全局变量
function closure(){
if(flag){
console.log('on'); //这里表示状态1
}else{
console.log('off'); //这里表示状态2
}
flag = !flag; //切换状态
}
return closure;
}
btn.addEventListener('click',click()); //绑定点击事件
console.log(flag); //报错：flag is not defined 我们在
click()closure()closure()flagclick()flag- 这里稍微对代码做一些改进，使其复用性更高，也就是封装
函数：toggle()
//toggle()函数接收一个按钮和两个函数：on()和off()；
//其中on()表示第1种状态要执行的内容,off()表示第2种状态要执行的内容
function toggle(btn, on, off) {
//使用闭包
function click() {
let flag = true;
function closure() {
if (flag) {
on();//这里执行状态1要执行的内容
} else {
off();//这里执行状态2要执行的内容
}
flag = !flag;
}
return closure;
}
//为按钮绑定点击事件
btn.addEventListener('click', click());
} - 将功能封装好后，就可以很方便的将toggle事件绑定到按钮上：
const btn = document.querySelectorAll('.btn'); //获取若干个按钮
for (let i = 0; i < btn.length; i++) {//使用for循环为这些按钮都绑定toggle事件
//toggle函数的三个参数分别是:按钮DOM元素、状态1要执行的内容、状态2要执行的内容
toggle(btn[i],
function on() {
//doSomething:这里填入状态1要执行的代码
},
function off() {
//doSomething:这里填入状态2要执行的代码
});
} - 经过测试可以发现，各个按钮对应的flag是独立的，互不干扰的。这是因为：
- 每一次绑定点击事件时，
函数内部的toggle()
函数占有一定内存空间，而函数调用后，内存被回收，click()
由于闭包的特性被保留下来；flag - 又因为每次调用
函数开辟的是不同的内存空间，因此内部对应的click()
也是不同的，故每一个按钮都能和一个flag
一一对应，不会互相干扰。flag
参考文章
[1] JavaScript闭包 | 菜鸟教程
[2] 闭包 - JavaScript | MDN
[3] JavaScript高级程序设计(第4版) [美] 马特·弗里斯比(Matt Frisbie)——10.14 闭包