JavaScriptプログラムに関する各種メモ書き

type="module"を記述してimport / export をそのままの javascript で使用する

● type="module"を記述してimport / export をそのままの javascript で使用する

<script type="module">

これにより次のようなことが起こります

・1. this のデフォルト が window ではなく undefined になる。
・2. 実行タイミングが body の後になる(  $(document).ready よりかは前 )。
・3. コードは常にStrictモードで実行される。
・4. import / export が使用できるようになる。
・5. 動的なモジュールの読み込みが可能になる。
・6. 同じ   <script type="module" src="myfile.js"></script> は何時出しても1度しか実行されない

● サンプル

(通常の script)

https://pgmemo.tokyo/livedemo/javascript_type_module/default.html

(通常の type="module" としたscript)

https://pgmemo.tokyo/livedemo/javascript_type_module/type_module.html

<script>
	window.addEventListener('DOMContentLoaded', (event) => {
		document.getElementById( 'jstext' ).innerHTML += '● 3. DOMContentLoaded ';
	});
</script>

<script type="module">
	console.log( '● this' );
	console.log( this );

	document.getElementById( 'jstext' ).innerHTML += '● 2. jsによる出力(type="module") ';
</script>
<div>javascriptのテストを行います。</div>

<script>
	document.getElementById( 'jstext' ).innerHTML += '● 1. js text ';
</script>

引用 : https://qiita.com/azukiazusa/items/98845e79807fff0dd3cb
https://hidekazu-blog.com/javascript-module/#toc11

● モジュールの通常のスクリプトの間のその他の違い

  • ローカルでテストしようとするときは注意してください。ローカルから (つまり file:// URL を使って) HTML ファイルを読み込もうとすると、JavaScript モジュールのセキュリティ要件のために、CORS エラーが発生します。テストはサーバー経由で行う必要があります。
  • また、モジュール内部で定義されたスクリプトの動作は、通常のスクリプト内部のものと異なるかもしれません。これは、モジュール内部では自動的に Strict モード が使われるからです。
  • モジュールのスクリプトを読み込むときに defer 属性 を使う必要はありません。モジュールは自動的に遅延実行されます。
  • モジュールは、複数の <script> タグで参照されていても一度しか実行されません。
  • 最後ですが重要なこととして明らかにしておきますが、モジュールの機能は単独のスクリプトのスコープにインポートされます。つまり、インポートされた機能はグローバルスコープから利用することはできません。それゆえ、インポートされた機能はインポートしたスクリプトの内部からしかアクセスできず、例えば JavaScript コンソールからはアクセスできません。文法エラーは開発ツール上に表示されますが、使えることを期待するデバッグ技術の中には使えないものがあるでしょう。

https://mzl.la/3PV9jPk

● type="module"の時にグローバル変数を作る方法

windowsオブジェクトに勝手にプロパティーを追加してグローバル変数とします

window.globals = {変数名: 値}

引用 : https://qiita.com/17ec084/items/75c9970ca37c5dd1b788

No.2187
07/25 11:52

edit