Модули в JavaScript

Эта статья объясняет модули в JavaScript.

YouTube Video

Модули в JavaScript

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

Концепция модулей JavaScript

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

Основные типы модулей

Существует несколько систем модулей в JavaScript. Самыми распространенными являются ES Modules (ESM) и CommonJS.

• ES-модули — это система модулей, представленная в ECMAScript 2015 (ES6), которая определяет модули с помощью ключевых слов import и export. Эта система широко используется как на стороне клиента (браузеры), так и на стороне сервера (Node.js).

• CommonJS — это система модулей, главным образом используемая в Node.js. Модули определяются с помощью require и module.exports для импорта и экспорта файлов.

Детали ES Modules (ESM)

ES Modules — это стандартная модульная система в JavaScript, которая позволяет легко обмениваться функциональностью между модулями. В браузерах и Node.js эта система используется для определения и импорта модулей.

export и import

export — это ключевое слово для предоставления функциональности модуля наружу. import используется для подключения функциональности, определенной в других модулях.

Пример: Экспорт модуля

Модули могут экспортироваться в ES-модулях следующим образом.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

В этом модуле math.mjs экспортируются функции add и subtract. Эти функции можно импортировать из других модулей.

Здесь .mjs — это расширение файла, которое явно указывает на JavaScript-файл в формате ES-модулей. В Node.js расширение файла определяет, является ли файл модулем CommonJS или ES Modules. Однако, если в файле package.json указано type: "module", файлы с расширением .js по умолчанию рассматриваются как ES Modules.

Пример: Импорт модуля

Модули могут быть импортированы в ES Modules следующим образом.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

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

Экспорт по умолчанию и именованный экспорт

Существует два способа экспорта модулей. Один из них — это именованный экспорт, а другой — экспорт по умолчанию.

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

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

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

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

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

Пример использования на стороне клиента (в браузере).

Пример: Экспорт модуля

Модули могут экспортироваться в ES-модулях следующим образом.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

В этом модуле utils.js экспортируются функции sum и multiply.

Пример: Импорт модуля

Модули могут быть импортированы на стороне клиента следующим образом.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• Установив атрибут type у тега <script> в значение module, можно использовать синтаксис ES-модулей, такой как import и export, в HTML.
• Оператор import загружает внешний файл utils.js и отображает результат.

Подробности о CommonJS

CommonJS — это система модулей, которая в основном используется в Node.js. Модули экспортируются и импортируются с использованием module.exports и require.

require и module.exports

В CommonJS используется module.exports для экспорта модулей. Кроме того, для работы с модулями из других файлов используется require.

Пример: Экспорт модуля

Модули могут быть экспортированы в CommonJS следующим образом.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Пример: Импорт модуля

Модули могут быть импортированы в CommonJS следующим образом.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

В Node.js CommonJS используется как система модулей по умолчанию, но также поддерживаются ES-модули.

Динамический импорт

В JavaScript модули можно динамически импортировать, используя import(). Этот метод использует асинхронную обработку для загрузки модулей по необходимости.

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

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

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

Преимущества модулей

• Повторное использование кода

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

• Улучшенная поддерживаемость

  • Разделяя код на модули, проще изменять отдельные функции или части. Управление кодом в небольших единицах упрощает обнаружение и исправление ошибок.

• Избежание конфликтов имен

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

• Управление зависимостями

  • Использование модулей позволяет явно управлять зависимостями приложения. Становится очевидно, какой модуль зависит от других модулей, что упрощает понимание структуры кода.

Резюме

Система модулей JavaScript — это мощный инструмент для организации кода и его разделения на повторно используемые компоненты. Понимая разницу между ES Modules и CommonJS и выбирая подходящую систему модулей в соответствии с проектом, вы можете повысить читаемость и поддерживаемость кода. Кроме того, использование динамических импортов позволяет оптимизировать производительность приложения.

Давайте использовать систему модулей для создания более масштабируемых и эффективных JavaScript-приложений.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video