Модули в JavaScript: основные возможности

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

Что такое модуль

Модули — это кусочки кода, которые хранятся в отдельных файлах. Это делает код более понятным и простым в обслуживании. Если вы используете модули, то имена всех функций и переменных будут уникальны в пределах одного файла. Поэтому внутри модуля можно просто назвать функцию «Hello». Кроме того, файлы можно использовать и для других проектов вместо того, чтобы копировать и вставлять строки программного кода. 

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

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

Вот пример кода, который не будет работать в режиме use strict:  

'use strict';
let undefined = 5; 
let Infinity = 5;
 
let obj = {};
Object.defineProperty(obj, 'foo', { value: 1, writable: false });
obj.foo = 1
 
let obj2 = { get foo() { return 17; } };
obj2.foo = 2
 
let fixedObj = {};
Object.preventExtensions(fixedObj);
fixed.bar= 1;

В этом коде undefined и Infinity — глобальные сущности, и их значения нельзя переписать, как и свойство foo объекта obj.

Отметим, что современные браузеры без проблем поддерживают use strict. Пользуйтесь этим режимом, чтобы не допускать ошибок в коде и повысить безопасность и работоспособность программ. 

Особенности использования модулей в браузерах

Модули JavaScript можно использовать и для работы с браузерами.

Современные браузеры поддерживают использование модулей у 92,81% пользователей интернета.

Браузеры, в которых поддерживается использование модулей у пользователей / Данные caniuse.com

Браузер загружает модуль, выполняя запрос GET. Чтобы не блокировать загрузки, работу браузера и HTML-кода, это делается асинхронно. 

В браузере можно загрузить модуль, определив его и использовав тег скрипта для загрузки. Например, модуль hello.js можно загрузить следующим образом:

export const hello = "Hello";

Прописываем другой модуль с именем index.js:

import { hello } from "./hello";
document.querySelector("#app").innerHTML = hello;

Затем загружаем их с помощью скрипта:

<script type="module" src="src/hello.js"></script>
<script type="module" src="src/index.js"></script>

Добавляем

<div id="app"></div>

И на экране появится Hello.

Инструменты сборки

Чтобы не загружать файлы по одному в браузер, существуют сборщики модулей. Например, для модулей CommonJS есть сборщик Browserify, а для AMD, CommonJS и ES6 — Webpack. Сборщик объединяет наши модули в один файл, чтобы не приходилось вручную прописывать путь к каждому из них.

Чтобы подключить сборку, не нужно печатать в коде команду import или export. Ее можно подключить к браузеру как обычный скрипт. К примеру, если вы собрали нужные модули в файл bundle.js с помощью Webpack или Browserify, то запустить его можно с помощью одной строчки кода:

<script src="bundle.js"></script>

Выводы

Использование модулей может сильно упростить жизнь программисту:

• Во-первых, с модулями становится легче поддерживать базу кода. Код с разными функциями находится в отдельных файлах и это очень удобно.
• Во-вторых, модули можно использовать и в других проектах. Вы легко сможете найти нужный модуль и использовать его еще не один раз.
Онлайн-курс "Digital Marketing" від Laba.
Розширте пул навичок у роботі з аудиторією.Навчіться запускати рекламні кампанії без зайвих витрат бюджету з сучасними інструментами діджитал-маркетингу, включаючи AI.
Детальніше про курс
• В-третьих, модули можно использовать в браузере и поместить весь код в один файл с помощью сборщика.

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