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