前置き
外部JSの読み込みって様々な方法があるけど、違いがよくわからなかったり、できることが違ったり、使いやすさが違ったり...するので自分なりにまとめてみました。
私はjQueryを使用するときにしょっちゅう使っています
main.jsがimport.jsを呼び出すというものになります。
コード
私がよく使うのは４つあります。
- HTML(静的)
- HTML(動的)
- Fetch (3'としてxhr)
- Module
早速書いていきます。
1.HTML経由(静的)
単純。多分最初に思いつくやつ。
<script src="import.js"></script>
<script src="main.js"></script>
main.jsで使うもの(import.js,例えば変数や関数など)はmain.jsの読み込み前に読み込む必要があります。
###ダメな例
<script src="main.js"></script>
<script src="import.js"></script>
これでは○○ is not definedと出て使えないです。
main.jsで使うものがimport.jsを読み込むことで定義されるからです。
（ちなみに、これ書いているときに変数も外部からのものを使えることを知りました。）
2.動的なHTML要素作成
これはHTML経由とほぼ同じなのですが、動的にできたりとか、ファイル名を変数化できたりとかできます。実行が終わったらその部分のコードを消すことも可能です。
var script = document.createElement('script'); //変数名は適当なものにでも
script.src = "import.js"; //ファイルパス
document.head.appendChild(script); //<head>に生成
// document.body.appendChild(script); /*<body>に生成する場合はこちら*/
これで、動的に<script src="import.js"></script>を生成したことになります。
もし実行が終了したときには、
document.removeChild(script)で要素を消去可能です。
3.Fetch
順番に実行可能。JSのみならず、HTMLとかCSSも読み込めます。
私はよくjQueryの読み込みに使用します。
jQueryのファイル読み込んだ後にこのコードを実行してくださいなといった具合に。
ただしCORSの関係で他ドメインのファイルはできない(...と思う)。
fetch('./import.js').then(r=>{return r.text()}).then(t=>{
// "t"にimport.jsのファイル内容が格納されているので
eval(t); //その内容を実行する
});
こんな感じで私はjQueryの読み込みに使う。
fetch('./jQuery.js').then(r=>{return r.text()}).then(t=>eval(t)).then(()=>{
//jQueryのコード
});
こっちでは変数は使えないようです（少なくとも私の環境では）
2019.03.30追記。
アロー関数を学んで気づいたのですが、これは以下の書き方が可能なようです。fetch('./jQuery.js').then(r=>r.text()).then(t=>eval(t)).then(()=>{ ... }つまり、
r=>{return r.text()}を、r=>r.text()と書けるということです。便利。
3'.XMLHttpRequest(xhr)
私はxhrを使わないけど、仕様的にはFetchと同じ...？
var xhr = new XMLHttpRequest();
xhr.addEventListener('load',function(){ //thisを使っているのでアロー関数は使えない
eval(this.responseText);
});
oReq.open("GET", "./import.js");
oReq.send();
XMLHttpRequest の利用 - Web API | MDNをもとに編集。
4.Module
JSのみでImport/Export可能。とてもシンプルな構文だけどtype="module"をHTML側につけなければならない。
<script type="module" src="main.js">
import txt from "./import" //これが必要になります
console.log(txt);
const txt = "Hello,World";
export default txt; //これが必要になります
このように、Import/Exportの1文が必要となります。
export default (変数や定数、関数など)をもとにimport.jsに書き、
import (変数など) from (ファイル名)とやればその変数を取り込めます。
あとがき
こんな感じに書いていきましたが、アドバイス等もいただけると幸いです。
ミスもあればコメントよろしくお願いいたします。