javascript中惰性载入函数

我们都知道如果创建一个xhr对象(不会写,不怕,有百度,嘿嘿)

function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){
            return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        if (typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
                        i,len;
                for (i=0,len=versions.length; i < len; i++){
                    try {
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch (ex){
                        //跳过
                    }
        }
    }
            return new ActiveXObject(arguments.callee.activeXString);
    } else {
            throw new Error("No XHR object available.");
    }
}

这个函数相信大家都见过,每次调用createXHR的时候,都要检测浏览器是否支持XMLHttpRequest对象,里面基本上都是一层一层的if…else… 还有 try…catch….每次都这样,想想也烦.

看看书中的方法:

第一种方法

function createXHR(){
        if (typeof XMLHttpRequest != "undefined"){
                createXHR = function(){
                        return new XMLHttpRequest();
                };
        } else if (typeof ActiveXObject != "undefined"){
            createXHR = function(){
                    if (typeof arguments.callee.activeXString != "string"){
                            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
                                   i, len;
                            for (i=0,len=versions.length; i < len; i++){
                                    try {
                                        new ActiveXObject(versions[i]);
                                        arguments.callee.activeXString = versions[i];
                                        break;
                                    } catch (ex){
                                        //skip
                                    }
                            }
                   }
                   return new ActiveXObject(arguments.callee.activeXString);
               };
        } else {
                createXHR = function(){
                throw new Error("No XHR object available.");
                };
        }
        return createXHR();
}

这里我们发现, 每一次分支都会对createXHR赋值 , 在第一次执行createXHR的时候,如果有内置的XMLHttpRequest对象,createXHR函数会被覆盖,下次再调用的时候,就会调用已经被覆盖的createXHR函数,直接返回一个XMLHttpRequest对象,其他的分支也是类似的, 最后一步就是调用新的createXHR函数

这里的情景是:浏览如果支持内置的XHR或者基于ActiveX的XHR,就会一直支持,在这种情况下,其实只需要一次检测就够了,所以覆盖createXHR是合适的

第二种方法

var createXHR = (function(){
                    if (typeof XMLHttpRequest != "undefined"){
                            return function(){
                                    return new XMLHttpRequest();
                            };
                    } else if (typeof ActiveXObject != "undefined"){
                            return    function(){
                                                    if (typeof arguments.callee.activeXString != "string"){
                                                        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",   "MSXML2.XMLHttp"],
                                                                i, len;
                                                        for (i=0,len=versions.length; i < len; i++){
                                                                    try {
                                                                                new ActiveXObject(versions[i]);
                                                                                arguments.callee.activeXString = versions[i];
                                                                                break;
                                                                    } catch (ex){
                                                                            //skip
                                                                    }
                                                        }
                                                   }
                                            return new ActiveXObject(arguments.callee.activeXString);
                                      };
                      } else {
                                    return function(){
                                            throw new Error("No XHR object available.");
                                    };
                    }
     })();

第二种其实和第一种逻辑上是一样的,只不过多了第一行代码（使用var定义函数）、新增了自执行的匿名函数

总体来说,这个惰性载入函数还是有点价值的吧,只是牺牲一点性能和代码量,就能减少不必要执行的代码,但是注意会覆盖原来的函数…