← Назад ко всем вопросам

Что такое script type="module" в браузере

1️⃣ Как кратко ответить

<script type="module"> указывает браузеру, что данный скрипт является модулем JavaScript. Это позволяет использовать импорт и экспорт функций и переменных между файлами, а также обеспечивает изоляцию пространства имен и поддержку асинхронной загрузки.

2️⃣ Подробное объяснение темы

Модули JavaScript — это способ организации кода, который позволяет разделять его на отдельные файлы и управлять зависимостями между ними. Это делает код более структурированным и поддерживаемым. В HTML для указания, что скрипт является модулем, используется атрибут type="module" в теге <script>.

Зачем это нужно

  1. Изоляция пространства имен: Каждый модуль имеет свое собственное пространство имен, что предотвращает конфликты имен переменных и функций между различными частями приложения.
  2. Повторное использование кода: Модули позволяют экспортировать функции, объекты или примитивы из одного файла и импортировать их в другой, что способствует повторному использованию кода.
  3. Управление зависимостями: Модули позволяют явно указывать зависимости между различными частями приложения, что упрощает управление ими.
  4. Асинхронная загрузка: Модули загружаются асинхронно, что улучшает производительность загрузки страницы.

Как это работает

Когда браузер встречает <script type="module">, он обрабатывает его как модуль. Это означает, что:

  • Импорт и экспорт: Вы можете использовать ключевые слова import и export для обмена функциональностью между модулями.
// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // Вывод: 5

  • Асинхронная загрузка: Модули загружаются асинхронно, что позволяет не блокировать загрузку страницы. Это означает, что браузер может продолжать обрабатывать другие части страницы, пока модуль загружается.

  • Автоматический режим строгого соответствия: Все модули автоматически работают в строгом режиме (strict mode), что помогает избежать некоторых распространенных ошибок в JavaScript.

  • Отложенная загрузка: Модули загружаются в порядке, определенном зависимостями, а не в порядке их появления в HTML. Это позволяет избежать проблем с порядком загрузки.

Пример использования

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module Example</title>
</head>
<body>
  <script type="module">
    import { add } from './math.js';
    console.log(add(5, 7)); // Вывод: 12
  </script>
</body>
</html>
  • <script type="module">: Указывает, что скрипт является модулем.
  • import { add } from './math.js';: Импортирует функцию add из файла math.js.
  • console.log(add(5, 7));: Вызывает функцию add и выводит результат в консоль.

Использование модулей делает код более организованным и управляемым, особенно в больших проектах, где важно четко определять зависимости и изолировать функциональность.

Тема: Сборка и tooling
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки