JavaScript Academy · Урок

Модульный шаблон (IIFE)

Инкапсулируйте код с помощью немедленно вызываемых функций.

«Модульный шаблон (IIFE)» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что решает шаблон модуля

До появления модулей ES шаблон модуля позволял объединять связанные состояние и поведение, сохраняя внутреннюю реализацию приватной и предоставляя понятный публичный API. Он основан на замыканиях.

IIFE

IIFE (немедленно вызываемое функциональное выражение) — это функция, которая выполняется сразу после определения. Заключение функции в скобки и её вызов мгновенно создают приватную область видимости.

const result = (function () {
  return 42;
})();
console.log(result); // 42

Зачем выполнять функцию сразу

IIFE предоставляет одноразовую приватную область видимости, не оставляя именованную функцию без необходимости. Всё внутри изолировано от глобального пространства имён.

(function () {
  const temp = "not global";
  console.log(temp);
})();
// temp is unreachable out here

Возврат публичного API

Шаблон модуля представляет собой IIFE, возвращающую объект. Методы объекта являются замыканиями над приватными переменными и образуют публичный интерфейс.

const counter = (function () {
  let count = 0; // private
  return {
    inc: () => ++count,
    value: () => count
  };
})();
counter.inc();
console.log(counter.value()); // 1

Приватное и публичное

Всё, что объявлено внутри, но не возвращено, остаётся приватным. Доступно только то, что вы поместили в возвращённый объект.

const calc = (function () {
  const pi = 3.14159; // private constant
  return {
    area: (r) => pi * r * r
  };
})();
console.log(calc.area(2)); // 12.56636
console.log(calc.pi);      // undefined

Приватные вспомогательные функции

Вспомогательные функции могут находиться внутри модуля: публичные методы используют их, но сами функции никогда не предоставляются наружу.

const validator = (function () {
  const clean = (s) => s.trim().toLowerCase(); // private
  return {
    isEmail: (s) => clean(s).includes("@")
  };
})();
console.log(validator.isEmail(" A@B.com ")); // true

Раскрывающий шаблон модуля

Популярный вариант: все функции определяются как приватные, а затем возвращается объект, который «раскрывает» ссылки на публичные функции. Благодаря этому список публичного API остаётся понятным и находится внизу.

const store = (function () {
  let items = [];
  function add(x) { items.push(x); }
  function count() { return items.length; }
  return { add, count }; // reveal
})();
store.add("a");
console.log(store.count()); // 1

Одиночные экземпляры

Поскольку IIFE выполняется один раз, модуль фактически является одиночным экземпляром: существует ровно один экземпляр с одним набором приватного состояния.

const config = (function () {
  let settings = { theme: "dark" };
  return {
    get: (k) => settings[k],
    set: (k, v) => { settings[k] = v; }
  };
})();
config.set("theme", "light");
console.log(config.get("theme")); // "light"

Передача зависимостей

В качестве аргументов IIFE можно передавать глобальные объекты или другие модули. Это делает зависимости явными и позволяет безопасно минимизировать код.

const mathUtils = (function (M) {
  return { roundUp: (n) => M.ceil(n) };
})(Math);
console.log(mathUtils.roundUp(4.1)); // 5

Как избежать загрязнения глобального пространства

Главная идея — использовать одно глобальное имя для модуля вместо десятков разрозненных переменных. Это предотвращает конфликты имён между скриптами.

Связь с модулями ES

Сегодня import/export обеспечивают настоящую область видимости модуля на уровне языка и в основном заменяют этот шаблон. Однако понимание модулей IIFE помогает разобраться в работе приватности и инкапсуляции, а также пригодится при встрече с ними в устаревшем коде.

Быстрая проверка

Шаблон модуля и IIFE.

Повторение

Шаблон модуля использует IIFE для создания приватной области видимости и возвращает объект, методы которого являются замыканиями над скрытым состоянием. Внутренняя реализация остаётся приватной, а публичными становятся только возвращённые элементы. Варианты вроде раскрывающего шаблона модуля делают API понятнее, а сами модули работают как одиночные экземпляры. Сегодня ES import/export заменяют этот шаблон, но основаны на тех же идеях.

Часто задаваемые вопросы

Урок «Модульный шаблон (IIFE)» бесплатный?

Да — полный текст урока «Модульный шаблон (IIFE)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Модульный шаблон (IIFE)»?

Инкапсулируйте код с помощью немедленно вызываемых функций. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Модульный шаблон (IIFE)»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy