61. ES Modules

JavaScript: Мозги - Урок по ES Modules

ES Modules (ESM) - это стандартизированный способ организации и повторного использования JavaScript кода. Они позволяют разбивать код на отдельные файлы (модули) и импортировать/экспортировать функциональность между ними.

Что такое ES Modules?

Представьте, что у вас есть огромная куча LEGO. ES Modules позволяют вам сортировать эти детальки по коробкам (модулям) и брать нужные детальки из нужной коробки, когда они вам нужны. Каждый модуль - это просто отдельный JavaScript файл.

Экспорт (Export): Это процесс “выкладывания” функциональности из модуля, чтобы другие модули могли ее использовать.

Импорт (Import): Это процесс “заимствования” функциональности из другого модуля.

Примеры кода

1. Создание модуля (module.js):

module.js

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

export const pi = 3.14159;

function privateFunction() {
  // Эта функция недоступна извне, так как она не экспортирована
  console.log("Это приватная функция");
}

2. Использование модуля (main.js):

main.js

import { add, pi } from './module.js'; // Укажите путь к вашему модулю

console.log(add(5, 3)); // Выведет 8
console.log(pi); // Выведет 3.14159

3. Экспорт по умолчанию (default export):

user.js

const user = {
  name: "John Doe",
  age: 30
};

export default user;

4. Импорт по умолчанию:

app.js

import user from './user.js'; // Можно использовать любое имя для импорта

console.log(user.name); // Выведет "John Doe"

5. Импорт всего модуля:

math.js

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

export function divide(a, b) {
  return a / b;
}

main.js

import * as MathModule from './math.js';

console.log(MathModule.multiply(5, 2)); // Выведет 10
console.log(MathModule.divide(10, 2)); // Выведет 5

Жизненный пример

ES Modules широко используются в современных JavaScript фреймворках и библиотеках, таких как React, Angular и Vue.js. Они позволяют разработчикам организовывать большие кодовые базы, делая их более поддерживаемыми и масштабируемыми.

Например, в React каждый компонент часто определяется как отдельный модуль, который затем импортируется и используется в других компонентах. Это позволяет создавать сложные пользовательские интерфейсы из небольших, повторно используемых частей.

Кроме того, системы сборки, такие как Webpack, Parcel и Rollup, используют ES Modules для создания оптимизированных бандлов для веб-приложений. Они анализируют зависимости между модулями и объединяют их в один или несколько файлов, которые затем загружаются браузером.

Ключевые моменты

• ES Modules - это стандартизированный способ организации JavaScript кода.
• Используйте export для “выкладывания” функциональности из модуля.
• Используйте import для “заимствования” функциональности из другого модуля.
• Можно экспортировать и импортировать функции, переменные, классы и другие значения.
• default export позволяет экспортировать одно значение по умолчанию из модуля.
• ES Modules помогают создавать более структурированный, поддерживаемый и масштабируемый код.
• ES Modules широко используются в современных JavaScript фреймворках и системах сборки.

Интерактивный пример