Понятие модуля: IIFE, CommonJS, AMD, ES Modules

Почему модули — это суперсила разработчика? 💪

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

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

• IIFE — старый, но хитрый способ изоляции кода.
• CommonJS — модули для Node.js.
• AMD — асинхронные модули для браузеров.
• ES Modules — современный стандарт (наше всё!).

Готовы разложить всё по полочкам? Поехали! 🚀

IIFE: Магия самовызывающихся функций 🎩

До модулей разработчики использовали Immediately Invoked Function Expression (IIFE) — функцию, которая выполняется сразу после создания.

(function() {
  const secret = "Я скрыт внутри!";
  console.log(secret); // "Я скрыт внутри!"
})();

console.log(secret); // Ошибка! secret не виден снаружи.

Как это работает?

1. Функция обёрнута в скобки (function() { ... }), чтобы JS понял, что это выражение.
2. () в конце вызывает её немедленно.
3. Всё внутри изолировано — переменные не «протекают» в глобальную область.

🔥 Совет: IIFE всё ещё встречается в старых проектах. Знать его полезно, но в новых проектах лучше использовать современные модули.

CommonJS: Модули для Node.js 🖥️

CommonJS — стандарт, который принёс модули в Node.js.

Экспорт

// math.js
const sum = (a, b) => a + b;
module.exports = sum;

Импорт

// app.js
const sum = require('./math.js');
console.log(sum(2, 3)); // 5

Особенности:

• module.exports — экспортирует что угодно (функцию, объект, число).
• require() — загружает модуль синхронно (подходит для серверного кода).
• Используется в Node.js, но не в браузерах (без сборщиков вроде Webpack).

💡 Забавный факт: Если написать exports = sum; (без module.), экспорт не сработает! Подробнее — у Данилы Бежина: youtube.com/@DanilaBezhin.

AMD: Асинхронные модули для браузеров 🌐

Asynchronous Module Definition (AMD) создан для загрузки модулей в браузере без блокировки рендеринга.

// Определяем модуль с require.js
define(['dependency'], function(dependency) {
  return {
    greet: () => console.log("Привет, модуль!")
  };
});

// Загружаем модуль
require(['module'], function(module) {
  module.greet(); // "Привет, модуль!"
});

Плюсы:

• Работает асинхронно — страница не «висит» при загрузке.
• Позволяет указывать зависимости явно.

Минусы:

• Сложный синтаксис.
• Устарел с появлением ES Modules и сборщиков.

ES Modules: Стандарт будущего 🚀

ES Modules (ESM) — современный стандарт, работающий и в браузерах, и в Node.js.

Экспорт

// math.js
export const sum = (a, b) => a + b;
export const PI = 3.14;

// ИЛИ одним объектом
const utils = { sum, PI };
export default utils;

Импорт

// app.js
import { sum, PI } from './math.js';
import utils from './math.js'; // default-импорт

console.log(sum(2, 3)); // 5
console.log(PI); // 3.14

Важные отличия от CommonJS:

1. Синтаксис — import/export вместо require/module.exports.
2. Статический анализ — импорты обрабатываются до выполнения кода.
3. Поддержка браузеров — работает с <script type="module">.

⚡ Важно: В Node.js ES Modules включаются флагом "type": "module" в package.json или расширением .mjs.

Что выбрать? 🤔

Современный выбор:
- Для браузеров — ES Modules + сборщик (Vite, Webpack).
- Для Node.js — ES Modules (если можно) или CommonJS (в легаси-проектах).

Итог: Модули — это просто!

Теперь вы знаете эволюцию модулей в JavaScript:
- От IIFE (изоляция кода) → CommonJS (Node.js) → AMD (браузеры) → ES Modules (универсальный стандарт).

Попробуйте написать модуль на ESM или поиграть с require в Node.js — и вы почувствуете, насколько это удобно!

А если хотите глубже разобрать тему, посмотрите разборы Данилы Бежина — он отлично объясняет сложные концепции: YouTube.

Код — как музыка. Пусть ваши модули звучат гармонично! 🎵