一つの文章は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厳格モード埋め込みスクリプト