[解決済み] jQuery $.getScript() メソッドを使用して複数の js ファイルをインクルードする方法

質問

javascriptファイルをjsファイルに動的にインクルードしようとしています。私はそれについていくつかの研究を行い、jQuery $.getScript()メソッドが望ましい方法であることを発見しました。

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
    // what if the JS code is dependent on multiple JS files? 
});

しかし、この方法で複数のスクリプトを一度に読み込むことができるのかどうか疑問に思っています。なぜこれを聞いているかというと、私のjavascriptファイルが複数のjsファイルに依存していることがあるからです。

事前にありがとうございます。

どのように解決するのですか？

答えは

でプロミスを使うことができます。 getScript() のように、すべてのスクリプトが読み込まれるまで待つようにします。

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
    
    //place your code here, the scripts are all loaded
    
});

フィドル

もうひとつのフィドル

上記のコードでは、Deferredを追加し、それを内部で解決しています。 $() のようなjQueryの呼び出しの中に他の関数を置くのと同じです。 $(func) と同じです。

$(function() { func(); });

つまり、DOM の準備が整うのを待ちますので、上記の例では $.when はすべてのスクリプトがロードされるのを待ちます。 と のため、DOM が準備されるのを待ちます。 $.Deferred の呼び出しが DOM ready コールバックで解決されるからです。

より汎用的に使用するために、便利な関数

任意のスクリプトの配列を受け取るユーティリティ関数は、次のように作成できます。

$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript( (path||"") + scr );
    });
        
    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));
        
    return $.when.apply($, _arr);
}

のように使用することができます。

var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];

$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

ここで、パスはすべてのスクリプトの前に付加され、またオプションです。つまり、もし配列が完全な URL を含んでいれば、このようにしてパスを省略することもできます。

$.getMultiScripts(script_arr).done(function() { ...

引数、エラーなど

余談ですが done コールバックは渡されたスクリプトにマッチするいくつかの引数を含み、 各引数はレスポンスを含む配列を表します。

$.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...

ここで、各配列には次のようなものが含まれます。 [content_of_file_loaded, status, xhr_object] . スクリプトは自動的にロードされるので、一般にこれらの引数にアクセスする必要はありません。 done コールバックは、すべてのスクリプトがロードされたことを知るために本当に必要なものです。私は、完全性を期すため、そしてロードされたファイルから実際のテキストにアクセスする必要がある場合、または各XHRオブジェクトや同様のものにアクセスする必要がある場合のために追加しています。

また、いずれかのスクリプトの読み込みに失敗した場合、フェイルハンドラーが呼び出され、それ以降のスクリプトは読み込まれません。

$.getMultiScripts(script_arr).done(function() {
     // all done
}).fail(function(error) {
     // one or more scripts failed to load
}).always(function() {
     // always called, both on success and error
});