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.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;
}
})
复制代码
- 1.2和1.3的弊端:有一个不销毁的私有作用域,所以会占用那么一小丢内存
1.4 利用innerHTML方式处理
var oBtn = document.getElementById("btn");
var spanNum = document.getElementById("spanNum");
oBtn.onclick = function() {
spanNum.innerHTML++;
}
复制代码
1.5 利用自定义属性存储(推荐)
var oBtn = document.getElementById("btn");
var spanNum = document.getElementById("spanNum");
oBtn.count = 0;
oBtn.onclick = function() {
spanNum.innerHTML = ++ this.count;
}
复制代码
- 动力: 这是我的学习笔记(来源于视频),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
- 期望: 不喜勿喷,谢谢合作!如果涉及版权请及时联系我,马上删除!