Классический скрипт javascript и область действия модуля

У меня странное поведение в моем внешнем коде javascript, поэтому я задаю вопрос, чтобы вернуться к основам. Сначала я приведу несколько примеров.

script1.js

var script1Var = "script variable";
function script1Test(){
  console.log("hello from script1 test");
}

script2.js

function script2Test(){
  console.log("hello from script2 test");
}

module1.js

export default function module1Test(){
  console.log("hello from module1 test");
}

module2.js

export default function module2Test(){
  console.log("hello from module2 test");
}

test_page1.html

<html>
 <head>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
 </head>
</html>

test_page2.html

<html>
 <head>
  <script type="module" src="module1.js"></script>
  <script type="module" src="module2.js"></script>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
 </head>
</html>

Вот мои вопросы:

  1. Во время выполнения из-за того, как test_page1.html выложен я предполагаю, что script2.js может вызывать функции в script1.js без необходимости импорта, но может script1.js вызывать функции в script2.js? В основном порядок имеет значение? Я совершенно уверен, что это так.
  2. В test_page2.html являются функциями от module1.js и module2.js виден script1.js и script2.js? Если нет, то как сделать их видимыми?
  3. В test_page2.html являются функциями от module1.js виден module2.js без использования импорта?

В основном мои вопросы сводятся к тому, как можно использовать классический скрипт (в нем нет экспорта) в модулях? И как можно использовать модули в классических скриптах. Преобразование классического скрипта в модуль здесь не вариант, так как есть много кода, который зависит от его использования в качестве классического скрипта. И то же самое для модулей, они не могут быть преобразованы в классические сценарии, поскольку есть другой код, использующий их как модули.

Спасибо за помощь

Источник

1 ответ

  1. [...] но может ли script1.js вызывать функции в script2.js? В основном порядок имеет значение? Я совершенно уверен, что это так.

Это зависит. script1.js не может вызывать функции из script2.jsпока его оценивают. Т.е. что-то вроде

// script1.js
script2Test();

не сработает.

Но он может вызывать эти функции до тех пор, пока после script2.jsзагружен. Например, в ответ на событие:

// script1.js
document.body.onclick = function() {
  script2Test();
}
  1. В test_page2.html функции из module1.js и module2.js видны для script1.js и script2.js?

Нет. Каждый модуль создает отдельную область. Доступ к экспорту возможен только путем их импорта.

Если нет, то как сделать их видимыми?

Модули должны были бы явно создавать глобальные переменные, например, назначая свойство для window:

window.module1Test = module1Test;

Но и здесь такая функция может быть вызвана только после загрузки / оценки модуля.

Лучшим решением (по крайней мере, я считаю, что это работает в "обычных" сценариях) будет динамический импорт модуля через import функция:

import('./module1Test.js').then(exports => console.log(exports));
  1. В test_page2.html видны ли функции из module1.js в module2.js без использования импорта?

Нет. Как я уже сказал, каждый модуль создает свою собственную область видимости.

Источник
Другие вопросы по тегам