Модули (ES Modules)

Модули — способ разделять код на файлы. export делает функцию/переменную доступной для других файлов. import подключает их. Каждый модуль имеет свою область видимости — переменные не «вытекают» наружу.

Зачем модули:

• Без модулей весь код в одном файле (или <script> тегах)
• Модули позволяют разделять логику по файлам
• Каждый модуль — изолированная область видимости
• Не конфликтуют имена переменных

Export: // math.js export function add(a, b) { return a + b; } export const PI = 3.14159;

Import: // app.js import { add, PI } from './math.js'; console.log(add(2, 3)); // 5

Named export vs Default export: // Named: export { add, PI }; // Default: export default function greet() {}

// Импорт default: import greet from './greet.js'; // Без фигурных скобок!

Module scope: // В модуле переменные изолированы: // module-a.js const secret = 42; // не доступен другим модулям export function getSecret() { return secret; }

HTML: <script type="module" src="app.js"></script>

type="module" обязательно:

• Без него браузер не понимает import/export
• Модули загружаются с defer по умолчанию
• Модули имеют строгий режим по умолчанию

Модули — как библиотечные книги. Каждая книга (модуль) имеет своё содержимое (переменные). Вы берёте из библиотеки (import) только то, что нужно. Если книга не «экспортирует» информацию — она доступна только внутри.

**Самый простой:**

// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

Самый простой модуль: экспорт функции и импорт в другом файле.

**Простой:**

// utils.js
export const PI = 3.14159;
export function circleArea(r) { return PI * r * r; }
export default function greet(name) { return `Hi, ${name}`; }

// app.js
import greet, { PI, circleArea } from './utils.js';
//         ^default  ^named

console.log(greet('Анна'));    // 'Hi, Анна'
console.log(circleArea(5));    // 78.53975

Named export (фигурные скобки) и default export (без скобок) можно комбинировать.

**Реальный пример:**

// api.js
let baseUrl = '';

export function setBaseUrl(url) {
  baseUrl = url;
}

export async function fetchData(endpoint) {
  const response = await fetch(baseUrl + endpoint);
  return response.json();
}

// app.js
import { setBaseUrl, fetchData } from './api.js';

setBaseUrl('https://api.example.com');
const data = await fetchData('/users');

Реальный пример: модуль API с приватной переменной baseUrl и публичными функциями.

**Неправильно:** Забывать type="module" в HTML

**Почему:** Без type="module" браузер игнорирует import/export и выбрасывает ошибку.

**Правильно:** <script type="module" src="app.js"></script>

**Неправильно:** Путать named и default export

**Почему:** Named export: import { name } from './module.js'. Default: import name from './module.js'.

**Правильно:** Default — без фигурных скобок. Named — с фигурными скобками.

**Неправильно:** Думать, что модули — глобальные

**Почему:** Модули изолированы. Переменная в модуле A не видна в модуле B без export/import.

**Правильно:** Модули изолированы. Используйте export/import для общения между ними.

• export — делает доступным для других модулей
• import { name } from './module.js' — подключает
• export default — экспорт по умолчанию (без имени)
• type="module" обязательно в HTML
• Каждый модуль — изолированная область видимости

Назад: Вы знаете функции и объекты (J9-J18) — теперь вы можете организовать их по файлам.

Вперёд: Следующий урок (J26) — стиль кода: написание чистого и читаемого JavaScript.