Lazy loading functions for JavaScript AJAX

  • 2020-03-30 03:45:57
  • OfStack

For example, browser type detection is one of the most common features, because we need to detect the browser's built-in XHR when using Ajax. We can record the type the first time we detect it, so we won't need to detect the browser type again when we use Ajax. Even a single if in JS is more efficient than a statement without an if.

Common Ajax approach


/**
 * JS The inertia function
 */
 
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"; 
    }
}

Checking the browser's built-in XHR every time you call the ajax() function is inefficient.

Use a lazy approach


/**
 * JS The inertia function
 */
 
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();
}

In the second lazy method, each branch of if is assigned a value to the ajax() variable, effectively overwriting the original function, and the last step is to call the new function. The next time the ajax() is called, the variable is called directly.

To optimize the key

To execute specific code, only the actual call is executed, and some JS libraries detect the browser from the beginning and are pre-set.

The first run is slow because of the complex judgment, but later multi-volume runs are faster.
 
Sometimes writing code for a long time, can not be fixed, often need to think about how to make the program run faster, more efficient. In this way, the programs written are hardcore, and do not generate extra junk code. This is not a simple OO can be one-size-fits-all, in fact, a lot of code is alive, people are alive.


Related articles: