js ajax惰性載入程式碼例項

螞蟻小編發表於2017-03-27

本章節介紹介紹一下ajax多性載入的用法,當然它是具有一定優勢的。

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

程式碼例項:

例項一:

普通的ajax程式碼

[JavaScript] 純文字檢視 複製程式碼
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 index=0,k=version.length;index<k;index++){
        try{
          new ActiveXObject(versions[index]); 
          arguments.callee.activeXString = versions[index];
          break;
        }
        catch(ex){
          throw ex;   
        }
      }
    }   
    return new ActiveXObject(arguments.callee.activeXString);
  }
  else{
    throw "No XHR object";  
  }
}

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

例項二:

惰性方式的程式碼

[JavaScript] 純文字檢視 複製程式碼
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 index=0,k=version.length;index<k;index++){
          try{
            var xhr = new ActiveXObject(versions[index]);   
            arguments.callee.activeXString = versions[index];
            return xhr;
          }
          catch(ex){
            throw ex;   
          }
        }
      }   
      return new ActiveXObject(arguments.callee.activeXString);
    }
  }
  else{
    ajax = function(){
      throw "No XHR object";  
    }
  }
  return ajax();
}

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

相關文章