JS实现计数器最优方式

野性酷女 2022-01-20 06:45 196阅读 0赞

## 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 自己形成一个不销毁的私有作用域来保存我们需要累加的数字 ###

### 1.3 经典自执行函数(原理同1.2) ###

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

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