Урок 64 из 114 · 8 мин

Модули полностью

export default, import * as, динамический import(), import.meta и await на верхнем уровне модуля.

Все формы

Лев
Я видел import * as cart и await import(...). Что это?
Ника
Ещё несколько форм импорта. Пример сразу запустить нельзя — модулям нужны отдельные файлы, — поэтому покажу запись.

Ключевое слово

export default

Экспорт по умолчанию

Что это: export default function Cart() {} — главный экспорт модуля; импортируется под любым именем: import Cart from "./cart.js".
Зачем: Модуль, который экспортирует одну главную вещь.

Ключевое слово

import * as

Всё пространство имён

Что это: import * as cart from "./cart.js" — объект со всеми экспортами модуля: cart.total().
Зачем: Много экспортов под одним именем.

Функция

import()

Динамический импорт

Что это: const m = await import("./charts.js") — загрузить модуль по требованию, возвращает промис.
Зачем: Грузить тяжёлый код только когда нужен.

Объект

import.meta

Сведения о модуле

Что это: import.meta.url — адрес текущего модуля.
Зачем: Строить пути к файлам рядом с модулем.

Ника
Один модуль — одна тема. Тяжёлое и редкое — через динамический import().

Ваш ход

Задание

Ленивая загрузка

Модули в песочнице недоступны, поэтому смоделируем: напиши async function loadCharts(loader), которая при первом вызове ждёт loader() (как import()) и кэширует результат — второй вызов не грузит повторно.

Загрузка один раз, потом из кэша — пока нет

async function loadCharts(loader) {
  return loader();
}

async function loadCharts(loader) {
  return loader();
}

Результат обновляется при вводе

ПрактикаОбязательное задание

default

Выберите один ответ.

Как импортировать export default?

Домашнее заданиеДля закрепления

import()