Module

30433 ワード
Module export/import exports/require モジュール テキストリンク
機能別に分離されたファイルをモジュールと呼びます.
特殊なインジケータ(export/import/export/require)を適用すると、他のモジュールの関数を呼び出すように機能を共有できます.
moduleは特殊なキーワードまたは機能とともに使用されるため、ブラウザでスクリプトがmoduleであることを示す<script type="module">と同じプロパティを設定する必要があります.
<!doctype html>
  <script>
  	import { sample } from './sample.js';
	
	document.body.innerHTML = sample('John');
  </script>

モジュールの機能


厳格モードで実行

  • 'use strict'
  • に割り当てられた宣言されていない変数などのコードは、エラーを引き起こします.
    • // error 출력
// sample-1
alert(user);
// 모듈은 변수를 공유하지 않기 때문에 `Uncaught ReferenceError: user is not defined`라는 에러가 콘솔 패널에 출력됩니다.

// sample-2
let user = "John";

// index.html
<script type="module" src="sample-1></script>
<script type="module" src="sample-2></script>

    モジュールレベルスキャン

  • モジュールのスキャンのみのため、モジュール内で定義された変数/関数は他のスクリプトにアクセスできません.したがって、エクスポートされるモジュールにはexportが必要であり、インポートされるモジュールにはimportが必要です.
    • // sample-1
import { user } from './user.js';

alert(user);

// sample-2
export let user = "John";

<script type="module" src="sample-1"></script>

    評価は1回のみ

  • の1つのモジュールが複数の場所で使用されても、初回呼び出し時に1回のみ実行されます.
    • // alert.js
alert("모듈이 평가되었다");

// 1.js
import './alert.js'; // 모듈이 평가되었다!

// 2.js
import './alert.js'; // 아무일도 일어나지 않음.
    // admin.js
export let admin = {}

export function sayHi(){
	alert(`${admin.name}님, 안녕하세요!`)
}

// init.js
import { admin } from './admin.js';

admin.name = "PePe"

// other.js
import {admin, sayHi} from './admin.js';

alert(admin.name); //PePe

sayHi(); // PePe님, 안녕하세요!

    import.meta

  • は、モジュールに関する情報を提供するようになった.
  • host環境によって提供される情報の内容は異なるが、ブラウザ環境ではスクリプトのurl情報を得ることができる.HTMLのモジュールであれば、現在実行されているページのurl情報を取得できます.
    • <script type="module">
  alert(import.meta.url); // script URL (인라인 스크립트가 위치해 있는 html 페이지의 url)
</script>

    this = undefined

  • モジュール最上位のthisは定義されていません
  • (Default 'window')

    • 入る前の基本情報


    import VS require


    2つのキーワードの同じ目的は、1つのファイルに別のファイルのコードをロードすることですが、構文は少し異なります.

    exports / require

  • NodeJSで使用されるCommonJSキーワード
    • // 모듈 내보내기
module.exports = foo;
exports.bar = bar

// 모듈 가져오기
const foo = require('./foo.js');
const bar = require('./bar.js').bar;

    export / import

  • ES 6に新たに導入されたキーワード
    • export default foo;
export { bar };

import foo from './foo.js';
import { bar } from './bar.js';

    require / exports


    モジュールをCommonJSでエクスポートする場合は、明示的に宣言するのではなく、特定の変数またはその属性をエクスポートするオブジェクトに設定します.
  • exports-複数のオブジェクトをエクスポートする場合は、exports変数のプロパティとして割り当てられます.
  • module.exports-オブジェクトが1つしかエクスポートされていない場合はmodule.変数自体をexportsで割り当てます.

    • 複数のオブジェクトのエクスポート/インポート


    エクスポートexports変数にエクスポートするプロパティの関数を設定します.
    // currency-functions.js
const exchangeRate = 0.91

function roundTwoDecimals(amount){
  return Math.round(amout * 100) / 100;
}

const canadianToUs = function (canadian){
  return roundTwoDecimals(canadian * exchangeRate);
}

function usTocanadian(us){
  return roundTwoDecimals(us / exchangeRate);
}

exports.canadianToUs = canadianTouUs; // 내보내기 1
exports.usToCanadian = usToCanadian; // 내보내기 2
    読み込み
    複数のエクスポートされたオブジェクトがrequrieキーで変数に一度にロードされて割り当てることができる場合、これらの変数からエクスポートされたオブジェクトにアクセスできます.
    const currency = require('./currency-functions.js');

console.log("50 Canadian dollars equals this amount of US dollars:");
console.log(currency.canadianToUs(50));

console.log("30 US dollars equals this amount of Canadian dollars:");
console.log(currency.usToCanadian(30));

    個々のオブジェクトのエクスポート/インポート


    エクスポートmodule.exports変数エクスポートに割り当てられます.
    // currency-class.js
const exchangeRate = 0.91;

// 안 내보냄
function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100;
}

// 내보내기
const obj = {};

obj.canadianToUs = function (canadian) {
  return roundTwoDecimals(canadian * exchangeRate);
};
obj.usToCanadian = function (us) {
  return roundTwoDecimals(us / exchangeRate);
};

module.exports = obj;
    読み込み
    オブジェクトをエクスポートするには、requireのキーワードで変数に割り当てることができ、属性に設定された関数に一般オブジェクトにアクセスするようにアクセスできます.
    const currency = require("./currency-object");

console.log("50 Canadian dollars equals this amount of US dollars:");
console.log(currency.canadianToUs(50));

console.log("30 US dollars equals this amount of Canadian dollars:");
console.log(currency.usToCanadian(30));

    export / import


    ES 6モジュールシステムは最新のツールパッケージであるため、いくつかのメリットがあります.
  • import/from/export/defaultのようにモジュール管理専用キーワードを使用するため、読みやすさが優れています.
  • で非同期で動作し、モジュールで実際に使用されている部分のみをロードするため、パフォーマンスとメモリの面で非常に有利です.
  • export class User {...}-namedexport(複数オブジェクト)、import { User } from '...'.
  • export default class User {...}-default export(単一オブジェクト)、import User from '...' .

    • 複数のオブジェクトのエクスポート/インポート


    モジュールをエクスポートおよびロードするときに、importキーワードの別のキーワードexportを使用して明示的に宣言します.
    このとき、エクスポートされた変数または関数の名前が直接呼び出されるので、Named Exportと呼ばれます.
    エクスポート
    宣言と同時にエクスポートすることも、宣言後に個別にエクスポートすることもできます.
    const exchangeRate = 0.91;

// 안 내보냄
function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100;
}

// 내보내기 1
export function canadianToUs(canadian) {
  return roundTwoDecimals(canadian * exchangeRate);
}

// 내보내기 2
const usToCanadian = function (us) {
  return roundTwoDecimals(us / exchangeRate);
};
export { usToCanadian };
    読み込み
    複数のオブジェクトをロードする場合は、ES 6の解析構文を使用して、必要なオブジェクトをグローバルに選択的に使用するか、すべてのオブジェクトに別名を追加して別名でアクセスできます.
    // Destructuring
import { canadianToUs } from "./currency-functions";

console.log("50 Canadian dollars equals this amount of US dollars:");
console.log(canadianToUs(50));

// Alias
import * as currency from "./currency-functions";

console.log("30 US dollars equals this amount of Canadian dollars:");
console.log(currency.usToCanadian(30));

    個々のオブジェクトのエクスポート/インポート


    エクスポート
    1つのモジュールからオブジェクトがエクスポートされるため、Default Exportと呼ばれます.
    名前は不要なので、変数を別途割り当てることなく、オブジェクトを直接エクスポートできます.エクスポート時に名前は指定されません.したがって、ロード時に名前を使用することもできます.
    const exchangeRate = 0.91;

// 안 내보냄
function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100;
}

// 내보내기
export default {
  canadianToUs(canadian) {
    return roundTwoDecimals(canadian * exchangeRate);
  },

  usToCanadian: function (us) {
    return roundTwoDecimals(us / exchangeRate);
  },
};
    読み込み
    オブジェクトをロードする場合は、importキーを簡単に使用して任意の名前を指定し、そのオブジェクトからプロパティにアクセスするだけです.
    import currency from "./currency-object";

console.log("50 Canadian dollars equals this amount of US dollars:");
console.log(currency.canadianToUs(50));

console.log("30 US dollars equals this amount of Canadian dollars:");
console.log(currency.usToCanadian(30));

    Reference


    リファレンス
    リファレンス
    リファレンス
    【swift3.0/2.3】よく使う!モーダル表示まとめ【背景透明view】
    32 - Counting Duplicates