js高级技巧之惰性载入函数

• 由于浏览器间行为的差别，多数javascript代码包含大量的if判断语句，为避免每次函数调用都去执行那些没有必要的if判断语句
• 实现惰性载入函数的方法有两种：
  • 在函数执行的时候在处理函数，在函数第一次调用的过程当中，该函数会被重写覆盖成另外一个按照合适方式执行的函数，下面见例子：建立XHR

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

    每次执行这个建立函数都会去执行内部的那些判断语句，因此见以下改写该函数，重写原函数，下一次调用时就会直接调用分配好的函数

    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 version = ['MSXML2.XMLHttp.6.3', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
                    i,len;
                    for (i = 0,len=version.length; i < len; i++) {
                        try {
                            new ActiveXObject(version[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex) {
                            // 跳过
                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            }
        } else {
             createXHR = function () {
                throw new Error('NO XHR');
             }
        }
        // 最后返回预期
        return 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 version = ['MSXML2.XMLHttp.6.3', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
                    i,len;
                    for (i = 0,len=version.length; i < len; i++) {
                        try {
                            new ActiveXObject(version[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex) {
                            // 跳过
                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            };
        } else {
             return function () {
                throw new Error('NO XHR');
             };
        }
    })()