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

Именованный импорт.
Именованный импорт позволяет выборочно импортировать определенные функции, объекты или переменные из модуля. Основной синтаксис именованного импорта следующий:

import { namedItem1, namedItem2 } from './module';

Здесь namedItem1и namedItem2— это конкретные элементы, экспортированные из файла module, которые мы хотим импортировать. Вы можете импортировать несколько именованных элементов, разделяя их запятыми.

Пример кода:
Рассмотрим следующий модуль math.js, который экспортирует две именованные функции:

// math.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

Чтобы импортировать и использовать функции addи subtractв другом модуле, вы должны написать:

import { add, subtract } from './math';
console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6

Именованный экспорт:
Именованный экспорт позволяет выборочно экспортировать определенные функции, объекты или переменные из модуля. Основной синтаксис именованного экспорта следующий:

export { namedItem1, namedItem2 };

Пример кода:
Рассмотрим модуль utils.js, который экспортирует две именованные переменные:

// utils.js
export const PI = 3.14159;
export const MAX_VALUE = 1000;

Чтобы импортировать и использовать переменные PIи MAX_VALUEв другом модуле, вы должны написать:

import { PI, MAX_VALUE } from './utils';
console.log(PI); // Output: 3.14159
console.log(MAX_VALUE); // Output: 1000

Объединение именованного импорта и именованного экспорта.
Вы также можете комбинировать именованный импорт и именованный экспорт в одном модуле. Например:

// module.js
export { namedItem1, namedItem2 } from './utils';
export { namedItem3, namedItem4 } from './math';

В этом случае файл module.jsповторно экспортирует названные элементы из модулей utils.jsи math.js.

Именованный импорт и экспорт предоставляют мощный механизм выборочного импорта и экспорта функций в модулях JavaScript. Используя базовую структуру, описанную в этой статье, вы сможете более эффективно организовать свой код и упростить его обслуживание и повторное использование. Понимание и освоение этой концепции крайне важно для современных разработчиков JavaScript.