javascript - JavaScript コードから JavaScript を順次ロードする

Question

単一のスクリプトタグを挿入することでページに含まれるJavaScriptウィジェットがあります（アプリケーションは簡単に配布できる必要があるため）：

<script type="text/javascript" src="loadMyWidget.js"></script>

次に、loadMyWidget.js は複数のスクリプト ファイルをロードする必要があり、特定の順序で実行する必要があります。スクリプト要素を DOM に挿入して非同期でロードしようとしましたが、シーケンスを制御できません。

また、最新のブラウザーに最適な head.js を使用してみましたが、IE7 および 8 では動作しません。

残念ながら、スクリプトを 1 つのファイルに縮小することは困難です。これは、さまざまなプロジェクトからの多数のファイルで構成されており、スクリプトを更新するタイミングがわからないためです。

シンプルに見えるかもしれませんが、特定の順序で JavaScript コードから JavaScript ファイルをロードし、IE7 や 8 を含むすべてのブラウザーで動作させる必要があります。

Answer 1

jQuery.getScript() を使用している場合は、それを $.when() として使用して、ロードが停止するまで実行を保留できます。

「順次実行」とは、実行前に必要条件をロードする必要があることを意味する場合、以下が機能します

$(function(){
   $.when(
      $.getScript("/script1"),
      $.getScript("/scirpt2"),
      $.getScript("/script3")
}).done(function(){
    // do stuff with the contents of my new script files
});

順次実行によって、ファイルを次々に実行する必要があることを意味する場合は、これを試してください。

$.Deferred()
.then(function () { return $.getScript("/script1"); })
.then(function () { return $.getScript("/scirpt2"); })
.then(function () { return $.getScript("/script3"); })
.resolve();

もちろん、これには jQuery が必要ですが、編集後はうまくいかない場合があります。

推奨読書

• http://api.jquery.com/jQuery.getScript
• http://api.jquery.com/category/deferred-object/
• http://api.jquery.com/jQuery.when/

Answer 2

バニラ JS が必要な場合は、次のようなものが機能します。

function loadScripts(scripts, complete) {
    var loadScript = function( src ) {
        var xmlhttp, next;
        if (window.XMLHttpRequest)  {
            xmlhttp = new XMLHttpRequest();
        } else {
            try {
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return;
            }
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                eval(xmlhttp.responseText);
                next = scripts.shift();
                if ( next ) {
                    loadScript(next);
                } else if ( typeof complete == 'function' ) {
                    complete();
                }
            }
        }
        xmlhttp.open("GET", src , true);
        xmlhttp.send();
    };

    loadScript( scripts.shift() );
}

loadScripts(['jquery.js','jquery.plugin.js'], function() {
    console.log('loaded');
});

Chrome でテスト済み、IE でも動作するはずです。

Answer 3

私はこれとまったく同じ問題に遭遇し、それを次のように処理しました：

document.write('<script type="text/javascript" src="other1.js"></script>');
document.write('<script type="text/javascript" src="other2.js"></script>');

runSomeCode();

コードが読み込まれ、同期して実行されます。長所：シンプル、軽量、クロスブラウザー準拠、詳細なし。短所：醜い。

詳細：https ：//stackoverflow.com/a/3292763/235179

Answer 4

require.js を試しましたか? http://requirejs.org/