阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 投票的实现原理

      投票的实现原理

      要求:实现点击一下,加一个数字;

      扩展:支持和反对的都有,支持就是累加1,反对就是减1;不小于0;

      <div class="box">
          <h2>问题: 同意否?</h2>
          <div id="btn">
              我非常赞同以上的观点
              <span id="spanNum">0</span>
          </div>
      </div>
      
      var oBtn = document.getElementById("btn");
      var spanNum = document.getElementById("spanNum");
          oBtn.onclick = function () {
             var count = 0;
             count++;
             spanNum.innerHTML = count;
          };
      

      不行,每一次点击div的时候都会重新的执行我们的function,重新的形成一个私有的作用域,从新的开始预解释,代码执行,并且执行完成后当前的作用域还销毁了->每一次count都是从0开始的

      1、利用全局作用域不销毁的原理,我们把需要累加的变量count定义为全局变量实现数字的一直累加
          var count = 0;
          oBtn.onclick = function () {
             count++;
             spanNum.innerHTML = count;
          };
      

      弊端:我们在真实的项目中为了避免全局变量相互之间的冲突,我们一般是减少(禁用)全局变量的使用的

      2、我们自己创造一个不销毁的私有的作用域来存储count

      自执行函数执行,形成一个私有的作用域A,A中返回了一个堆内存的地址,被A外面的onclick接收了,那么A这个私有的作用域就不在销毁了,也就是里面的私有变量count也不再销毁了,这样的话count就可以一直累加下去了…

      oBtn.onclick = (function () {
          var count = 0;
          return function () {
              count++;
              spanNum.innerHTML = count;
          }
      })();
      
      //或者写成下面的也可以
      (function () {
          var count = 0;
          oBtn.onclick = function () {
              count++;
              spanNum.innerHTML = count;
          }
      })();
      

      弊端:有一个不销毁的私有的作用域还是浪费性能的

      3、使用自定义属性(推荐使用)

      把需要累加的count存放在当前元素的自定义属性上,并且每一次点击的时候实现累加

      var oBtn = document.getElementById("btn");
      var spanNum = document.getElementById("spanNum");
      oBtn.count = 0;
      oBtn.onclick = function () {
        spanNum.innerHTML = ++this.count;
      };
      
      4、使用innerHTML的方式

      innerHTML:是元素的一个属性,用来存储或者设置元素里面内容的(获取的内容都是一个字符串)

      oBtn.onclick = function () {
          var oldNum = spanNum.innerHTML;
          //下面两个都可以
          // spanNum.innerHTML = Number(oldNum) + 1;
          spanNum.innerHTML++;
      }
      
      目录
      目录