Использование ECMAScript для модульных компонентов в JavaScript
Что такое JavaScript модули и почему лучше использовать их вместо классических скриптов?
Модули JavaScript позволяют нам встраивать один в файл в другой с использованием методов import и export. Они также позволяют создавать модульные компоненты, которые могут быть повторно использованы.
Мы получаем много преимуществ, используя JavaScript модули:
- Разделение приложения на модули: создание приложения с помощью модулей делает его более эффективным и повышает производительность. Благодаря использованию модулей, вы сможете применять lazy load и избавиться от ненужного кода в вашем приложении.
- Использование Strict mode по умолчанию: Да, Strict mode включен по умолчанию в модулях JavaScript.
- Использование метода defer по умолчанию.
- Это означает, что ваш HTML-код загружается параллельно с JavaScript. Таким образом, вам больше не нужно добавлять атрибут defer в свой script тег, когда вы используете ECMAScript.
- Модули импортируются динамически
- С JavaScript модулями вы можете настроить загрузку своих модулей, запустив динамическую функцию, которая импортирует модуль в случае необходимости. Это предполагает, что при посещение пользователем сайта вы подгружаете profile модуль только когда пользователь авторизировался.
usermodule.js
profile.js
Как использовать модули
Теперь рассмотрим способы использования JavaScript модулей. Для использования модуля просто укажите атрибут type в script теге модуля, который реализует ваш основной JavaScript файл. Теперь вы можете использовать import и export методы для импорта ваших модулей.
И внутри main.js вы можете импортировать и экспортировать модули:
Использование метода export в profile.js:
Как показано в примере выше, использовать модули ECMAScript легко.
Когда вы задаете type в модуле, браузер автоматически рассматривает его как модуль JavaScript.
Еще вы можете установить .mjs-расширение файлу, чтобы браузер мог идентифицировать модуль. Но это не принесет никаких улучшений.
Поддержка браузера
Кажется, что только современные браузеры поддерживают JavaScript модули. Но все хорошо, если вы используете нормальный браузеры, такие как Chrome, Edge и Firefox
Заключение
JavaScript модули - отличный способ повысить производительность вашего приложения. Они позволяют использовать много вещей, которые сделают приложение более функциональным, такие как динамическая загрузка модулей и lazy loading. Главное, что он поддерживается браузером.
Перевод статьи How to use ECMAScript modules to build modular components in JavaScript от Digital Skynet :)
