Модули: import / export

Любой большой проект — это не один огромный файл на 10 000 строк, а сотни маленьких, хорошо организованных файлов. Модули — это механизм, который позволяет разделить код на части и связать их между собой. Разбираемся, как это работает в JavaScript.

📁 Зачем вообще нужны модули?

Представьте: вы пишете приложение. Сначала — пара функций, несколько переменных, всё умещается в один файл. Жизнь прекрасна. Но через пару месяцев в этом файле уже 2000 строк, а через год — 8000. Вы уже не помните, где что находится. Функция с именем helper определена трижды в разных местах. Переменная data используется везде и непонятно, где она была изменена последний раз.

Это классическая проблема «спагетти-кода» — когда всё перемешано и невозможно разобраться. Именно для её решения были придуманы модули.

Модули дают несколько важных преимуществ. Во-первых, изоляция: переменные внутри модуля не видны снаружи, если вы специально не экспортируете их. Никаких случайных конфликтов имён. Во-вторых, переиспользование: написал функцию один раз — импортируй её в любой файл проекта. В-третьих, читаемость: вместо одного монстра — много маленьких, понятных файлов, каждый из которых делает одно дело.

🏷️ Named exports — именованный экспорт

Самый распространённый тип экспорта — именованный. Это когда вы явно «публикуете» какие-то переменные, функции или классы из файла, давая им конкретные имена.

Представьте, что вы создаёте файл utils.js с набором вспомогательных функций. Вы хотите, чтобы другие файлы могли их использовать. Добавьте ключевое слово export перед каждой функцией или переменной, которую хотите «открыть»:

// utils.js

// Эти функции доступны для других файлов
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export function formatName(firstName, lastName) {
  return `${firstName} ${lastName}`.trim();
}

// Эта переменная — ПРИВАТНАЯ, снаружи не видна
const secretKey = "abc123";

function helperInternal() {
  // внутренняя утилита — не экспортируем
  return "только для внутреннего использования";
}

Теперь в другом файле — main.js — мы можем импортировать именно то, что нам нужно, указав имена в фигурных скобках:

// main.js

// Импортируем только то, что нужно
import { add, multiply, PI } from './utils.js';

console.log(add(2, 3));        // 5
console.log(multiply(4, 5));   // 20
console.log(PI);               // 3.14159

// Попытка использовать secretKey — ошибка!
// console.log(secretKey); // ReferenceError

Есть ещё один вариант: экспортировать всё сразу в конце файла. Это удобно, когда хочется видеть в одном месте, что именно «публичное» в этом файле:

// math.js

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;

// Экспортируем всё в конце — удобно для просмотра "публичного API" файла
export { add, subtract, multiply };

При импорте можно переименовать что-то через ключевое слово as, если имя занято или нужно сделать его короче:

// Переименование при импорте
import { formatName as format, add as sum } from './utils.js';

console.log(format("Иван", "Петров")); // Иван Петров
console.log(sum(10, 20));              // 30

⭐ Default export — экспорт по умолчанию

Каждый модуль может иметь один — и только один — экспорт по умолчанию. Это удобно, когда файл делает одно главное дело: например, определяет один класс, одну функцию или один компонент React.

// user.js

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  greet() {
    return `Привет, меня зовут ${this.name}!`;
  }
}

// Экспорт по умолчанию — только один на файл
export default User;

При импорте default-экспорта фигурные скобки не нужны, и вы можете дать импортируемому значению любое имя:

// main.js

// Имя выбираем произвольно — не обязательно User
import User from './user.js';
import MyUser from './user.js'; // Тоже сработает

const alice = new User("Алиса", "alice@example.com");
console.log(alice.greet()); // Привет, меня зовут Алиса!

Можно смешивать оба типа в одном файле — это вполне нормальная практика:

// api.js

// Default export — главная функция файла
export default function fetchUser(id) {
  return fetch(`/api/users/${id}`).then(r => r.json());
}

// Named exports — вспомогательные константы
export const BASE_URL = "https://api.example.com";
export const TIMEOUT = 5000;

// main.js
import fetchUser, { BASE_URL, TIMEOUT } from './api.js';
// Сначала default, потом в скобках named

🔀 Re-export — переэкспорт

В больших проектах часто создают файл-«точку входа» — обычно это index.js — который собирает экспорты из разных файлов и предоставляет их как единый фасад. Это называется переэкспортом (re-export).

Представьте, что у вас есть папка utils/ с несколькими файлами:

// utils/math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// utils/string.js
export const capitalize = str => str[0].toUpperCase() + str.slice(1);
export const trim = str => str.trim();

// utils/index.js — точка входа, переэкспортирует всё
export { add, multiply } from './math.js';
export { capitalize, trim } from './string.js';

Теперь пользователи могут импортировать всё из одного места:

// main.js — удобно! Один импорт вместо двух
import { add, capitalize } from './utils/index.js';
// или ещё короче, если папка называется utils:
import { add, capitalize } from './utils';

🔧 CommonJS vs ESM: две системы модулей

Исторически в JavaScript сложилось так, что существуют две разные системы модулей. Это важно знать, потому что вы столкнётесь с обеими в реальных проектах.

// math.js — CommonJS экспорт
function add(a, b) { return a + b; }
module.exports = { add };

// main.js — CommonJS импорт
const { add } = require('./math.js');
console.log(add(2, 3)); // 5

// math.js — ESM экспорт
export function add(a, b) { return a + b; }

// main.js — ESM импорт
import { add } from './math.js';
console.log(add(2, 3)); // 5

🌐 Модули в браузере

Браузеры поддерживают ESM нативно начиная с 2017 года. Чтобы подключить модульный JavaScript к HTML-странице, нужно добавить атрибут type="module" к тегу <script>:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Мой проект</title>
</head>
<body>
  <!-- type="module" — ключевой атрибут! -->
  <script type="module" src="./main.js"></script>
</body>
</html>

Когда браузер видит type="module", он включает режим модулей: переменные не попадают в глобальную область видимости, выполнение строгое (use strict по умолчанию), и можно использовать import/export.

🛠️ Практика: разбиваем программу на модули

Давайте посмотрим на реальный пример. Представьте небольшое приложение — менеджер задач. Без модулей всё было бы в одном файле. С модулями мы разобьём это на три логических части:

// storage.js — работа с localStorage
export function saveTasks(tasks) {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

export function loadTasks() {
  const raw = localStorage.getItem('tasks');
  return raw ? JSON.parse(raw) : [];
}

export function clearTasks() {
  localStorage.removeItem('tasks');
}

// task.js — логика задач
export function createTask(text) {
  return {
    id: Date.now(),
    text,
    done: false,
    createdAt: new Date().toISOString()
  };
}

export function completeTask(task) {
  return { ...task, done: true };
}

export function filterActive(tasks) {
  return tasks.filter(t => !t.done);
}

// main.js — точка входа, связывает всё вместе
import { saveTasks, loadTasks } from './storage.js';
import { createTask, completeTask, filterActive } from './task.js';

let tasks = loadTasks();

// Добавить задачу
const newTask = createTask("Выучить модули JS");
tasks.push(newTask);
saveTasks(tasks);

// Найти активные задачи
const active = filterActive(tasks);
console.log(`Активных задач: ${active.length}`);

Заметьте, насколько это чище: каждый файл отвечает за одну вещь. Хотите изменить способ хранения данных? Правите только storage.js. Хотите изменить структуру задачи? Только task.js. Это называется принципом единственной ответственности.

✅ Итоги урока

• Модули позволяют разбить код на файлы с чёткими границами — что видно снаружи, а что нет
• Named export: export const name = ... / export function ... — можно несколько на файл
• Named import: import { name, func } from './file.js' — фигурные скобки обязательны
• Default export: export default ... — один на файл, без фигурных скобок при импорте
• Переименование при импорте: import { name as alias } from './file.js'
• Re-export: export { X } from './other.js' — удобно для index.js-фасадов
• CommonJS (require/module.exports) — старая Node.js система; ESM (import/export) — современный стандарт
• В браузере: <script type="module"> включает поддержку ESM