小技巧 之 代码块区别运行

由于web开发所常见的多平台适应问题，往往根据对象能力检测或者浏览器检测（不推荐 ）采用不同的处理方法是不可避免的。

如常见的事件处理还要分作 W3C 和 IE系列 两套解决代码，（这里更说明了 对象能力检测为何优于 浏览器检测，你可不知道会不会有哪个变态浏览器不声明自己是IE，却用着IE的事件处理方式） 。

那么说道如何解决 不同的处理方法问题，拿事件处理举例，可能不少书或者文章都这么说(看得有点腻了 )，自己写一个函数把两者差异封装一下：

 

function myAddEvent(el,event,fuc) {
   if(el.addEventListener) {
          //W3C style
    } else if(el.attachEvent){
          //IE style
     } else {
          //old ways
         el['on'+event]=func;
      }
}

 

我觉得这是传统语言的思路（只能用 if 来 分支语句），这样的话，我们每次添加事件都需要比较对象能力，其实对象有无能力只要比较一次就可以了，以后添加事件完全没必要再执行 IF 判断 。

既然 javascript 可以把函数 作为一段代码的封装，那么我们只要初始判断好，每次都调用相应的代码块（函数不就行了么），由此可得下面函数 :

(很少看到过，不记得是自己原创还是偶然看别人使用过，http://yiminghe.iteye.com/blog/353762 用过一次)

 

var myAddEvent = (function () {
    if (window.addEventListener) {
        return function (el, eventName, fn) {
            el.addEventListener(eventName, fn, false);
        };
    } else if (window.attachEvent) {
        return function (el, eventName, fn) {
            el.attachEvent("on" + eventName, fn);
        };
    } else {
        return function (el, eventName, fn) {
            el['on' + eventName] = fn;
        };
    }
})();      

 

这样的话，相当于一开始就把各个平台应该执行的代码块存起来，这样子下次就不用判断直接运行了，脚本语言就是灵啊。

ps: 后在 Pro javascript design pattern 中看到这种叫做 branching（分支），用来把浏览器间的差异封装到运行期间进行设置的动态方法技术。

能够在运行时动态的确定函数代码的能力，正是javascript的高度灵活性和强大表现力的一种体现。

 

ps2:传统技术中也有类似的应用，例如 "即时代码生成"技术，函数可以在运行时查看各参数值，然后为它的函数体生成更加高效的，直接针对特定参数值执行的代码，然后跳到这些代码去运行。