# 投票的实现原理

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

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