我有一行html脚本
<script
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=drawing&callback=initMap"
async defer>
</script>它们在我的main.js文件中有一个名为initMap()的回调方法。现在,我正在尝试采用模块的使用,因此我在脚本行中添加了type=module。
<script type="module" src="main.js"></script>现在浏览器抱怨没有initMap功能。我曾尝试在initMap()的函数声明前面添加export,但不起作用。如何将initMap()暴露给接口回调?另外,为什么添加type=module后,initMap()方法在中变得可访问?我对使用模块是个新手。谢谢!
发布于 2020-02-24 19:46:29
在添加type="module"之前,initMap是在全局作用域中(即在window对象上),所以当Google Maps脚本完成加载时,说“嘿运行时!为我执行一个名为'initMap‘的函数”,然后引擎在当前作用域中查找它,找到initMap并执行它。
模块都是关于封装的,所以它们里面的所有东西都是私有的,除非导出(这是您已经开始探索的一个方向)。然而,导出只是解决方案的一半--您还需要导入该函数。我主要在代码库中工作,在那里你可以和webpack捆绑在一起,你通常会在你的模块中导出一堆东西,然后像这样导入它们:import { myFunction } from "./path/to/module.js"。我不明白如何在这个<script>- in -HTML设置中使用它,因此您可以手动将initMap添加到window对象中,这样当Google Maps请求它时,运行时就会找到它。
// 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;
})();https://stackoverflow.com/questions/60370085
复制相似问题