JavaScript AJAX lazy loading function_javascript skills

Some memories in JS only need to be executed once. For example, browser type detection is the most commonly used function, because when we use Ajax, we need to detect the browser's built-in XHR. We can record the type during the first detection, and there is no need to detect the browser type when using Ajax in the future. In JS, even if there is only one if statement, it is always more efficient than no if statement.

Normal Ajax method

Copy code The code is as follows:

/**
* JS lazy 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                   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";
}
}


Every time the ajax() function is called, the browser's built-in XHR must be checked, which is not efficient.

Use the lazy approach

Copy code The code is as follows:

/**
* JS lazy 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                     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就能一刀切，实际上代码很多地方都是活的，人更是活的。