JavaScriptでのインポートの詳しい説明（例付き）

この記事では、JavaScript でのインポートについて詳しく説明します (例を示します)。必要な方は参考にしていただければ幸いです。

import ステートメントは、別のモジュールによってエクスポートされたバインディングをインポートするために使用されます。厳密モードが宣言されているかどうかに関係なく、インポートされたモジュールは厳密モードで実行されます。 import ステートメントは埋め込みスクリプトでは使用できません。

Syntax

import defaultExport from “module-name”;
import * as name from “module-name”;
import { export } from “module-name”;
import { export as alias } from “module-name”;
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
import “module-name”;

defaultExport

は、モジュールのデフォルトのエクスポートの名前を参照します。

module-name

インポートするモジュール。これは通常、モジュールを含む .js ファイルへの相対パス名または絶対パス名であり、.js 拡張子が含まれない場合があります。一部のパッケージ化ツールでは、この拡張機能の使用を許可または要求する場合があります。一重引用符と二重引用符で囲まれた文字列のみを許可するかどうかをランタイム環境で確認してください。

name

参照時に一種の名前空間として使用されるモジュール オブジェクトの名前。

export,exportN

インポートされるエクスポート名は

alias,aliasN

となります。インポートの名前を指定するために参照されます。

説明

name パラメーターは、名前空間を使用してエクスポートを参照する「モジュール オブジェクト」の名前です。 export パラメーターは単一の名前付きエクスポートを指定しますが、import * as name 構文はすべてのエクスポートをインポートします。

モジュール全体のコンテンツをインポートします

これにより、myModule が現在のスコープに挿入されます。このスコープには、/modules/my-module にあるファイルからエクスポートされたすべてのモジュールが含まれます。 js.

import * as myModule from ‘/modules/my-module.js’;

ここで、エクスポートにアクセスするということは、モジュール名 (この場合は「myModule」) を名前空間として使用することを意味します。たとえば、上記でインポートしたモジュールに doAllTheAmazingThings() が含まれている場合、次のように呼び出すことができます。 myExport は、モジュール my-module からエクスポートされるか (モジュール全体がエクスポートされるため)、または明示的に (export ステートメントを使用して) エクスポートされ、現在のスコープに myExport を挿入します。

myModule.doAllTheAmazingThings();

複数のエクスポートのインポートfoo と bar を現在のスコープに挿入します。

import { myExport } from ‘/modules/my-module.js’;

エイリアスを使用したエクスポートのインポート

インポート時にエクスポートの名前を変更できます。たとえば、現在のスコープに shortName を挿入します。

import { foo, bar } from ‘/modules/my-module.js’;

インポート時に複数のエクスポートの名前を変更する

エイリアスを使用して、モジュールの複数のエクスポートをインポートします。

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;

副作用のためだけにモジュールをインポートします

モジュールは副作用 (中立的な言葉、軽蔑的な意味合いではありません) のためにのみインポートされ、モジュールを実行するモジュール内に何もインポートされません。グローバル コードですが、実際には値はインポートされません。

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form “/modules/my-module.js”;

デフォルトのインポート

デフォルト エクスポート (オブジェクト、関数、クラスなど) が有効な場合に使用できます。このようなデフォルトは、import ステートメントを使用してインポートできます。

最も簡単な使用法は、デフォルト値を直接インポートすることです:

import “/modules/my-module.js”

上記の使用法 (名前空間インポートと名前付きインポート) でデフォルト構文を同時に使用することもできます。この場合、デフォルトのインポートを最初に宣言する必要があります。

import myDefault from “/modules/my-module.js”;

or

import myDefault, * as myModule from “/modules/my-module.js”;

Example

AJAX DSON リクエストの処理を支援するためにヘルパー モジュールからインポートされました。

モジュール: file.js

import myDefault, { foo, bar } from “/modules/my-module.js”;

メインプログラム: main.js

function getJSON(url, callback){
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        callback(this.responseText)
    };
    xhr.open(‘GET’, url, true);
    xhr.send();
}
export function getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}

補足

厳密モー​​ド

厳密モー​​ド

埋め込みスクリプト

以上がJavaScriptでのインポートの詳しい説明（例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。