Модули JavaScript
Модули разделяют код JavaScript по файлам. export открывает значение, а import использует его. Видимая строка: lida / tea / mint.
Именованный экспорт
Именованный экспорт сохраняет точное имя; один модуль может экспортировать несколько значений.
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink и label доступны другим модулям, потому что экспортированы. Остальное остаётся внутри файла.
Именованный импорт
Имена импортируются в фигурных скобках.
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
Import связывает экспортированные значения, а не создаёт отдельную копию. В браузере нужен HTTP или HTTPS.
Экспорт по умолчанию
Default обычно является главным значением модуля. При импорте имя выбирается без скобок.
export default function greet(name) {
return `Hello, ${name}!`;
}
import greet from "./greeting.js";
console.log(greet("lida"));
Именованные импорты используют { drink, label }, а default — greet. В файле может быть только один default export.
Область модуля и динамический import
Верхнеуровневые объявления не становятся свойствами window. import() загружает позже и возвращает Promise.
const secret = "not global";
export const items = ["tea", "mint"];
import("./menu.js").then((menu) => console.log(menu.items.join(" / ")));
console.log(window.secret); // undefined
Границу пересекает только items. Результат динамического импорта — namespace-объект с экспортами-свойствами.
Самодостаточная демонстрация
Страница создаёт код в памяти, получает Blob URL и импортирует его без файлов проекта.
<p id="result"></p>
<script type="module">
const source = `export const drink = "tea"; export function label(name) { return name + " / " + drink + " / mint"; }`;
const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
const module = await import(url);
document.querySelector("#result").textContent = module.label("lida");
URL.revokeObjectURL(url);
</script>
Страница показывает ровно lida / tea / mint. type="module" включает синтаксис, а Blob URL не требует сетевого файла.
В настоящем проекте используйте math.js, app.js и <script type="module" src="./app.js"></script>. file:// ненадёжен; используйте HTTP-сервер.
📊 Варианты модулей
| Синтаксис | Назначение | Пример |
|---|---|---|
| Именованный export/import | Передать конкретные имена | export const drink = "tea" / import { drink } ... |
| Default export/import | Передать главное значение | export default function greet() / import greet ... |
| Динамический import | Загрузить позже и получить Promise | import("./menu.js").then(...) |
| Область модуля | Скрыть верхнеуровневые объявления | const secret = "not global" |
Практика
Создайте math.js, импортируйте drink и label в app.js, добавьте default greet и выведите lida / tea / mint.
Частые ошибки
Не убирайте скобки у именованных импортов, не создавайте два default export и не считайте неэкспортированное значение глобальным.
Главное
export выбирает доступные значения, import использует их, default получает выбранное имя, а область модуля защищает остальные объявления.
Делайте модули небольшими и освобождайте временные Blob URL после демо.
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху