img

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

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

icon strelka icons icons

узнай больше на курсе

Python программист с нуля
Стань разработчиком на одном из самых популярных языков программирования - Python
Укажите вашу электронную почту
Неверный адрес электронной почты
Нажимая на кнопку, вы соглашаетесь на обработку персональных данных
Готово!
Отправили доступы на вашу
электронную почту
Java-разработчик с нуля
Освойте backend-разработку и программирование на Java, фреймворки Spring и Maven, работу с базами данных и API
Укажите вашу электронную почту
Неверный адрес электронной почты
Нажимая на кнопку, вы соглашаетесь на обработку персональных данных
Готово!
Отправили доступы на вашу
электронную почту
C# разработчик с нуля
На курсе ты освоишь основы программирования на C#, включая синтаксис, объектно-ориентированное программирование и асинхронное программирование.
Укажите вашу электронную почту
Неверный адрес электронной почты
Нажимая на кнопку, вы соглашаетесь на обработку персональных данных
Готово!
Отправили доступы на вашу
электронную почту

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

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

  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.

Ссылка
скопирована
Получите бесплатные уроки на наших курсах
Все курсы
icon strelka icons icons

узнай больше на курсе

Python программист с нуля
Стань разработчиком на одном из самых популярных языков программирования - Python
Подробнее о курсе
Java-разработчик с нуля
Освойте backend-разработку и программирование на Java, фреймворки Spring и Maven, работу с базами данных и API
Подробнее о курсе
C# разработчик с нуля
На курсе ты освоишь основы программирования на C#, включая синтаксис, объектно-ориентированное программирование и асинхронное программирование.
Подробнее о курсе
Фронтенд-разработчик с нуля
Погрузитесь в мир веб-разработки, освоив основные инструменты работы: HTML, CSS, JavaScript
Подробнее о курсе
Разработка приложений на Flutter и Dart
Научись создавать кроссплатформенные приложения на Flutter, освой язык Dart
Подробнее о курсе
Автоматизированное тестирование на Python
Изучите автоматизацию тестирования на Python чтобы стать востребованным специалистом
Подробнее о курсе
Еще по теме:
img
SQL или NoSQL, вот в чём вопрос! И как раз с этим вопросом мы поможем сегодня разобраться. Что использовать в каких случаях, где есть какие преимущества и как возможно использовать их все вместе.
img
Вебхуки позволяют различным системам обмениваться данными в реальном времени. В этой статье мы разберём, что такое вебхук, как он работает, где и зачем его использовать, а также как настроить.
img
Redis — один из самых популярных инструментов для хранения данных. В статье разбираем, что такое Redis и как его можно использовать.
Весенние скидки
30%
50%
60%
До конца акции: 30 дней 24 : 59 : 59