.webp)
.webp)
Модули JavaScript также известны как ES-модули или ECMAScript-модули. Они предназначены для того, чтобы ваш код JavaScript был более организованным и более удобным в сопровождении.
Чем лучше вы будете понимать, как работают ES-модули, тем более профессионально вы будете справляться со своей работой разработчика JavaScript. В этой статье мы рассмотрим следующее:
- Что такое модуль?
- Что такое ES-модули? Для чего они нужны?
- Как использовать ES-модули.
- Прочие системы модулей, используемые в JavaScript.
Давайте начнем.
Что такое модуль?
Модуль в JavaScript – это обычный файл с кодом. В целом модуль можно описать как повторно используемую и независимую единицу кода.
Модули – это строительные блоки вашей кодовой базы. По мере роста вашего приложения мы можете разбивать ваш код на файлы, которые называются модулями.
С помощью модулей вы можете разбивать большие программы на фрагменты кода, которые будут более управляемыми.
Что такое ES-модули? Для чего они нужны?
ES-модули – это официальная система модулей JavaScript. Есть и другие системы модулей, которые тоже можно использовать в JavaScript, но мы поговорим о них позже. Однако пока не забывайте о том, что мы изучаем именно ES-модули (так как они являются стандартными для JavaScript), а не какие-то другие системы модулей.
Если вы являетесь разработчиком JavaScript, то вы, скорее всего, будете использовать ES-модули постоянно.
Ниже перечислены некоторые преимущества, которые могут получить разработчики, используя ES-модули:
- Организованность. Разбивая большие программы на более мелкие части, вы поддерживаете организованность вашего кода.
- Многократное использование. Применяя ES-модули, вы можете писать код в одним месте и использовать его повторно в других файлах в рамках вашей кодовой базы. Например, вместо того, чтобы каждый раз заново писать одну и ту же функцию, вы можете написать ее внутри одного модуля, а затем импортировать его в другой файл и использовать его уже там.
Давайте посмотрим на пример того, как можно использовать ES-модули. Мы узнаем, как работают ES-модули, так что вы сможете использовать их в своих будущих проектах. Работая с ES-модулями, мы сможем увидеть каждое из преимуществ, которые мы упомянули выше.
Как использовать ES-модули
Давайте для начала создадим несложный файл JavaSvript в Replit. Весь код вы можете найти здесь.
Как только мы откроем Replit, мы можем создать новый проект и выбрать HTML, CSS и JavaScript. Таким образом, мы создадим начальный проект, в котором будует находиться файлы index.html, scrip t.js и style.css. Все это нам понадобиться, чтобы настроить проект.
Внутри нашего файла index.html нам нужно изменить тег script, добавив к нему type="module". Таким образом, мы сможем использовать ES-модули в нашем коде. Тег script должен выглядеть вот так:
<script type="module" src="script.js"></script>Давайте начнем с написания простой функции для сложения двух чисел. Эта функция должна взять два числа, сложить их и вернуть результат этой операции. Именно так мы и нНазовем мы эту функцию именно так – add. Напишем ее в нашем файле script.js:
function add(a, b) {
return a + b;
};
console.log(add(5, 5)); //outputs 10На данный момент наш файл script.js не такой большой, в нем не так много кода. А теперь представьте, что ваше приложение растет, и у него есть десятки таких функций. Тогда файл script.js может стать слишком большим, и его будет не так просто сопровождать.
Давайте создадим модуль и обойдем эту проблему. Это можно сделать, нажав в Replit кнопку «Add File» («Добавить файл»). Не забывайте, что модуль – это всего лишь файл связанного кода.
Мы назовем наш модуль math.js. Мы уберем функцию add из нашего файла script.js и создадим новый файл math.js. Этот файл станет нашим модулем, в котором мы будем хранить наши математические функции. Давайте добавим нашу функцию add в этот файл:
// math.js
function add(a, b) {
return a + b;
};Мы решили назвать этот модуль math.js, так как потом мы добавим туда еще и другие математические функции.
Если бы мы условно открыли это приложение и посмотрели на него, то сразу же поняли, что вся математическая логика находится внутри этого файла. Нам не нужно было бы тратить время на то, чтобы вникнуть в это приложение, на поиск математических функций и гадания о том, где они находятся. Мы все аккуратно организовали в файл.
Теперь давайте воспользуемся функцией add внутри нашего файла script.js. Только не стоит забывать, что сама функция находится внутри другого файла. Для этого нам нужно изучить синтаксис ES-модуля. Давайте посмотрим на такие ключевые слова, как export и import.
Ключевое слово export
Если вы хотите, чтобы ваш модуль был доступен в других файлах (помимо того, в котором он находится), то вам необходимо воспользоваться ключевым словом export. Давайте применим ключевое слово export к нашей функции add, чтобы мы могли использовать ее внутри нашего файла script.js.
Давайте добавим ключевое слово export default под нашей функцией внутри файла math.js:
// math.js
function add(a, b) {
return a + b;
};
export default add;Последняя строка делает так, что функция становится доступной для использования в других местах помимо модуля math.js.
Есть еще один способ применения ключевого слова export. Вы можете добавить его непосредственно перед тем, как вы будете определять функцию:
// math.js
export default function add(a, b) {
return a + b;
};Сами по себе способы различны, но работают они одинаково.
Возможно вас заинтересовало ключевое слово default после слова export. Мы скоро к этому вернемся. А сейчас, когда мы экспортировали нашу функцию, давайте все-таки воспользуемся ей в другом файле.
Ключевое слово import
Для того, чтобы импортировать нашу функцию add в наш файл script.js, нам понадобиться ключевое слово import. Импорт функции подразумевает, что мы сможем получить доступ и использовать ее в файле. Как только мы импортируем функцию, мы сможем ей воспользоваться:
// script.js
import add from './math.js';
console.log(add(2, 5)); //outputs 7В данном случае мы используем относительный импорт (./math.js).
Когда мы запустим этот код, то увидим результат работы нашей функции – 7. Теперь вы можете использовать эту функцию в этом файле столько, сколько захотите.
Сам код функции не видно, и для того, чтобы использовать функцию, вам не обязательно нужно видеть егоего видеть.
Если мы попробуем ненадолго закомментировать строку import add from './math.js', то сразу же получим ошибку: ReferenceError: add is not defined. Это происходит из-за того, что , если мы не импортируем явно явно эту функцию в файл script.js, а, значит,то у негоон не может нет к получить к ней доступа.
Для начала мы экспортировали нашу функцию add, после чего импортировали ее в наш файл script.js, а затем вызвали.
Давайте снова посмотрим на наш файл math.js. Как уже отмечалось выше, вас могло смутить слово default, которое было написано вместео с ключевым словом export. Давайте рассмотрим его поподробнее.
Экспорт по имени и экспорт по умолчанию в JavaScript
В том, что касается ES-модулей, вы можете использовать как экспорт по умолчанию, так и экспорт по имени.
В нашем первом примере мы использовали экспорт по умолчанию. Мы экспортировали таким образом только одно значение (нашу функцию add) из нашего модуля math.js.
Если вы используете экспорт по умолчанию, то по желанию вы можете изменить названием импорта. То есть мы можем импортировать нашу фукнциюфункцию add в нашем файле script.js и назвать ее, например, addition (или каким-то другим именем).
// script.js
import addition from './math.js';
console.log(addition(2, 5)); //outputs 7А вот экспорт по имени используется для экспорта нескольких значений.
Давайте попробуем воспользоваться экспортом по имени. Вернитесь в файл math.js, создайте в нем еще две фукнции - subtract и multiply, и разместите их под нашей функцией add. Если вы используете экспорт по имени, то вы можете просто удалить ключевое слово default:
// math.js
export default function add(a, b) {
return a + b;
};
export function subtract(a, b) {
return a - b;
};
export function multiply(a, b) {
return a * b;
};Давайте удалим весь код, написанный в script.js ранее, и импортируем наши новые функции. Для того, чтобы импортировать экспорты по имени, вам нужно заключить их в фигурные скобки:
import { multiply, subtract } from './math.js';Теперь мы можем использовать обе эти функции внутри файла script.js:
// script.js
import { multiply, subtract } from './math.js';
console.log(multiply(5, 5));
console.log(subtract(10, 4))Если вы хотите переименовать экспорт по имени, то вам понадобиться ключевое слово as:
import add, { subtract as substractNumbers } from './math.js';
console.log(substractNumbers(2, 5)); Выше мы переименовали импорт функции subtract в subtractNumbers.
А теперь вернемся в нашей функции add. Что если мы снова заходим использовать ее в нашем файле script.js наряду с нашими функциями multiply и subtract? Этот вопрос можно решить следующим образом:
import add, { multiply, subtract } from './math.js';
console.log(multiply(5, 5));
console.log(subtract(10, 4))
console.log(add(10, 10));Теперь мы знаем, как можно использовать ES-модули. Мы узнали, как применять ключевые слова export и import, а также в чем состоят различия между экспортом по имени и экспортом по умолчанию. Кроме того, мы научились переименовывать как экспорты по умолчанию, так и экспорты по имени.
Прочие системы модулей в JavaScript
Если вы уже изучали модули, то вы могли использовать другой тип импорта, например, такой:
var models = require('./models')Вот здесь можно запутаться. Давайте немного углубимся в историю модулей JavaScript, чтобы все прояснить.
Пример кода, приведенный выше, использует оператор require. Это CommonJS. CommonJS – это еще одна система модулей, которую можно использовать с JavaScript.
Когда JavaScript был только создан, у него не было никакой системы модулей. В следствие чего разработчики создавали свои собственные системы модулей поверх языка.
В течение многих лет создавались и использовались различные системы модулей, в том числе CommonJS. Работая с кодовой базой компании или принимая участие в проекте с открытым исходным кодом, вы можете заметить, что в них используются разные системы модулей.
В конце концов, была представлена стандартизированная система модулей JavaScript – ES-модули.
В этой статье мы узнали о том, что такое модули и для чего они нужны разработчикам. Мы узнали о том, как работают ES-модули, а также о различных типах систем модулей в JavaScript.
