JavaScriptのスクリプトファイル(.js)の読み込み方法
<script src="script.js">
モジュール
上記の方法は、あらかじめ読み込むファイルがわかっている必要がある。
わからない場合、動的に読み込む必要がある。
モジュールで読み込むことができる
export モジュール名;
「モジュール名」は、関数だったりオブジェクトだったりする。
exportに指定したものが、「モジュール」として外部から利用できるようになる。
例）
script.jsにモジュール MyObjを定義
export function MyObj() {
return {
red:255, green:125, blue:0,
total:function(){
return this.red + this.green + this.blue;
}
};
};HTMLファイルで、モジュール MyObjを読み込む
<html><body>
<script type="module">
import {MyObj} from './script.js';
var ob = new MyObj();
document.getElementById("ob").textContent = ob.total();
</script>
<div id="ob"></div>
</body></html>export default
上記の方法だと、script.jsにMyObjという名前で関数やオブジェクトが定義されていることがわかっている必要がある。
この問題を解決するのが、export default
名前は読み込んだ側で適当につけるという利用方法
exportする際に、関数やオブジェクト名を指定せず、「default」を指定する。
例）
上記をexport defaultに書き直し
script.jsにexport defaultを定義
export deault function () {
return {
red:255, green:125, blue:0,
total:function(){
return this.red + this.green + this.blue;
}
};
};HTMLファイルで、モジュール myobjと名前をつけてを読み込む
<html><body>
<script type="module">
import myobj from './script.js';
document.getElementById("ob").textContent = ob.total();
</script>
<div id="ob"></div>
</body></html>参考文献：