javascript には import / include / require はありませんが、目的を達成するには主に 2 つの方法があります。
1 - AJAX 呼び出しでロードしてから、eval を使用できます。
これは最も簡単な方法ですが、Javascript の安全性設定のためにドメインに制限されており、eval を使用するとバグやハッキングへの扉が開かれます。
2 - HTML にスクリプト URL を含むスクリプト要素を追加します。
間違いなく最善の方法です。外部サーバーからでもスクリプトを読み込むことができ、ブラウザのパーサーを使用してコードを評価するため、クリーンです。要素は、Web ページのscript要素内head、または の下部に配置できますbody。
ここでは、これら両方のソリューションについて説明し、図解します。
さて、知っておかなければならない大きな問題があります。これを行うことは、コードをリモートでロードすることを意味します。最新の Web ブラウザーは、パフォーマンスを向上させるためにすべてを非同期に読み込むため、ファイルを読み込み、現在のスクリプトを実行し続けます。
つまり、これらのトリックを直接使用すると、新しくロードされたコードをロードするように要求した後の次の行では、コードがまだロードされているため、使用できなくなります。
EG : my_lovely_script.js には MySuperObject が含まれています
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
次に、F5 キーを押してページをリロードします。そしてそれはうまくいきます！紛らわしい...
それで、それについて何をしますか？
さて、私が提供したリンクで著者が提案するハックを使用できます。要約すると、急いでいる人のために、en イベントを使用して、スクリプトがロードされたときにコールバック関数を実行します。したがって、リモート ライブラリを使用するすべてのコードをコールバック関数に入れることができます。例：
function loadScript(url, callback)
{
// adding the script element to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// then bind the event to the callback function
// there are several events for cross browser compatibility
script.onreadystatechange = callback;
script.onload = callback;
// fire the loading
head.appendChild(script);
}
次に、スクリプトがラムダ関数にロードされた後に使用するコードを記述します。
var myPrettyCode = function() {
// here, do what ever you want
};
次に、すべてを実行します。
loadScript("my_lovely_script.js", myPrettyCode);
はい、分かりました。でも、これだけ書くのはめんどくさい。
その場合は、いつものように素晴らしい無料の jQuery フレームワークを使用して、まったく同じことを 1 行で行うことができます。
$.getScript("my_lovely_script.js", function() {
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});