JS实现计数器

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保持不变 不销毁 --->在上次的结果上进行累加
}

• 动力: 这是我的学习笔记(来源于视频),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
• 期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!