1.如何实现计数器
- 背景:点击按钮实现计数器功能 ====> 点击按钮实现累加
- 从以下4种方式选择最优的一个方案
1.1使用全局变量
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
var count = 0;
oBtn.onclick = function() {
count++;
spanNum.innerHTML = count;
}
//利用全局变量不销毁的原理,把需要累加的数字定义为全局的变量
//弊端:在项目中为了防止全局变量之间的冲突,我们一般是禁止或者减少使用全局变量的
1.2 自己形成一个不销毁的私有作用域来保存我们需要累加的数字
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
(function() {
var count = 0;
oBtn.onclick = function() {
count++;
spanNum.innerHTML = count;
}
})()
//此处再次分析一下为什么私有作用域不销毁
//1、自执行函数执行形成了一个私有作用域A, oBtn.onclick = function() {}
//2、oBtn.onclick 在oBtn对象中
//3、oBtn.onclick = function() {} 私有作用域A中的function(引用类型的数据)被外部变量接收 ===>不销毁
//如果对这块有疑问 可以看上篇文章 JS作用域和内存分析 https://juejin.im/post/5c1aff9df265da61736a3dc5
1.3 经典自执行函数(原理同1.2)
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
oBtn.onclick = (function() {
var count = 0;
return function() {
count++;
spanNum.innerHTML = count;
}
})
//这块代码最有迷惑性的就是使用了自执行函数赋值给onclick,还有里边的var count = 0;
//你一定认为 每点击一次btn,会执行一次自执行函数,count 会重新变成0 无法做到累加的效果
//但是在给onclick赋值时,自执行函数就执行了,返回了一个引用类型的函数 function() { count++; spanNUm.innerHTML = count}
//重点注意: 是赋值的时候 不是点击的时候
//赋值 只会在页面重新加载的时候执行一次 所以 var count = 0;只会执行一次 不会清空上次的累加值
//以后每次点击 真正执行的是 function() { count++ ; spanNum.innerHTML = count} 所以count不会被清空
//看这个文章(JS this指向 https://juejin.im/post/5c1b6c3551882573d9066241) 最后一道练习题 收获会很大
- 1.2和1.3的弊端:有一个不销毁的私有作用域,所以会占用那么一小丢内存
1.4 利用innerHTML方式处理
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
oBtn.onclick = function() {
//spanNum.innerHTML 获取页面中的内容返回的是一个字符 需要转为数字进行计算
spanNum.innerHTML++;//++ 自动转为数字
}
//利用innerHTML的方式处理:每一次点击的时候都先到页面中获取最新的值,然后累加,最后把累加的结果重新放回去
//弊端:每一次都需要把页面中的内容先转为数字,然后再累加,累加完再重新添加回去,当重新添加的时候,浏览器都要
//重新渲染一下
1.5 利用自定义属性存储(推荐)
var oBtn = document.getElementById("#btn");
var spanNum = document.getElementById("#spanNum");
oBtn.count = 0; //count既不是全局变量 也不是私有变量 只是oBtn的私有属性
oBtn.onclick = function() {
spanNum.innerHTML = ++ this.count;
//count保持不变 不销毁 --->在上次的结果上进行累加
}
- 动力: 这是我的学习笔记(来源于视频),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
- 期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!
