DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript代碼教程:惰性載入函數
JavaScript代碼教程:惰性載入函數
編輯:關於JavaScript     

因為浏覽器之間行為的差異,多數JavaScript代碼包含了大量的if語句,將執行引導到正確的代碼中。看看XMLHttpRequest(XHR)對象中的createXHR()函數:

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"];
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObect(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex) {
                    //跳過
                }
            }
        }
        return new ActiveXObect(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR object available.");
    }
}

每次調用createXHR()的時候,它都要對浏覽器所支持的能力仔細檢查。首先檢查內置的XHR,然後測試有沒有基於ActiveX的XHR,最後如果沒有發現的話就拋出一個錯誤。每次調用該函數都是這樣,即使每次調用時分支的結果都不變:如果浏覽器支持內置XHR,那麼它就一直支持了,那麼這種測試就變得沒有必要了。即使只有一個if語句的代碼,也肯定要比沒有if語句的慢,所以如果if語句不必每次執行,那麼代碼可以運行的更快一些。解決方案就是稱之為惰性載入的技巧。

惰性載入表示函數執行的分支僅會發生一次:即函數第一次調用的時候。在第一次調用的過程中,該函數會覆蓋為另外一個按合適方式執行的函數,這樣任何對原函數的調用都不用再經過執行的分支了。例如,可以用下面的方式使用惰性載入重寫createXHR():

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"];
                for (var i = 0, len = versions.length; i < len; i++) {
                    try {
                        var xhr = new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        return xhr;
                    } catch (ex) {
                        //跳過
                    }
                }
            }
            return new ActiveXObect(arguments.callee.activeXString);
        }
    } else {
        createXHR = function () {
            throw new Error("No XHR object available.");
        };
    }
    return createXHR();
}

在這個惰性載入的createXHR()中,if語句的每一個分支都會為createXHR變量賦值,有效覆蓋了原有的函數。最後一步便是調用新賦值的函數。下一次調用createXHR()的時候,就會直接調用分配的函數,這樣就不用再次調用if語句了。

惰性載入函數有兩個主要有點。第一,要執行的適當代碼只有當實際調用函數時才進行。某些JavaScript庫一開始就根據浏覽器功能或者怪癖執行很多代碼分支,將所有東西實先設置好。惰性載入則將這些計算盡可能的推遲,保證了恰當的功能而又不影響初始腳本的執行時間。第二,盡管第一次調用該函數會因為額外的第二個函數調用而稍微慢一點,但是所有後續的調用都會更快,因為後面避免了多重if條件。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved