投票的实现原理.md

投票的实现原理

要求：实现点击一下，加一个数字；

扩展:支持和反对的都有,支持就是累加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++;
}