モジュール

7160 ワード
js テキストリンク
モジュール
JavaScriptファイル
モジュール化
機能別ファイル
モジュール化のメリット
1.コードを効率的に管理できます.
2.他のプログラムで再利用できます.

モジュールスキャン


モジュールファイルに宣言された変数は、外部からの自由なアクセスを防止する必要があります.
👉🏻 モジュールは、ファイルにモジュールファイルのみに属する独立したスキャンを持つ必要があります.
<body>
  <!-- 모듈 스코프 갖게 하려면 type 속성값을 module로 지정해주면 된다. 이제 공유 안됨 -->
  <script type="module" src="index.js"></script>
</body>

モジュール構文


export


モジュールスキャン付きファイルからexportキーワードで外部にエクスポートする変数または関数をエクスポートします.
export const title = 'JS';

export function print(value) {
  console.log(value);
}

一括エクスポート

const title = 'JS';

function print(value) {
  console.log(value);
}

export { title as printerTitle, print };

import


モジュールファイルからエクスポートされた変数または関数は、他のファイルのimportキーを介してインポートされます.
// index.js
import { printerTitle, print } from './printer.js';
import { data as members } from './members.js';

print(printerTitle);
print(members);

一括インポート

import * as printerJS from './printer.js';

console.log(printerJS.title);
ただし、すべてインポートすると効率が悪く、必要な変数や関数のみをインポートすることをお勧めします.

default


exportではdefaultキーワードを使用して、モジュールファイルでデフォルトのエクスポート先を決定します.
defaultキーワードはサムネイル構文importを使用することができるため、通常、モジュールファイルにexportターゲットが1つしかない場合、defaultのより簡潔なコードを使用することが想定される.
export
const title = 'JS';
const name = 'BMO';

function print(value) {
  console.log(value);
}

export default { print, name };
import
// index.js
import printerJS from './printer.js';  // 변수명 자유롭게 지정 가능

console.log(printerJS.title)  // undefined
🗣 exportとdefault exportを同時に使用することもできます.
Gitでコミットの間で前後に動く方法
useStateとInterFace