JavaScript AJAX之惰性載入函數_javascript技巧

來源:互聯網
上載者:User

在JS中有些記憶體只需執行一遍即可,如瀏覽器類型檢測是最常用的一個功能,因為我們使用Ajax的時候需要檢測瀏覽器的內建的XHR。我們可以在第一次檢測的時候記錄下類型,往後在使用Ajax的時候就不需要再去檢測瀏覽器類型了。在JS中就算只有一個if也總比沒有if的語句效率要高。

普通Ajax方法

複製代碼 代碼如下:

/**
 * JS惰性函數
 */
 
function ajax(){
    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,k=version.length;i<k;i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                }catch(ex){
                    throw ex;  
                }
            }
        }  
 
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw "No XHR object"; 
    }
}

每次調用ajax()函數都要對瀏覽器內建的XHR檢查,效率不高。

使用惰性方式的方法

複製代碼 代碼如下:

/**
 * JS惰性函數
 */
 
function ajax(){
    if(typeof XMLHttpRequest != "undefined"){
        ajax = function(){
            return new XMLHttpRequest();   
        };
    }else if(typeof ActiveXObject != "undefined"){
        ajax = function(){
            if(typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];   
 
                for(var i=0,k=version.length;i<k;i++){
                    try{
                        var xhr = new ActiveXObject(versions[i]);  
                        arguments.callee.activeXString = versions[i];
                        return xhr;
                    }catch(ex){
                        throw ex;  
                    }
                }
            }  
 
            return new ActiveXObject(arguments.callee.activeXString);
        }
    }else{
        ajax = function(){
            throw "No XHR object"; 
        }
    }
 
    return ajax();
}

在第二個惰性方法中if的每個分支都會為ajax()變數賦值,有效覆蓋了原有函數,最後一步調用新的函數。下一次調用的ajax()的時候,就直接調用變數。

最佳化重點

要執行特定代碼只有實際調用才執行,而某些JS庫一開始就檢測瀏覽器,預先設定好。

由於加了複雜的判斷所以首次運行速度慢,但後邊的多冊啟動並執行效率會更快。
 
有時候寫代碼久了,不能一成不變,要經常思考怎樣才能使程式啟動並執行更快,更有效率。這樣的思考下寫出來的程式才是精裝,而不會產生多餘的垃圾代碼。這也不是簡單OO就能一刀切,實際上代碼很多地方都是活的,人更是活的。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.