Статья для понимания импорта в JavaScript

JavaScript

Оператор 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”;

defaultExport

Будет ссылаться на имя экспорта модуля по умолчанию.

module-name

Модуль для импорта. Обычно это относительный или абсолютный путь к файлу .js, содержащему модуль, за исключением расширения .js. Некоторые инструменты упаковки могут разрешать или требовать использования этого расширения; проверьте свою среду выполнения и разрешите только строки в одинарных и двойных кавычках.

name

Имя объекта модуля, которое будет использоваться как своего рода пространство имен при ссылке.

экспорт, экспортN

имя экспорта для импорта

псевдоним, псевдоним N

Будет указано имя указанного импорта.

описывать

Параметр имени — это имя «объекта модуля», который будет использовать своего рода пространство имен для ссылки на экспорт. Параметр экспорта указывает один именованный экспорт, в то время как синтаксис импорта * как имя импортирует все экспорты.

Импортировать содержимое всего модуля

Это вставит myModule в текущую область со всеми модулями, экспортированными из файла, расположенного в /modules/my-module.js.

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

Здесь доступ к экспорту означает использование имени модуля (в данном случае «myModule») в качестве пространства имен. Например, если импортированный выше модуль содержит функцию doAllTheAmazingThings(), вы можете вызвать ее следующим образом:

myModule.doAllTheAmazingThings();

Импорт одного экспорта

Учитывая объект или значение с именем myExport, которое было экспортировано из модуля my-module (поскольку весь модуль экспортируется) или явно (с помощью оператора экспорта), вставляет myExport в текущую область.

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

Импорт нескольких экспортов

Вставьте foo и bar в текущую область видимости.

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

импортировать экспорт с псевдонимом

Экспорты можно переименовать при импорте, например, вставив в текущую область видимости shortName.

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”

импортировать значения по умолчанию

Доступно, когда действует экспорт по умолчанию (будь то объект, функция, класс и т. д.). Затем такие значения по умолчанию можно импортировать с помощью оператора импорта. Самое простое использование - напрямую импортировать значение по умолчанию:

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

Также можно одновременно использовать синтаксис по умолчанию с указанными выше способами (импорт пространства имен и именованный импорт). В этом случае импорт по умолчанию должен быть объявлен первым.

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

или

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

Пример

Импортировано из вспомогательного модуля для помощи в обработке запросов AJAX DSON.

Модуль: файл.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); } )

Пополнить

строгий режим строгий режим Встроенный скрипт

Категории