闭包的运用-点赞-计数器

闭包的运用-点赞-计数器

...
<button id="btn">点赞</button>
<span id="text">0</span>
...
var btn = document.getElementById('btn');
var text = document.getElementById('text');
...

方法一：定义全局变量

var count =0;
btn.onclick = function () {
  count++;
  text.innerHTML = count;
}

弊端：定义了全局变量
方法二：闭包

  (function () {
    var count = 0;
    btn.onclick = function () {
      count++;
      text.innerHTML = count;
    }
  }());

闭包的另一种写法

  btn.onclick=(function () {
    var count = 0;
    return function () {
      count ++;
      text.innerHTML = count;
    }
  })()

弊端：有一个不销毁的私有作用域，会占内存
方法三：利用元素的现有值

  btn.onclick = function () {
    text.innerHTML ++;
  }

弊端：每一次都需要把页面的内容先转换为字符串再累加，每次累加完重新添加的时候浏览器都要重新渲染
方法四：利用自定义属性存储

  btn.count = 0;
  btn.onclick = function () {
    text.innerHTML = ++ this.count;
  }