Импорт и экспорт модулей: import/export, default и именованные экспорты

Почему модули — это как конструктор LEGO 🧩

Представь, что твой код — это гигантский замок из LEGO. Без модулей он выглядит как одна огромная деталь: переставить кирпичик — и всё рассыпалось! Модули решают это, разбивая код на логические блоки, которые можно переиспользовать и комбинировать.

// ❌ До модулей: Всё в одном файле = хаос!
function calculateTax() { /* ... */ }
function formatCurrency() { /* ... */ }
function renderCart() { /* ... */ }

// ✅ С модулями: Чистота и порядок!
import { calculateTax } from './tax.js';
import { formatPrice } from './utils.js';

Именованные экспорты: Визитные карточки функций

Когда нужно экспортировать несколько значений из модуля, используй именованные экспорты. Это как раздавать визитки — у каждого есть своё имя!

// 📁 math.js
export const PI = 3.14159;

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

Импортируем только нужное, используя фигурные скобки:

// 📁 app.js
import { square, cube } from './math.js';

console.log(square(3)); // 9
console.log(cube(3));   // 27

🔥 Профессиональный лайфхак: Можно переименовать при импорте через as: javascript import { square as kvadrat, PI as π } from './math.js';

Экспорт по умолчанию: Главный герой модуля 🏆

Default export — это "звезда" файла. Он один, и его можно импортировать под любым именем. Отлично подходит для классов или главных функций модуля.

// 📁 User.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

Импорт без фигурных скобок:

// 📁 app.js
import SuperUser from './User.js'; // Имя может быть любым!
const danila = new SuperUser('Данила');

⚠️ Важно: В одном файле может быть только один default export, но сколько угодно именованных.

Микс режимов: Гибкость на максимум 🎛

Комбинируй оба подхода для суперспособностей:

// 📁 magic.js
export default function castSpell() { /* ... */ }
export const spells = ['Fireball', 'Heal'];
export const MAGIC_KEY = '42';

// 📁 app.js
import castSpell, { spells, MAGIC_KEY } from './magic.js';

Динамический импорт: Загрузка "по требованию" ⚡

Зачем грузить всё сразу? Используй динамический импорт для тяжёлых модулей:

// Загрузим модуль только когда пользователь кликнет
button.addEventListener('click', async () => {
  const analytics = await import('./analytics.js');
  analytics.trackEvent('click');
});

Плохие практики: Что делать не надо ❌

1. Смешивать все экспорты в кучу:

// Плохо 🚫
export default { PI, square, cube }; // Теряем преимущества дерев-шейкинга

2. Переименовывать default-импорты без причины:

// Сбивает с толку 🤔
import { default as foo } from './bar.js';

3. Использовать устаревший синтаксис:

// 2007 вызвал, хочет свой require() обратно 📞
const module = require('./old.js');

Время практики! 🧪

1. Создай модуль validator.js с:

Дефолтным экспортом функции validateEmail
Именованным экспортом PHONE_REGEX

2. Импортируй оба в app.js и используй для проверки данных.

Бонус: Сделай динамический импорт валидатора только при фокусе на поле ввода!

// 📁 validator.js
export const PHONE_REGEX = /^\+?\d{10,15}$/;

export default function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

Финал: Мощь модулей в твоих руках 💪

Теперь ты можешь:

✅ Дробить код на логические модули
✅ Точечно импортировать только нужное
✅ Использовать default для главных компонентов
✅ Загружать код асинхронно для оптимизации

Как говорит Данила Бежин: "Хороший код — это не только работающая программа, но и понятная структура". Продолжай развивать навыки модульности — и твои проекты выйдут на новый уровень!

P.S. Пора открыть DevTools и начать экспериментировать прямо сейчас! 🔥