Сделать метод обратного вызова доступным для карт Google

Question

У меня есть html строка сценария

<script
      src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=drawing&callback=initMap"
      async defer>
</script>

, у которой есть метод обратного вызова под названием initMap(), который находится в моем main.js файле. Сейчас я пытаюсь принять использование модулей, поэтому я добавил type=module в мою строку сценария.

    <script type="module" src="main.js"></script>

Теперь браузер жалуется, что функции initMap нет. Я попытался добавить export перед объявлением функции для initMap(), но это не работает. Как мне выставить initMap() к обратному вызову API? Кроме того, почему метод initMap() становится доступным после добавления type=module? Я новичок в использовании модулей. Спасибо!

Answer 1

TLDR; Перед добавлением type="module" initMap находился в глобальной области видимости (то есть для объекта window), поэтому, когда скрипт Google Maps завершил загрузку, он сказал: «Эй, время выполнения! Выполните функцию с именем 'initMap' для меня" и Движок искал его в текущей области видимости, нашел initMap и выполнил его.

Модули - это все о инкапсуляции, поэтому все внутри них является приватным, если не экспортировано (это направление, которое вы уже начали изучение). Однако экспорт - это только половина решения - вам также необходимо импортировать эту функцию. Я работаю в основном в кодовых базах, где вы делаете связывание с веб-пакетом, и вы обычно экспортируете кучу вещей в свои модули, а затем импортируете их так: import { myFunction } from "./path/to/module.js". Я не понимаю, как вы могли бы использовать это в этой <script> -in- HTML настройке, хотя вместо этого вы могли бы добавить initMap к window объекту вручную, чтобы среда выполнения находила его, когда Google Карты запрашивают это.

// inside main.js
function initMap() {
  console.log("Hey! This is inside a callback passed to Google Maps script");
}

// this is IIFE - i.e. runs immediately
(function() {
  window.initMap = initMap;
})();