2017年からES6 Modules、ES Modules、またはESMと呼ばれるJavaScriptを外部参照する際の新しい仕様が広まってきました。
まだ筆者も勉強中ですが、簡単に説明すると外部参照するJSの任意の部品(モジュール)を使うための新しいルールといった感じです。
以下はそのサンプルで、外部のJSのfunctionをボタンを押されることで発火させています。
ボタンが押されるとこの要素にクラスを追加されます
ボタン
上のボタンを押すとid="demo_text"の要素に、class名「demo_style」を追加 / 削除します
単純な動作ですが、以下のようにあえて外部JSのfunctionを呼んでいます。
JSを呼ぶ側はこんな内容です。
<script type="module"> //type="module"は必須です import {myToggleClass} from "/js/esm/sample/220/sample-module.js"; // import { 呼びたいfuctionなどカンマ区切り } from "参照するJSファイル"; document.getElementById("demo_btn").onclick = function() { myToggleClass('demo_text','demo_style'); //呼び出したfunctionが使えます }; </script>
とてもシンプルで読めばどこの何を使っているのか、を宣言するような書き方になっています。
JSはHTML内のどこで外部参照しても、すべて読み込み、書き方によってはどこでも部品を呼び出すことができるので、メリットでもあり、混乱のもとでもあります。
このような記述が普及すれば、重複や乱用が減って、長い目で保守、更新が楽になります。
読まれる側のsample-module.jsは、以下の内容で記述してあります。