ES Modules
夕焼け。
という言葉のままの、燃えているかのような空。 かすかに吹く風が生暖かい。
ES modules
発表された時はブラウザの実装が微妙だった感があるモジュール機能も、今では普通に使えるようになっている。 もうすぐIEが強制退場になるので、もう面倒なpolyfillに頼る必要もない。
ということで、手元にあるあれこれのモジュール化を試しているのだが、嵌ったのがスコープ。
モジュールで定義した関数は、スコープが違うので、HTMLのイベントハンドラとして直接は指定できない。
具体的には、
<button id="btn01" onclick="mdlFnc01()">ボタン</button>
みたいに onclick とかで指定できない。 そんな関数はないと怒られてしまう。
これを回避するには、モジュール側で要素を拾ってイベントリスナーを設定してやればいい。
例えばこんな感じ。
window.onload = () => {
document.getElementById( 'btn01' ).addEventListener( 'click', mdlFnc01, false );
}
モジュールは
トップレベルに独自のスコープを作る
だそうで、つまり
onclick
とかで指定するJavaScriptの世界とは違うスコープになるのだな。
この点をちゃんと理解しないままに始めて、なんで駄目なのかちょっと悩んでしまった。
自分が嵌ったから言う訳ではないが、なんでわざわざスコープを分けるのかね。 見えてもいいじゃないかと思うのだが。