Модули JavaScript – объясняем, что это (с примерами)

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

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

Модули могут быть: 

1. Независимыми/автономными: модуль отделен от остальных зависимостей настолько, насколько это возможно.
2. Специального назначения: модуль должен выполнять одну задачу и группу взаимосвязанных задач. Основная суть, для чего они создаются, заключается в создании отдельных функций. Один модуль – одна задача (или один вид задач). 
3. Многократного применения: модуль легко интегрируется в различные программы, в которых он выполняет свою задачу.

Чтобы вам было более понятно, я проведу аналогию:

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

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

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

Мы вполне могли бы наклеить на них какие-нибудь надписи, например, «инструменты для кровельных работ», «инструменты для кирпичной кладки», «инструменты для рытья котлована под фундамент» и т.д.

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

Более того, допустим, что мы уже построили дом и решили построить что-то еще. Для этого у нас есть все тот же набор инструментов. Этот факт подкрепляет принцип многократного использования. Модули можно использовать многократно, так как они являются автономными. 

Пример модуля

Если говорить о коде, то модули очень важны.

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

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

и т.д.

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

После чего вы можете просто импортировать/загрузить эти зависимости (то есть необходимые модули) из основного приложения или программы и, таким образом, подключить их. В конечном итоге ваше основное приложение станет не таким загроможденным.

main.js был разделен на четыре модуля

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

Модули JavaScript

Модуль в JavaScript – это обычный файл, который содержит соответствующий код. 

В JavaScript для использования и получения функций соответствующих модулей, мы используем ключевые слова import и export.

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

Давайте посмотрим на простой пример:

function getPower(decimalPlaces) {
return 10 ** decimalPlaces;
}

function capitalize(word) {
return word[0].toUpperCase() + word.slice(1);
}

function roundToDecimalPlace(number, decimalPlaces = 2) {
const round = getPower(decimalPlaces);
return Math.round(number * round) / round;
}

{ capitalize, roundToDecimalPlace };
filepath/main.js

В этом модуле определены три функции:

• getPower: эта функция получает в качестве аргумента показатель степени числа
• capitalize: эта функция делает первую букву слова заглавной
• roundToDecimalPlace: эта функция округляет число, переданное в качестве аргумента, до указанного количества знаков после запятой

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

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

Давайте посмотрим, как мы можем их использовать:

import { capitalize, roundToDecimalPlace } from './main';

function displayTotal(name, total) {
return `${capitalize(name)}, your total cost is: ${roundToDecimalPlace(total)}`;
}

displayTotal('kingsley', 20.4444444);
// "Kingsley, your total cost is: 20.44"

export { displayTotal };
filepath/displayTotal.js

У модуля displayTotal.js нет функций capitalize() и roundToDecimalPlace(), но вам нужно, чтобы у него были такие функциональные возможности. И как же мы можем это сделать? С помощью import!

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

А что если вам нужно импортировать в свою программу только одну функцию - capitalize?

Все очень просто – импортируйте только функцию capitalize. Например,

import { capitalize } from './main';

function warn(name) {
return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Обратите внимание: когда вы работаете с модулями, очень важно понимать принцип работы структурирования файлов. В примере выше мы просто импортируем функцию из файла, который находится в том же самом каталоге. Именно поэтому мы используем обозначение «./import». 

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

import * as mainfunctions from './main';

function warn(name) {
return `I am warning you, ${mainfunctions.capitalize(name)}!`;
}
warn('kingsley');
// I am warning you, Kingsley!

export { warn };

Совет: если вы импортируете из модуля все функции, то лучше всего воспользоваться звездочкой, а не явно перечислять все функции одну за другой. 

Вы могли заметить еще одно ключевое слово - as. Мы используем его для того, чтобы импортировать общедоступные функции в новый объект (в данном случае это mainfunctions). После чего мы можем использовать и вызывать функции, которые нам нужны в нашей программе. 

Вплоть до этого момента мы рассматривали примеры, где экспорт выполняется в конце файла. Но вы также можете экспортировать функцию, переменную или класс, прописав слово export прямо перед его определением. Например, 

function getPower(decimalPlaces) {
return 10 ** decimalPlaces;
}

export function capitalize(word) {
return word[0].toUpperCase() + word.slice(1);
}

export function roundToDecimalPlace(number, decimalPlaces = 2) {
const round = getPower(decimalPlaces);
return Math.round(number * round) / round;
filepath/anothermai.js

Если вы сравните данный пример с первым, то заметите разницу в синтаксисе:

• В первом примере ключевое слово export применяется в конце сценария для экспорта сразу двух функций. А в примере выше ключевое слово export применяется для каждой функции при ее определении. 

В любом случае, результат один: обе функции: capitalize и roundToDecimalPlace, были экспортированы. 

Экспорт функции по умолчанию

Если вы планируете экспортировать все три функции, но хотите, чтобы одна из них была функцией по умолчанию (возможно из-за того, что вы, вероятнее всего, будете использовать только эту функцию), вам просто нужно указать ключевое слово default. 

Ключевое слово default упрощает процесс импорта функции. Давайте посмотрим на следующий пример:

export function getPower(decimalPlaces) {
return 10 ** decimalPlaces;
}

export default function capitalize(word) {
return word[0].toUpperCase() + word.slice(1);
}

export function roundToDecimalPlace(number, decimalPlaces = 2) {
const round = getPower(decimalPlaces);
return Math.round(number * round) / round;
}
filepath/default.js

Как вы можете видеть, функция capitalize стала функцией по умолчанию. Фактически мы наделили ее какими-то привилегиями. 

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

import capitalize from './main';

function warn(name) {
return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };
filepath/warndefault.js

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

import capitalize, { getPower } from './main';

function warn(name) {
return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

export { warn };
filepath/mixed.js

Заключение

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

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

Для того, чтобы обмениваться функциями между модулями в JavaScript, вам понадобятся ключевые слова import и export.

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

Таким образом, мы пробежались по основным концепциям модулей в JavaScript.