遅延ロードjavadript

Question

遅延ロードjsまたはオンデマンドロードの3つの基本的な違いは何ですか？

スクリプト1：

$.getScript = function(url, callback, cache){ 
    $.ajax({ 
     type: "GET", 
     url: url, 
     success: callback, 
     dataType: "script", 
     cache: cache 
    }); 
}; 

スクリプト2：

function require(file, callback) { 
    var script = document.getElementsByTagName('script')[0], 
     newjs = document.createElement('script'); 

    // IE 
    newjs.onreadystatechange = function() { 
     if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { 
      callback(); 
     } 
    }; 

    // others 
    newjs.onload = function() { 
     callback(); 
    }; 

    newjs.src = file; 
    script.parentNode.insertBefore(newjs, script); 
} 

document.getElementById('id').onclick = function() { 
    require('ondemand.js', function() { 
     extraFunction('loaded from the parent page'); 
     document.body.appendChild(document.createTextNode('done!')); 
    }); 
}; 

script3：

$L = function (c, d) { 
    for (var b = c.length, e = b, f = function() { 
      if (!(this.readyState 
        && this.readyState !== "complete" 
        && this.readyState !== "loaded")) { 
       this.onload = this.onreadystatechange = null; 
       --e || d() 
      } 
     }, g = document.getElementsByTagName("head")[0], i = function (h) { 
      var a = document.createElement("script"); 
      a.async = true; 
      a.src = h; 
      a.onload = a.onreadystatechange = f; 
      g.appendChild(a) 
     }; b;) i(c[--b]) 
}; 

Answer 1

1. スクリプトをロードするために、AJAXを使用します。具体的には、XHRを使用していくつかのjをロードし、ブラウザで使用できるようにします。ブロックされません。それでも、同じ原産地政策を強制する。
2. <script/>要素を作成して新しい.jsファイルを挿入するようにヘッダーを変更します。これは、ページの読み込み時にブラウザをブロックしません。
3. ＃2と同じことをしますが、スクリプトの配列をサポートしているようです。ブロッキングを起こさないasyncをtrueに設定します。 forループは、より多くの匿名メソッドを作成するので、ちょっと混乱します。

Answer 2

1. はXmlHttpRequestのとeval()それにスクリプトを取得するように思われます。これは、スクリプトが同じプロトコル/ドメイン/ポートでホストされていない場合は機能しません。

2. と3は同じことをしているように見えます。つまり、<script src="the script url"></script>要素を作成し、onloadイベントをバインドしてページに挿入します。ブラウザはスクリプトがロードされてから実行され、onloadイベントが発生します。

Answer 3

あなたはこの新しいライブラリを試みるべきでhead.js

と呼ばれる彼らは、いくつかの興味深いアイデアやAPIを持っている...それが役に立てば幸い。

あなたができることは、通常のxhrリクエストを使用してスクリプトファイル名を取得し、このようなメソッドを使用してdomに挿入することです。removeScriptも追加しました。 DOM

Answer 4

への挿入で

addScript = function(file) 
{ 
    var headID = document.getElementsByTagName("head")[0];   
    var newScript = document.createElement('script'); 
    newScript.type = 'text/javascript'; 
    newScript.src = file; 
    headID.appendChild(newScript); 
}; 
removeScript = function(file) 
{ 
    var headID = document.getElementsByTagName("head")[0].children; 
    for(var i in headID) 
     if(headID[i].tagName == "SCRIPT") 
      if(headID[i].getAttribute('src') == file) 
       headID[i].parentNode.removeChild(headID[i]); 
} 

あなたは、あなたがサーバーからHTMLやスクリプトマークアップを取得し、（.htmlを使用することができます何も心配する必要はいけないjqueryのようなライブラリを使用している場合）、APIへのそれは、

1. AJAX経由でスクリプトを取得し、そしてeval()の内容
2. はhead要素にscript要素を挿入し、それが（2）と同じ
3. をロードしたときに報告が、受け入れ、スクリプトURLの配列S、及び

書かれた方法より複雑である（2）及び（3）（例えば、以下のFirefox 3.xおよびそれをサポートしていない古いブラウザと互換性がないかもしれないonreadystatechangeフックを、使用の両方）。

（1）はおそらくXHRを必要とするため、最も堅牢で互換性があります。しかし、あなたがその方法でロードするコードにエラーが発生した場合、ブラウザのコンソールはあまり有用ではないかもしれません。エラーは "evalされたコード"で発生したものであり、特定のファイル/行ではありません。つまり、遅延ロードは一般的には最適化です。したがって、デバッグ中にスクリプトを通常どおりに、または他の2つの方法のいずれかで含めることができます。