编程实践

避免双重求值

其实就是字符类型的js代码被运行时所产生的第二次运行求值

我们都知道eval()方法是可以将字符类型的js代码运行的，但是除了它还有其他三种方法也支持。

1. new Function()
2. setTimeout()
3. setInterval()

这三个方法也都支持传入一个字符串类型的js代码，然后当这个函数运行后会识别这个字符并运行传入的js。

这样就会产生两次求值，其中eval和Function这两种方法用的很少，甚至不使用了，而定时器确是比较常用的手段，所以为了规避这个问题，定时器里面第一个参数不要传字符，而是用函数封装。

避免重复的工作

在事件函数上，我们要做两个判断，要判断这个浏览器是支持dom 2级的事件还是ie的事件，所以要做判断，常用的方式如下：

function addEvent(element,type,fn) {
    if(element.addEventListener) {
        element.addEventListener(type,fn,false);
    }else {
        element.attachEvent('on'+type,fn);
    }
}

function removeEvent(element,type,fn) {
    if(element.removeEventListener) {
        element.removeEventListener(type,fn,false);
    }else {
        element.detachEvent('on'+type,fn);
    }
}

这样写好像已经优化的很好了，自动判断浏览器支持，但是，事实上当我们每次运行一次addEvent函数时，都会if判断一次，然而事实上并不需要每次运行判断一次，因为用户不可能中途突然更改浏览器，所以，这个判断只需要运行一次即可。

延迟加载

function addEvent(element,type,fn) {
    if(element.addEventListener) {
        addEvent = function(element,type,fn){
            element.addEventListener(type,fn,false);
        }
    }else {
        addEvent = function(element,type,fn){
             element.attachEvent('on'+type,fn);
        }
    } 
   addEvent(element,type,fn);    
}

function removeEvent(element,type,fn) {
    if(element.removeEventListener) {
        removeEvent = function(element,type,fn){
            element.removeEventListener(type,fn,false);
        }
    }else {
        removeEvent = function(element,type,fn){
            element.detachEvent('on'+type,fn);
        }    
    }
    removeEvent(element,type,fn);
}

第一次判断完重写整个函数，然后再次调用，下一次运行的时候已经是判断好的函数了，这里就可以加快运行速度。

使用这种方法会在第一次调用函数时消耗较长的时间，还有另一种方式可以更快的运行。

条件预加载

var addEvent = document.body.addEventListener ? function(element,type,fn) { element.addEventListener(type,fn,false); 
  } : function(element,type,fn){                element.attachEvent('on'+type,fn);
  };

var removeEvent = document.body.removeEventListener ? function(element,type,fn){
 element.removeEventListener(type,fn,false);
    } : function(element,type,fn){
 element.detachEvent('on'+type,fn);
    };   

我们知道，当js代码被下载完毕后是会被自动执行一次的，那么在这个自动执行的时候执行了三元运算，此时将判断好的函数赋值给实例，从而第一调用时就是正确的函数，没有了第一次判断所用的耗时。