Модули в JS

В этой статье вы узнаете, что такое модули и зачем они нужны в JavaScript.

Любая программа постепенно растет и включет в себя больше и больше строк кода. Если хранить весь код в одном большом файле, менять программу или найти там что-то будет неудобно.

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

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

Пример

Допустим, у нас в файле greet.js находится следующий код:

// экспортируем функцию
export function greetPerson(name) {
    return `Привет, ${name}`;
}

Чтобы использовать код из greet.js в другом файле (модуле), нужно импортировать greet.js.

// импортируем greetPerson из greet.js
import { greetPerson } from './greet.js';

// используем greetPerson() из greet.js
let displayName = greetPerson('Андрей');

console.log(displayName); // Вывод: Привет, Андрей

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

• В модуле greet.js мы экспортировали функцию greetPerson() с помощью ключевого слова export.

export function greetPerson(name) {
    ... 
}

• В другом модуле мы импортировали функцию greetPerson() с помощью ключевого слова import. Для импортирования функцию, переменных, объектов и т.д., нужно обернуть их фигурными скобками {}.

import { greetPerson } from '/.greet.js';

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

Экспортирование нескольких объектов

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

Допустим, в некотором модуле module.js у нас есть такой код: 

// экспортируем переменную
export const name = 'Программа на JavaScript';

// экспортируем функцию
export function sum(x, y) {
    return x + y;
}

Тогда в основном файле можно импортировать переменную name и функцию sum одновременно — следующим образом:

import { name, sum } from './module.js';

console.log(name);
let add = sum(4, 9);
console.log(add); // Вывод: 13

Переименование импортов и экспортов

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

Чтобы избежать конфликта имен, можно переименовать переменные, функции, объекты и т.д. при импортировании или экспортировании.

1. Переименование в модуле (файл экспорта)

// переименование импорта в module.js
export {
    function1 as newName1,
    function2 as newName2
};

// когда хотим использовать модуль, 
// импортируем из него нужные функции
import { newName1, newName2 } from './module.js';

Когда мы экспортировали функции из файла module.js, мы обращались к ним по новым именам: newName1 и newName2. 

2. Переименование в основном файле (файл импорта)

// внутри module.js
export {
    function1,
    function2
};

// когда нужно использовать модуль, 
// импортируем функции в основной файл с другими именами
import { function1 as newName1, function2 as newName2 } from './module.js';

Когда мы импортировали функции, мы задали им новые имена newName1 и newName2. 

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

Разберем, что это такое, на примере.

Вернемся к модулю greet.js и немного изменим его.

// экспортирование по умолчанию
export default function greet(name) {
    return `Привет, ${name}`;
}

export const age = 23;

Импортировать тееперь можно так:

import random_name from './greet.js';

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

• random_name (это может быть любое имя) импортируется из greet.js. Но поскольку в файле greet.js отсутствует такой объект, импортируется тот объект, который помечен ключевыми словами export default, — в нашем случае функция greet().
• Объект, помеченный export default, в основном файле получает имя random_name.
• Использовать фигурные скобки {} в этом случае необязательно.

Примечание. В программе может быть только один экспорт по умолчанию (export default).

Преимущества использования модулей

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

Примечание. Ключевые слова import и export работают не во всех браузерах. Узнать, поддерживает ли их ваш браузер, можно на странице JavaScript import/export Support.