读《编写高质量代码,改善JavaScript程序的188个建议》---------两种解决兼容性问题

深渊向深渊呼唤

1. 分支函数

      一般解决浏览器之间的兼容性问题就是用if逻辑去进行,根据浏览器的不同来实现功能上的兼容,这样的问题是,每执行一次代码,可能都需要进行一次浏览器兼容性方面的检测,用分支函数可以解决这个问题。

var XHR = function() {
    var standard = {
        createXHR : function(){
            return new XMLHttpRequest();
        } 
    }
    var newActionXObject = {
        createXHR : function(){
            return new ActionXObject("Msxml2.XMLHTTP")
        }
    }
    var oldActionXObject = {
        createXHR : function(){
            return new ActionXObject("Microsoft.XMLHTTP")
        }
    }
    if(standard.createXHR()){
       return standard;
    } else {
        try {
            newActionXObject.createXHR();
            return newActionXObject;
        }
    }
}();

//function最后的(),即function(){  /*代码*/ }() ,“()”代表立即执行,可以传参数

        原理:声明几个不同名称的对象,然后为对象声明一个名字相同的方法。这些不同的对象,却拥有相同的方法,根据不同的浏览器设计各自的实现,接着开始进行一次浏览器检测,并且由浏览器检测的结果来决定返回哪一个对象,这样不论返回的是哪一个对象,最后名称相同的方法都作为一致的接口。

      这是在js运行期间进行的动态检测,将检测的结果返回赋值给其他的对象,并且提供相同的接口,这样存储的对象就可以使用名称相同的接口了。

2.惰性载入函数

var addEvent = function(el,type,handle){
    addEvent = el.addEventListener ? function(el,type,handle){
       el.addEventListener(type,handle,false)
    } : function(el,type,handle){
      el.attachEvent("on"+type,handle)
    }
    //在第一次执行addEvent函数时,修改了addEvent 函数之后,必须执行一次
    addEvent(el, type, handle)
}

       从代码上看,惰性载入函数也是在函数内部改变自身的一种方式,这样在重复执行的时候就不会再进行兼容性方面的检测了。

       惰性载入表示函数执行的分支仅会发生一次,即第一次调用的时候。在第一次调用的过程中,该函数会被覆盖为另一个按合适方式执行的函数,这样任何对原函数的调用都不用再经过执行的分支。

     优点如下:

   1)要执行的适当代码只有在实际调用函数时才执行,

   2)尽管第一次调用该函数会因额外的第二个函数调用而稍微慢点,但后续的调用都会很快,因为避免了多重条件。

栏目