//实现点击累加效果的几种方式对比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{  width: 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.οnclick=function () {//        count++;//        spanNum.innerHTML=count;//    };//    弊端：在项目中为了防止全局变量之间的冲突，我们一般是禁止或者减少使用全局变量。

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

//    3，利用innerHTML既能存取值，也能获取值的原理。每次点击时想到页面取最新的值，累加完后在放回去。//    oBtn.οnclick=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.οnclick=function () {//每点击一次在当前值上加1；//         spanNum.innerHTML=++this.count;//    };

</script>