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');
             };
        }
    })()