3.8 KiB
3.8 KiB
sidebar_position
| sidebar_position |
|---|
| 1 |
Модули
Основные понятия:
- Модуль – это файл. Чтобы работал
import/export, нужно для браузеров указывать атрибут<script type="module">. У модулей есть ряд особенностей:- Отложенное (deferred) выполнение по умолчанию.
- Атрибут async работает во встроенных скриптах.
- Для загрузки внешних модулей с другого источника, он должен ставить заголовки CORS.
- Дублирующиеся внешние скрипты игнорируются.
- У модулей есть своя область видимости, обмениваться функциональностью можно через
import/export. - В модулях всегда включена директива
use strict. - Код в модулях выполняется только один раз. Экспортируемая функциональность создаётся один раз и передаётся всем импортёрам.
Когда мы используем модули, каждый модуль реализует свою функциональность и экспортирует её. Затем мы используем import, чтобы напрямую импортировать её туда, куда необходимо. Браузер загружает и анализирует скрипты автоматически.
В реальной жизни часто используется сборщик Webpack, чтобы объединить модули: для производительности и других «плюшек».
Библиотеки для динамической подгрузки модулей.
- AMD – одна из самых старых модульных систем, изначально реализована библиотекой require.js.
- CommonJS – модульная система, созданная для сервера Node.js.
- UMD – ещё одна модульная система, предлагается как универсальная, совместима с AMD и CommonJS.
Что такое модуль?
Модуль – это просто файл. Один скрипт – это один модуль.
Модули могут загружать друг друга и использовать директивы export и import, чтобы обмениваться функциональностью, вызывать функции одного модуля из другого:
- export отмечает переменные и функции, которые должны быть доступны вне текущего модуля.
- import позволяет импортировать функциональность из других модулей.
Основные возможности модулей
- В модулях всегда используется режим use strict.
- Каждый модуль имеет свою собственную область видимости.
- Если один и тот же модуль используется в нескольких местах, то его код выполнится только один раз, после чего экспортируемая функциональность передаётся всем импортёрам.
- Объект import.meta содержит информацию о текущем модуле. Содержимое зависит от окружения.
- В модуле на верхнем уровне this не определён (undefined).