.webp)
.webp)
Модуль – это функция или набор похожих функций. Они собраны вместе внутри одного файла и содержат код. Когда в более крупном приложении вызывается та или иная функция, этот код выполняет свою задачу.
Модули создаются для того, чтобы можно было лучше организовать и структурировать кодовую базу. Их можно использовать для того, чтобы разбить большую программу на более мелкие подпрограммы, которые будут более управляемыми и в большей степени независимыми. Эти подпрограммы могут выполнять одну или несколько взаимосвязанных задач.
Модули могут быть:
- Независимыми/автономными: модуль отделен от остальных зависимостей настолько, насколько это возможно.
- Специального назначения: модуль должен выполнять одну задачу и группу взаимосвязанных задач. Основная суть, для чего они создаются, заключается в создании отдельных функций. Один модуль – одна задача (или один вид задач).
- Многократного применения: модуль легко интегрируется в различные программы, в которых он выполняет свою задачу.
Чтобы вам было более понятно, я проведу аналогию:
Допустим, мы хотим построить огромный дом с нуля. Все инструменты, которые нам понадобятся для того, чтобы построить здание, находятся в одной комнате.
В этом случае правильно разложить все инструменты для того, чтобы мы могли начать строить, будет не так просто.
Вместо того, чтобы держать все отдельные зависимости в одной комнате, нам стоит собрать отдельные наборы взаимосвязанных инструментов и поместить их в разные комнаты. В каждой комнате находятся свои инструменты, и каждая из них является независимой и автономной и решает определенные задачи.
Мы вполне могли бы наклеить на них какие-нибудь надписи, например, «инструменты для кровельных работ», «инструменты для кирпичной кладки», «инструменты для рытья котлована под фундамент» и т.д.
Всякий раз, когда нам потребуется тот или иной инструмент для того, чтобы выполнить определенную задачу, мы знаем, в какой комнате он лежит. В этом плане все стало гораздо более организовано, и все можно легко найти.
Более того, допустим, что мы уже построили дом и решили построить что-то еще. Для этого у нас есть все тот же набор инструментов. Этот факт подкрепляет принцип многократного использования. Модули можно использовать многократно, так как они являются автономными.
Пример модуля
Если говорить о коде, то модули очень важны.
Давайте рассмотрим упрощенную схему на примере приложения электронной коммерции, с помощью которого люди и предприятия могут продавать товары через Интернет. Как правило, такого рода программы состоят не менее, чем из двух несвязных задач. Например,
- программа, предназначенная для создания учетной записи
- программа, предназначенная для проверки достоверности информации
- еще одна программа, предназначенная для обработки платежей
- еще одна программа, предназначенная для подсчета рейтинга пользователей
и т.д.
Вместо того, чтобы объединять все эти несвязные программы в один модуль/файл, можно создать несколько различных файлов или модулей, каждый из которых будет отвечать за отдельную задачу. В таком случае модули становятся зависимостями.
После чего вы можете просто импортировать/загрузить эти зависимости (то есть необходимые модули) из основного приложения или программы и, таким образом, подключить их. В конечном итоге ваше основное приложение станет не таким загроможденным.
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.
