Как использовать модули ECMAScript для создания модульных компонентов в JavaScript

1656560652 kak ispolzovat moduli ecmascript dlya sozdaniya modulnyh komponentov v javascript

Модули JavaScript теперь поддерживаются браузером. Это означает, что вы можете использовать это замечательное дополнение к JavaScript, представленное ECMAScript 2015, в браузере. Раньше, чтобы использовать модули, вам приходилось использовать пакет, такой как webpack. Но не больше. Как это круто!

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

Что такое JavaScript и почему вы должны использовать их вместо классического сценария?

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

Зачем использовать JavaScript?

Использование модулей JavaScript в вашем приложении вместо классического сценария имеет много преимуществ:

  • Разделение программы на модули: создание программы с помощью модулей делает ее более эффективной и повышает производительность вашего кода. Используя эти модули, вы можете лениво загружать свой код, и вы можете использовать только тот код, который вам нужен и избегать неиспользованного кода.
  • Использование строгого режима по умолчанию: Да, строгий режим включен по умолчанию в модулях JavaScript.
  • По умолчанию используется метод отложения
  • Это означает, что ваш HTML-код загружается параллельно с JavaScript. Следовательно, вам больше не нужно добавлять атрибут deferattribute к тегу сценария, когда вы используете ECMAScript.
  • Он динамически импортирует ваши модули.
  • С помощью модулей JavaScript вы можете настройте загрузку ваших модулей путем запуска динамической функции, импортирующей модуль на случай, если он вам понадобится. Это предполагает, что когда пользователь посещает ваш веб-сайт, вы должны загрузить только модуль, обрабатывающий профиль на тот случай, если пользователь вошел в систему. Это ясно объясняется в примере ниже:

usermodule.js

1*BBSJbj100sGSvDf_QtSZLQ

profile.js

1*ZMJhiekLpIo6CNUzwbo7mg

Как пользоваться модулями

Теперь в этой части мы рассмотрим способы использования модулей JavaScript. Вы можете легко использовать модуль JavaScript, указав тип атрибута для модуля в теге script, реализующего ваш основной файл JavaScript. Теперь можно использовать метод импорта и экспорта, чтобы импортировать свои модули.

1*oGuFFmwMqRp_UFui2o4nvg

И внутри своего main.js вы можете импортировать и экспортировать свои модули:

1*hzQ-Yhnz6BPpjNB7c6JSXA

Использование экспорт метод в profile.js:

1*DS0f7mgYekI2QxlYbSZV9g

Как показано в приведенном выше примере, модули ECMAScript легко использовать – в этом случае нет сложного кода.

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

Другим способом можно установить .mjs расширение к файлу, чтобы браузер мог идентифицировать модуль. Но это не внесет больших изменений, если вы установите атрибут type как модуль тега script.

Поддержка браузера

1*C-JPouX9w-nzK25EBHZpeQ

Похоже, что только современные браузеры поддерживают модули JavaScript. Но это нормально, если вы используете отличные браузеры, такие как Chrome, Edge и Firefox.

Мне больше не нужно использовать пакеты?

Адди Османи и Матиас Байненс объясняют в этой статье, что вам, вероятно, не нужен веб-пакетчик, например webpack, если вы разрабатываете веб-приложение с менее чем 100 модулями. Вы можете ознакомиться со статьей, где они рассказали о наилучших методах и эффективном использовании модулей ECMAScript здесь.

Найдите код в хранилище GitHub здесь.

Подведению

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

Первоначально опубликовано на Zeolearn

Присоединяйтесь к моему классу, чтобы выучить Bootstrap на Skill Share

Предыдущие статьи:

Добавить комментарий

Ваш адрес email не будет опубликован.