Сложные программы обычно содержат сотни строк кода, в которых тяжело ориентироваться. Организовать ваш код в 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% пользователей интернета.
Браузер загружает модуль, выполняя запрос 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>
Использование модулей может сильно упростить жизнь программисту:
Только не забывайте пользоваться строгим режимом при работе с модулями, иначе ничего не будет работать.
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…