<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/chessboard-1.0.0.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="module" src="js/gitchess/chess.js"></script>
    <script type="text/javascript" src="js/chessboard-1.0.0.js"></script>
    <script type="module" src="js/frontend.js"></script>
    <title>CHESS</title>
</head>

Поскольку объекты внутри chess.js недоступны, если они не import 'ed, загружаются ли они в отдельный файл? Если на то пошло, как скрипты модулей загружаются в DOM, а не обычные скрипты?

1
brittle_spirit 1 Окт 2022 в 20:53
Недоступность (в глобальной области видимости) не означает, что они не загружены или что код модуля не будет выполняться. Так же, как и другие скрипты.
 – 
Bergi
1 Окт 2022 в 21:17

2 ответа

Если вы имеете в виду, как скрипты загружаются за кулисами, есть 3 способа, которыми я помещаю это изображение, которое идеально объясняет на основе различных загрузок скриптов: https://i.stack.imgur.com/ULvu1.png

Как вы можете видеть, скрипт, который имеет 'defer', анализируется одновременно, но будет выполняться после полного анализа HTML. Порядок, в котором вы пишете сценарии, становится важным, если вам нужно, чтобы некоторые данные были доступны раньше.

<script type="module" src="js/gitchess/chess.js" defer></script> 

Атрибут async, кстати, приостанавливает процесс парсинга HTML и запускает выполнение файлов скриптов. Хотя порядок не важен.

<script type="module" src="js/gitchess/chess.js" async></script> 

Надеюсь, я правильно понял ваш вопрос.

0
Abolfazl Jamshidi 1 Окт 2022 в 21:39

См. руководство ниже: Модули в HTML/JS Кроме того, этот репозиторий содержит очень простой пример использования модулей: Использование базового модуля Github

-1
Amirhossein Sefati 1 Окт 2022 в 21:13
LПожалуйста, не просто размещайте какие-либо ссылки в другом месте, а скорее самостоятельный ответ на вопрос.
 – 
Bergi
1 Окт 2022 в 21:20