【总结】实现点击累加效果的几种方式对比

//实现点击累加效果的几种方式对比
Author:李金涛；Time:2018-1-1(新年新气象，更上一层楼。持续写博客。不断总结优化，博观约取，才能厚积薄发！)
//    1，利用全局作用域不销毁的原理，把需要累加的变量定义为全局变量。
//弊端：在项目中为了防止全局变量之间的冲突，我们一般是禁止或者减少使用全局变量。
//   2，自己形成一个不销毁的私有作用域来保存我们需要累加的变量。
//    （1），用自执行函数包起来；
//    （2），把自执行函数的返回值函数赋值给变量。
//弊端：有一个不销毁的私有作用域，所以占内存。
//   3，利用innerHTML既能存取值，也能获取值的原理。每次点击时想到页面取最新的值，累加完后在放回去。
//弊端：每一次都需要把页面中的内容先取出来，转换成数字然后累加，最后重新放回去。当重新放回去时，浏览器都需要重新渲染。
//   4，自定义属性存储（推荐）：这样就没有作用域那点弊端之说。

<div id="box">
    <h3>问题：认为杨幂很漂亮的请狂点~~</h3>
    <div id="btn">我非常非常同意以上观点&nbsp;&nbsp;<span id="spanNum">0</span></div>
</div>

<style>
   #box{   300px;  margin: 100px auto;  }
   #btn{  background-color: #ccc;  }
   #spanNum{  color: red;  }
</style>



<script type="text/javascript">
 var oBtn=document.getElementById("btn");
    var spanNum=document.getElementById("spanNum");
//    1，利用全局作用域不销毁的原理，把需要累加的变量定义为全局变量。
//    var count=0;
//    oBtn.onclick=function () {
//        count++;
//        spanNum.innerHTML=count;
//    };
//    弊端：在项目中为了防止全局变量之间的冲突，我们一般是禁止或者减少使用全局变量。

//2，自己形成一个不销毁的私有作用域来保存我们需要累加的变量。
//    （1），用自执行函数包起来；
//    +function () {
//        var count=0;
//        oBtn.onclick=function () {
//            count++;
//            spanNum.innerHTML=count;
//        };
//    }();
//    （2），把自执行函数的返回值函数赋值给变量。
//    oBtn.onclick=(function () {
//        var count=0;
//        return function () {
//            count++;
//            spanNum.innerHTML=count;
//        };
//    })();//此处易写错，请千万注意；
//    弊端：有一个不销毁的私有作用域，所以占内存。

//    3，利用innerHTML既能存取值，也能获取值的原理。每次点击时想到页面取最新的值，累加完后在放回去。
//    oBtn.onclick=function () {
//        spanNum.innerHTML++;//++除了加1，还默认转换成Number
//        spanNum.innerHTML-=(-1);
//        spanNum.innerHTML=spanNum.innerHTML-0+1;
//        spanNum.innerHTML=Number(spanNum.innerHTML)+1;
//    };
//    弊端：每一次都需要把页面中的内容先取出来，转换成数字然后累加，最后重新放回去。当重新放回去时，浏览器都需要重新渲染。

//    4，自定义属性存储（推荐）：这样就没有作用域那点弊端之说。
//    oBtn.count=0;//count属性初始值为0.
//    oBtn.onclick=function () {//每点击一次在当前值上加1；
//         spanNum.innerHTML=++this.count;
//    };

</script>