遅延ロードされる JS ファイルがあるユースケースがあります。開発中、この JS ファイルはファイル A とファイル B の組み合わせになります。ただし、本番環境では、分離のためにファイル A をロードしてからファイル B をロードする必要があります。これは、それらをDOMに直接追加するときに適切に機能します
for(int i =0; i < urls.length; i++) {
document.write("<script type='text/javascript' src='" + urls[i] + "'></script>");
}
FileB が FileA の前にロードされたとしても、最初に評価されるわけではありません。
私のコードは次のとおりです
createScript: function(url, id) {
var m = this;
// flag as loaded
var myonload = function() {
Logger.debug(formatMessage(Library.RESOURCES["load.success"], [this.src, id]), "core");
this.library_loaded = true;
};
// log loading error
var myonerror = function() {
Logger.warn(formatMessage(Library.RESOURCES["load.failure"], [this.src, id]), "core");
};
//If currently being grabbed
// || m.currentAsyc[ids[i]+"/async"]
if (Library.findScript(url))
return;
var script = document.createElement("script");
script.type = "text/javascript";
script.library_loaded = false;
// mozilla
script.onload = myonload;
script.onerror = myonerror;
// ie
script.onreadystatechange = function() {
if (this.readyState == "complete" || this.readyState == "loaded") {
setTimeout(myonload.bindAsEventListener(this), 10);
this.onreadystatechange = null;
}
};
script.src = url;
m.head.appendChild(script);
},
これにより、DOM は次のようになります。
<script type="text/javascript" src="/path/to/FileA"></script>
<script type="text/javascript" src="/path/to/FileB"></script>
しかし、FileB が FileA よりも速くロードされると、最初に自分自身を評価しようとします。これを防ぐ方法はありますか?
さらなる説明
スプロケットのような機能をレガシー システムに実装しようとしています。通常、「/dyn/path/to/FileA」を要求すると、 //= 上部に FileB が必要になり、次の応答が送信されます
document.write("<script type="text/javascript" src="/path/to/FileA"></script>");
document.write("<script type="text/javascript" src="/path/to/FileB"></script>");
これは、呼び出しを同期的に行うため、うまく機能します。この状況では、動的 FileA が必要とするファイル (FileA と FileB) を確認するために AJAX 呼び出しを行いました。これは、FileA と FileB を要求する必要があることを示しています。問題は、このコードを必要とする他の領域にも待機機能があるため、これらのファイルの両方が実際にロードされたことを確認するためにコールバックが必要なことです。現在、/dyn/path/to/FileA のロードが完了するのを待っていますが、FileA と FileB もロードが完了するのを待つ必要があります。