前端笔试记录10.12

1."use strict"(严格模式)

use ‘strict’： "严格模式"是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。这种模式使得Javascript在更严格的条件下运行。

1.调试更容易，之前版本会被忽略和默默失败的代码错误会抛出异常。

2.变量在赋值前必须声明，且变量名不能有重复，对象的属性名和参数名也不能重复。

3.取消this的强制转换， 引用null或者未定义值的this不再会强制到全局变量，也不会再指向window，而是抛出错误。

4.eval()更安全，严格模式下eval()内创建的变量无法在eval()外使用。

5.在 delete 使用无效时抛出错误。 delete 操作符（用于从对象中删除属性）不能用在对象不可配置的属性上。当试图删除一个不可配置的属性时，非严格代码将默默地失败，而严格模式将在这样的情况下抛出异常。

6.严格模式去除了with语句

7.不能修改arguments ，不能在函数内定义arguments变量  ，不能使用arugment.caller和argument.callee。因此如果你要引用匿名函数，需要对匿名函数命名。 

2.为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？

1.能够完成整个 HTTP 请求+响应（尽管不需要响应内容）
2.触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据
3.跨域友好
4.执行过程无阻塞
5.相比 XMLHttpRequest 对象发送 GET 请求，性能上更好
6.GIF的最低合法体积最小（最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF只需要43个字节）

3.事件委托或是事件代理

利用事件冒泡的原理，将原DOM所持有的事件交给父类处理，在有多个重复有事件绑定的DOM存在时可以有效的节省内存开销。经典比喻：代取快递。

实现：

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}

 用target（IE兼容问题可能为srcElement）获取事件属性，判断触发事件的是否是子元素li实现将方法确确实实得绑定到只有li才能触发。

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //事件委托，添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
                
            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }
                
            };
            
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

 动态添加的新节点也能将事件传递到父类进行代理。