一つの文章はJavaScriptの中のimportを分かります.

3808 ワード

import文は、他のモジュールから導出されたバインディングを導入するために使用されます.strict modeを宣言しても、導入したモジュールは厳格なモードで動作します.import文は組み込みスクリプトでは使用できません.
構文

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”;

default Export
参照モジュールをデフォルトでエクスポートする名前です.
module-name
インポートするモジュール.これは一般にモジュールを含んでいます.jsファイルの相対的または絶対的なパス名は、js拡張子を含まなくてもいいです.いくつかのパッケージツールは、拡張機能の使用を許可または要求できます.あなたの運転環境を確認してください.シングルクォーテーションマークとダブルクォーテーションマークの文字列だけが許可されます.
name
参照は名前空間のモジュールオブジェクトの名前として使用されます.
export
インポートするエクスポート名
alias、alias N
参照で指定されたインポートの名前を指定します.
説明
nameパラメータは「モジュールオブジェクト」の名前です.名前空間で参照してエクスポートします.エクスポートパラメータは単一の名前付き導出を指定しますが、import*as name文法はすべてのエクスポートを導入します.
モジュール全体の内容をインポート
これは、myModuleを現在の作用領域に挿入し、この中には、／modules／my−module.jsファイルから導出されたすべてのモジュールが含まれている.

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

ここでのアクセス導出は、モジュール名(この場合は「myModule」)を名前空間として使用することを意味する.例えば、上に導入されたモジュールにdoAllThe Amazings()が含まれている場合、このように呼び出すことができます.

myModule.doAllTheAmazingThings();

単一のエクスポートをインポート
myExportというオブジェクトまたは値が与えられ、モジュールmy−moduleから導出されたか、または明示的に導出されたか(export文を使用して)、myExportは現在のスコープに挿入された.

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

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

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 “/modules/my-module.js”

標準値をインポート
default-export(オブジェクト、関数、クラスなど)が有効な場合に使用できます.このようなデフォルト値は、import文を使用して導入することができます.最も簡単な使い方は、直接標準値を導入することです.

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

default文法は上記の用法(名前空間導入と命名導入)と同時に使用することもできます.この場合、default導入はまず声明しなければならない.

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

または

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

例
サブモジュールから導入してAJAX DSON要求の処理に協力します.
モジュール:file.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)));
}

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

import { getUserFulContents } from “/modules/file.js”;
getUserFulContents(‘http://www.example.com”, 
    data => { doSomethingUseful(data); } )

追加
stict mode厳格モード埋め込みスクリプト

String()とtoString()の違いと応用