環境
初書：2020/09/10
前書き
javascriptにも名前空間というのがないのか調べていたところ、importというのを見つけたので、
名前空間ではないがそれっぽい動作になりそうなので使ってみる。
前提条件
・import / exportはES6以降でしか対応していない。そのため、IE対応のHPを作成しようと考えている場合は使えない。
・import / exportを使用した場合、宣言に関わらずstrict モードになる。
・ローカル環境では動作しない。（httpもしくはhttpsから始まれば使える。Finderなどでhtmlファイルダブルクリックで開くようなものは動かない、らしい）
記述方法
ライブラリ側
ライブラリとして提供したいものにexport関数を付ける
export function id(val){
return document.getElementById(val);
}
export var pi = 3.14;
ちなみにエクスポート可能なものは、var, let, const, function, class
また、他にもexportする方法はいくつかあるので、詳細はMDN exportで
利用側
使う方は何ていうのが正解なのだろうか。。？
まぁとりあえず、こちらの方は上記のライブラリをインポートする必要がある
今回は上記のlib.jsと、使う側のmain.jsは同じフォルダにあると仮定する。
import {id, pi} from "./lib.js";
console.log(id("aa").innerHTML);
console.log(pi);
もしくは
import * as lib from "./lib.js";
console.log(lib.id("aa"));
console.log(lib.pi);
上の場合は、宣言された名前の通りに使用する事が可能かつ必要なもののみインポート可能で、下の場合は、複数のライブラリを読み込む際に名前の競合を避ける事ができる。
ちなみに*は"全ての"という意味。ここを{id, pi}に置き換えることは出来ない。
こちらも他にimportする方法はいくつかあるので、詳細はMDN import
使ってみる
使う際は、main.jsのみ読み込めばいい。またtype="module"を付ける必要がある。
で、このmoduleというのが普通のjavascriptと少し異なる箇所になる。
詳細は、JavaScript モジュールを読んでいただくとして、普通のscriptを読み込むのと異なり、
・ローカルで実行出来ない（前提条件に記述したもの）
・自動的にstrictモードになる（前提条件に記述したもの）
・defer属性を付けなくても遅延実行される
・グローバル環境からアクセス出来ない
という制約が出来ます。1
ということでhtmlの記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="aa">aaaaaa</div>
<script type="module" src="main.js"></script>
</body>
</html>
これで、コンソール上には<div id="aa">aaaaaa</div>と3.14が表示されているはず。
注意点
"使ってみる"の箇所の太字欄にも記載してある通り、グローバル環境からアクセス出来なくなる。
そのため、例えばデバッグのためにコンソールから変数にアクセスしようとしても失敗する。
また、main.jsとmain2.jsのように複数読み込んでも、import/exportの関係では無い場合はお互いの変数や関数にアクセスすることは出来ない。
逆にいうと、ファイルの全体を(() => {})()で囲わなくてもグローバル変数を荒らさない。
また、main.js内からグローバル変数にアクセスすることは可能。
参考サイト
・JavaScriptのimport文を使ってみた
・JavaScript 別ファイルからクラスをインポートしたい
・import
・export