jsファイルにJavaScriptファイルを動的にインクルードしようとしています。私はそれについていくつかの調査を行い、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ファイルに依存していることがあるためです。
前もって感謝します。
でpromiseを使用して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
});
別のフィドル</p>
上記のコードでは、Deferredを追加して内部で解決すること$()は、jQuery呼び出し内に他の関数を配置することと同じです。たとえば$(func)、と同じです。
$(function() { func(); });
つまり、DOMの準備が整うのを$.when待つため、上記の例では、すべてのスクリプトが読み込まれ$.Deferred、DOMの準備ができたコールバックで解決される呼び出しのためにDOMの準備が整うのを待ちます。
スクリプトの任意の配列を受け入れるユーティリティ関数は、次のように作成できます。
$.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
});
複数のスクリプトを並行してロードする簡単な関数を実装しました。
function getScripts(scripts, callback) {
var progress = 0;
scripts.forEach(function(script) {
$.getScript(script, function () {
if (++progress == scripts.length) callback();
});
});
}
getScripts(["script1.js", "script2.js"], function () {
// do something...
});
次のような前のスクリプトのコールバックに、次の必要なスクリプトをロードします。
$.getScript('scripta.js', function()
{
$.getScript('scriptb.js', function()
{
// run script that depends on scripta.js and scriptb.js
});
});
スクリプトを特定の順序でロードする必要がある場合があります。たとえば、jQueryはjQueryUIの前にロードする必要があります。このページのほとんどの例では、スクリプトを並列に（非同期に）ロードします。これは、実行の順序が保証されていないことを意味します。y順序付けを行わないと、に依存するスクリプトはx、両方が正常にロードされたが順序が間違っていると破損する可能性があります。
依存スクリプトの順次ロード+オプションの並列ロード+遅延オブジェクトを可能にするハイブリッドアプローチを提案します。
/*
* loads scripts one-by-one using recursion
* returns jQuery.Deferred
*/
function loadScripts(scripts) {
var deferred = jQuery.Deferred();
function loadScript(i) {
if (i < scripts.length) {
jQuery.ajax({
url: scripts[i],
dataType: "script",
cache: true,
success: function() {
loadScript(i + 1);
}
});
} else {
deferred.resolve();
}
}
loadScript(0);
return deferred;
}
/*
* example using serial and parallel download together
*/
// queue #1 - jquery ui and jquery ui i18n files
var d1 = loadScripts([
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js",
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"
]).done(function() {
jQuery("#datepicker1").datepicker(jQuery.datepicker.regional.fr);
});
// queue #2 - jquery cycle2 plugin and tile effect plugin
var d2 = loadScripts([
"https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/jquery.cycle2.min.js",
"https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/plugin/jquery.cycle2.tile.min.js"
]).done(function() {
jQuery("#slideshow1").cycle({
fx: "tileBlind",
log: false
});
});
// trigger a callback when all queues are complete
jQuery.when(d1, d2).done(function() {
console.log("All scripts loaded");
});@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
#slideshow1 {
position: relative;
z-index: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p><input id="datepicker1"></p>
<div id="slideshow1">
<img src="https://dummyimage.com/300x100/FC0/000">
<img src="https://dummyimage.com/300x100/0CF/000">
<img src="https://dummyimage.com/300x100/CF0/000">
</div>両方のキューのスクリプトは並行してダウンロードされますが、各キューのスクリプトは順番にダウンロードされるため、順序付けられた実行が保証されます。ウォーターフォールチャート：
yepnope.jsまたはModernizr（yepnope.jsを含む）を使用しModernizr.loadます。
アップデート
フォローアップするために、これは現在yepnopeを使用しているものと同等であり、複数のスクリプトへの依存関係を示しています。
yepnope({
load: ['script1.js', 'script2.js', 'script3.js'],
complete: function () {
// all the scripts have loaded, do whatever you want here
}
});
マルチスクリプトの読み込みで多くの問題が発生しました。これには、Ajaxによって正常に読み込まれた後、スクリプトの同じドメインのホット読み込みが実際には実行されないという1つの問題が含まれますが、CrossDomainは完全に正常に機能します。:(
元の質問に対する選択された回答は確実に機能しません。
何度も繰り返した後、getScript（s）に対する私の最終的な答えは、スクリプトごとにロードされたコールバックオプションと完了時の全体的なコールバックを使用して、特定の厳密な順序で非同期に複数のスクリプトをロードすることです。見捨てられたInternetExplorer。
私のテストケースは、THREE.JS webGLレンダリングのファイルをロードし、onCompleteへの無名関数呼び出しに渡される間隔チェックを使用してTHREEグローバルが使用可能になったときにレンダリングスクリプトを開始しました。
プロトタイプ関数（getScripts）
function getScripts( scripts, onScript, onComplete )
{
this.async = true;
this.cache = false;
this.data = null;
this.complete = function () { $.scriptHandler.loaded(); };
this.scripts = scripts;
this.onScript = onScript;
this.onComplete = onComplete;
this.total = scripts.length;
this.progress = 0;
};
getScripts.prototype.fetch = function() {
$.scriptHandler = this;
var src = this.scripts[ this.progress ];
console.log('%cFetching %s','color:#ffbc2e;', src);
$.ajax({
crossDomain:true,
async:this.async,
cache:this.cache,
type:'GET',
url: src,
data:this.data,
statusCode: {
200: this.complete
},
dataType:'script'
});
};
getScripts.prototype.loaded = function () {
this.progress++;
if( this.progress >= this.total ) {
if(this.onComplete) this.onComplete();
} else {
this.fetch();
};
if(this.onScript) this.onScript();
};
使い方
var scripts = new getScripts(
['script1.js','script2.js','script.js'],
function() {
/* Optional - Executed each time a script has loaded (Use for Progress updates?) */
},
function () {
/* Optional - Executed when the entire list of scripts has been loaded */
}
);
scripts.fetch();
この関数は、Deferred（Deprecated now？）、When、Success＆Completeを使用して、100％信頼できるものではないことがわかったため、この関数とstatusCodeの使用などです。
必要に応じて、エラー/失敗処理動作を追加することをお勧めします。
$.when次の関数を試すことで、-methodを利用できます。
function loadScripts(scripts) {
scripts.forEach(function (item, i) {
item = $.getScript(item);
});
return $.when.apply($, scripts);
}
この関数は次のように使用されます。
loadScripts(['path/to/script-a.js', 'path/to/script-b.js']).done(function (respA, respB) {
// both scripts are loaded; do something funny
});
これがPromisesを使用する方法であり、オーバーヘッドを最小限に抑えます。
素晴らしい答え、アデネオ。
あなたの答えをより一般的にする方法を理解するのに少し時間がかかりました（コード定義のスクリプトの配列をロードできるようにするため）。すべてのスクリプトがロードされて実行されると、コールバックが呼び出されます。これが私の解決策です：
function loadMultipleScripts(scripts, callback){
var array = [];
scripts.forEach(function(script){
array.push($.getScript( script ))
});
array.push($.Deferred(function( deferred ){
$( deferred.resolve );
}));
$.when.apply($, array).done(function(){
if (callback){
callback();
}
});
}
これは別の、しかし非常に単純なアプローチです。複数のスクリプトをロードするには、それらを本文に追加するだけです。
var scriptsToLoad = [
"script1.js",
"script2.js",
"script3.js",
];
scriptsToLoad.forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.body.appendChild(script);
});
Maciej Sawickiのものを使用しPromise、コールバックとして実装する答えは次のとおりです。
function loadScripts(urls, path) {
return new Promise(function(resolve) {
urls.forEach(function(src, i) {
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = (path || "") + src;
script.async = false;
// If last script, bind the callback event to resolve
if(i == urls.length-1) {
// Multiple binding for browser compatibility
script.onreadystatechange = resolve;
script.onload = resolve;
}
// Fire the loading
document.body.appendChild(script);
});
});
}
使用する：
let JSDependencies = ["jquery.js",
"LibraryNeedingJquery.js",
"ParametersNeedingLibrary.js"];
loadScripts(JSDependencies,'JavaScript/').then(taskNeedingParameters);
すべてのJavascriptファイルはできるだけ早くダウンロードされ、指定された順序で実行されます。その後taskNeedingParameters、と呼ばれます。
あなたが探しているのはAMD準拠のローダー（require.jsのような）です。
http://requirejs.org/docs/whyamd.html
調べてみると、良いオープンソースのものがたくさんあります。基本的に、これによりコードのモジュールを定義できます。他のコードモジュールに依存している場合は、それらのモジュールのダウンロードが完了するまで待機してから実行を続行します。このようにして、10個のモジュールを非同期でロードでき、実行するモジュールが他のいくつかに依存している場合でも問題はありません。
この関数は、依存関係ファイルが完全にロードされた後にファイルがロードされることを確認します。他のファイルへの依存関係を念頭に置いて、ファイルを順番に提供する必要があります。
function loadFiles(files, fn) {
if (!files.length) {
files = [];
}
var head = document.head || document.getElementsByTagName('head')[0];
function loadFile(index) {
if (files.length > index) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", files[index]);
head.appendChild(fileref);
index = index + 1;
// Used to call a callback function
fileref.onload = function () {
loadFile(index);
}
} else if(fn){
fn();
}
}
loadFile(0);
}
これは私のために働きます：
function getScripts(scripts) {
var prArr = [];
scripts.forEach(function(script) {
(function(script){
prArr .push(new Promise(function(resolve){
$.getScript(script, function () {
resolve();
});
}));
})(script);
});
return Promise.all(prArr, function(){
return true;
});
}
そしてそれを使用してください：
var jsarr = ['script1.js','script2.js'];
getScripts(jsarr).then(function(){
...
});
上記のAndrewMarcNewtonの包括的な回答の短いバージョン。これは、ステータスコードが成功したかどうかをチェックしません。これは、未定義のUIの動作を回避するために行う必要があります。
これは、jQueryを保証できるが、他には含まれていない厄介なシステム用でした。そのため、強制された場合に外部スクリプトに組み込まれないように、十分に短い手法が必要でした。（インデックス0を最初の「再帰的」呼び出しに渡すことでさらに短くすることができますが、スタイルの習慣の力で砂糖を追加しました）。
また、依存関係リストをモジュール名に割り当てているので、このブロックは「module1」が必要な場所に含めることができ、スクリプトと依存関係の初期化は1回だけ含まれ/実行されます（indexコールバックにログインして、単一の順序を確認できます）実行中のAJAXリクエストのセット）
if(typeof(__loaders) == 'undefined') __loaders = {};
if(typeof(__loaders.module1) == 'undefined')
{
__loaders.module1 = false;
var dependencies = [];
dependencies.push('/scripts/loadmefirst.js');
dependencies.push('/scripts/loadmenext.js');
dependencies.push('/scripts/loadmelast.js');
var getScriptChain = function(chain, index)
{
if(typeof(index) == 'undefined')
index = 0;
$.getScript(chain[index],
function()
{
if(index == chain.length - 1)
{
__loaders.module1 = true;
/* !!!
Do your initialization of dependent stuff here
!!! */
}
else
getScriptChain(chain, index + 1);
}
);
};
getScriptChain(dependencies);
}
jQueryのgetScriptメソッドを拡張するプラグインがあります。非同期および同期の読み込みを可能にし、jQueryのキャッシュメカニズムを使用します。完全開示、私はこれを書きました。より良い方法を見つけたら、遠慮なく貢献してください。
n個のスクリプトを1つずつロードします（たとえば、2番目のファイルに1番目のファイルが必要な場合に便利です）。
(function self(a,cb,i){
i = i || 0;
cb = cb || function(){};
if(i==a.length)return cb();
$.getScript(a[i++],self.bind(0,a,cb,i));
})(['list','of','script','urls'],function(){console.log('done')});
上記の@adeneoからの回答に基づく：cssファイルとjsファイルの両方のロードを組み合わせる
改善のための提案はありますか？
// Usage
//$.getMultiResources(['script-1.js','style-1.css'], 'assets/somePath/')
// .done(function () {})
// .fail(function (error) {})
// .always(function () {});
(function ($) {
$.getMultiResources = function (arr, pathOptional, cache) {
cache = (typeof cache === 'undefined') ? true : cache;
var _arr = $.map(arr, function (src) {
var srcpath = (pathOptional || '') + src;
if (/.css$/i.test(srcpath)) {
return $.ajax({
type: 'GET',
url: srcpath,
dataType: 'text',
cache: cache,
success: function () {
$('<link>', {
rel: 'stylesheet',
type: 'text/css',
'href': srcpath
}).appendTo('head');
}
});
} else {
return $.ajax({
type: 'GET',
url: srcpath,
dataType: 'script',
cache: cache
});
}
});
//
_arr.push($.Deferred(function (deferred) {
$(deferred.resolve);
}));
//
return $.when.apply($, _arr);
};
})(jQuery);
再帰を使用してこれを試してみることができます。これにより、リスト全体のダウンロードが完了するまで、それらが次々に同期してダウンロードされます。
var queue = ['url/links/go/here'];
ProcessScripts(function() { // All done do what ever you want
}, 0);
function ProcessScripts(cb, index) {
getScript(queue[index], function() {
index++;
if (index === queue.length) { // Reached the end
cb();
} else {
return ProcessScripts(cb, index);
}
});
}
function getScript(script, callback) {
$.getScript(script, function() {
callback();
});
}
@adeneoスクリプトを改善して、指定された順序ですべてのスクリプトをロードするようにしました。チェーンロードを行わないため、非常に高速ですが、さらに高速にしたい場合は、50ミリ秒の待機時間を変更してください。
$.getMultiScripts = function(arr, path) {
function executeInOrder(scr, code, resolve) {
// if its the first script that should be executed
if (scr == arr[0]) {
arr.shift();
eval(code);
resolve();
console.log('executed', scr);
} else {
// waiting
setTimeout(function(){
executeInOrder(scr, code, resolve);
}, 50);
}
}
var _arr = $.map(arr, function(scr) {
return new Promise((resolve) => {
jQuery.ajax({
type: "GET",
url: (path || '') + scr,
dataType: "text",
success: function(code) {
console.log('loaded ', scr);
executeInOrder(scr, code, resolve);
},
cache: true
});
});
});
_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
});