工作日常--内存和性能

事件委托

在最初还没有出现类似于jquery这种第三方库的时候，很多人习惯了为页面中的dom添加很多的事件。在页面元素相对来说少的情况下，是可以这么做。可是在比如点击某个下拉列表的单个项的时候，为每个标签单独命名id，然后绑定事件既繁琐又不是很方便。如下代码

<ul id="my_ulChildren">
<li id="children1"></li>
<li id="children2"></li>
<li id="children3"></li>
</ul>

<script>
var child1 = document.getElementById("children1");
var child2 = document.getElementById("children2");
var child3 = document.getElementById("children3");
child1.onclick = function(){}
child2.onclick = function(){}
child3.onclick = function(){}
</script>

如上的代码，应该在实际开发中很多人都写过。/捂脸 笔者在最开始接触的时候也写过类似的代码。

但，其实我们可以用事件委托来实现点击单个li元素，用到的也是事件冒泡。

<ul id="my_ulChildren">
<li id="children1">第一个儿子</li>
<li id="children2">第二个儿子</li>
<li id="children3">第三个儿子</li>
</ul>
<script type="text/javascript">
let cavans = document.getElementById("my_ulChildren");
cavans.onclick = function(e) {
switch (e.target.id) {
case "children1":
console.log(e.target.innerHTML)
break;
case "children2":
console.log(e.target.innerHTML);
break;
case "children3":
console.log(e.target.innerHTML);
break;

}
}
</script>

为什么不提倡第一种处理方式呢？每个触发事件都是一个函数，都会存放到内存中。那么自然就会消耗性能。故，利用事件委托完美的解决了这个问题。

移除事件处理程序

有时我们移除已有事件委托的元素的时候，会遇到该元素已经没有了。但是该元素的事件依然放在内存中。如下代码

<div id="myDiv">
<input type="button" value="按钮" id="myBtn" >
</div>
<script>
let myDiv = document.getElementById("myDiv");
let btn = document.getElementById("myDiv");
btn.onclick = function(){
// 正确做法
// myBtn.onclick = null;
myDiv.innerHTML = '';
console.log(23333);
}
</script>

正确的处理方法如上注释代码/

日常开发总结

在定义变量的时候，尽量避免使用全局变量定义。亦或者你定义了全局变量之后，在不使用它的时候给他指定为null值。虽然今天写的只是对于现在我们普通的开发来说早已不是什么大事情，如今的手机内存甚至比一些电脑的内存都多。亦或者我么根本不用考虑电脑端的一些内存占用问题。但是我还是觉得，对于开发就得有自己所坚持的，无所谓别人怎么写代码。自己要写的规范，降低内存使用率。

明晚继续。。。。。。