Автор оригинала: Said Hayani.
JavaScript Модули теперь поддерживаются браузером. Это означает, что вы можете использовать это отличное дополнение в JavaScript, представленном Ecmascript 2015, в браузере. Ранее вы должны были использовать Bundler, например WebPack Для того, чтобы использовать модули. Но не больше. Как это круто!
Таким образом, в этой статье мы будем проходить через модули JavaScript и исследовать, как мы можем использовать их в нашем веб-приложении.
Что такое JavaScript модули и почему вы должны использовать их вместо классического сценария?
Модули JavaScript в основном позволяют импортировать файл в другой файл, используя методы импорта и экспорта. Они также позволяют нам построить модульные компоненты, которые можно многоразоваться.
Зачем использовать JavaScript модули?
Есть много преимуществ, которые приходят с использованием модулей JavaScript в вашем приложении вместо классического скрипта:
- Отделение вашего приложения в модули : Создание вашего приложения с модулями делает его более эффективным и увеличивает производительность вашего кода. Используя эти модули, вы можете лениться загрузить свой код, и вы можете использовать только код, который вам нужен, и избегать неиспользованного кода.
- Используя строгий режим по умолчанию: Да, строгий режим включен по умолчанию в модулях JavaScript.
- Способ отлога используется по умолчанию
- Это означает, что Ваш HTML Код загружен параллельно с JavaScript Отказ Итак, вам не нужно больше добавлять deferattribute в тег вашего сценария, когда вы используете Ecmascript.
- Он импортирует ваши модули динамически
- С помощью модулей JavaScript вы можете Настройте загрузку ваших модулей Запустив динамическую функцию, которая импортирует модуль, на всякий случай, если вам это нужно. Это предполагает, что когда пользователь посещает ваш сайт, вы должны загрузить только модуль, который обрабатывает профиль на том случае, если пользователь вошел в систему. Это объясняется в примере ниже:
Usermodule.js.
Профиль.js.js.
Как использовать модули
Теперь, в этой части мы собираемся исследовать способы использования JavaScript Module. Вы можете легко использовать модуль JavaScript Указав тип атрибута в модуль в теге скрипта, который реализует ваш основной файл JavaScript. Теперь вы можете использовать метод импорта и экспорта для импорта модулей.
И внутри вашего main.js Вы можете импортировать и экспортировать свои модули:
Используя Экспорт Метод Профиль .js :
Как показано в приведенном выше примере, легко использовать модули Ecmascript – в этом случае нет сложного кода.
Когда вы устанавливаете тип в модуле, браузер автоматически обнаруживает, что файл представляет собой модуль и обрабатывает его как модуль JavaScript.
По-другому, вы можете установить .mjs. Расширение к файлу, чтобы браузер может идентифицировать модуль. Но это не имеет больших изменений, если вы устанавливаете атрибут типа в виде модуля в тег сценария.
Поддержка браузера
Похоже, что только современные браузеры поддерживают JavaScript модули. Но это нормально, если вы используете отличные браузеры, такие как Chrome, Edge и Firefox.
Мне больше не нужно использовать Bundlers?
Addy Osmani и Mathias Bynens Объясните в этом Статья То, что вам, вероятно, не нужна веб-бабка, такая как WebPack, если вы разработаете веб-приложение с менее чем 100 модулями. Вы можете проверить статью, в которой они выставили лучшие практики и хорошее использование модулей Ecmascript здесь Отказ
Найти код в репозитории GitHub здесь Отказ
Обертывание
Модули JavaScript – отличный способ увеличить производительность вашего приложения. Они позволяют вам делать много вещей, которые делают ваше приложение более качественным, как динамическая нагрузка ваших модулей, ленивая загрузка и многое другое. Более того, великое состоит в том, что он поддерживает браузер. Итак, не стесняйтесь воспользоваться их преимуществами, если вы не используете файл Bundler.
Первоначально опубликовано Zeolearn
Присоединяйтесь к моим классам, чтобы узнать Bootstrap по долю навыков
Предыдущие статьи:
- JavaScript ES6 – напишите меньше, сделайте больше
- Узнайте Bootstrap 4 в 30 минутах, построение посадки на сайт
- Угловой 6. И это новые функции, все объясненные в три минуты
- Как использовать маршрутизацию в Vue.js, чтобы создать лучший пользовательский опыт
- Вот самые популярные способы сделать HTTP-запрос в JavaScript
- Узнайте, как создать свое первое угловое приложение за 20 минут
Оригинал: “https://www.freecodecamp.org/news/how-to-use-ecmascript-modules-to-build-modular-components-in-javascript-9023205ea42a/”