个人中心
gpt4 book ai didi

javascript - 无法在代码中使用从 js 文件导入的 var

转载 作者：可可西里 更新时间：2023-11-01 14:58:58 26 4
gpt4 key购买 nike

我尝试使用来自 js 的导入变量文件到我的代码中，但我无法让它以异常(exception)的方式工作。

location_var.js

var location = {

    place: "Bogotá",
    lat: "4.710988599999999",
    lng: "-74.072092"

};
export { location };

index.html

<script type="module">
    import { location } from './location_var.js'
    console.log(location.lat) // this will be displayed
</script>

但是如果我放一个 <script>下面的标记，我不能再使用我的变量。

<body>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
        function initMap() {
            var place = { lat: location.lat, lng: location.lng }; // this doesn't work - console says the vars are undefined for some reasons
            var map = new google.maps.Map(
                document.getElementById('map'), { zoom: 4, center: place });
            var marker = new google.maps.Marker({ position: place, map: map });
        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
        </script>
</body>

为什么我不能在那里调用它？有什么想法吗？

最佳答案

模块中定义(或导入)的变量仅在该模块中具有作用域。如果 <script type="module">定义或导入某些东西，它不会在任何其他 <script> 中可见标签。

与普通脚本不同，用const 定义的变量名/let/var和函数声明不会放入全局环境中，所以即使您要放入导入的 location成一个独立的变量，它不会帮助。

另一个问题是你有两个异步操作在这里进行:你必须得到location_var.js得到location对象，您还必须等待下载 googleapis 脚本。这两个脚本都不依赖于另一个，但您希望在两者 完成后运行一些东西(初始化 map )。要等待多个异步事物完成然后运行其他事物，您应该使用 Promise.all , 并使用 Promise.all ，您需要确保每个异步操作在完成后都会解析一个 Promise。因此，这是一种可能的方法:

<script>
window.googleScriptPromise = new Promise((resolve) => {
  window.googleScriptCallback = resolve;
});
window.locationPromise = new Promise((resolve) => {
  window.locationResolve = resolve;
});

Promise.all([
  locationPromise
  googleScriptPromise,
])
  .then(([location]) => {
    // now, location will refer to the imported location, and google maps will have been loaded
  });
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=googleScriptCallback">
    </script>
<script type="module">
  import { location } from './location_var.js'
  window.locationPromise(location);
</script>

这会保留您当前的 <script>结构，但它依赖于一堆全局变量。如果你没有单独的 <script> 可能会好很多标记大部分代码，而不是将大部分代码放在模块中，这样你只需要调用 .then关于 Google 的 promise :

<script>
// must use a normal script tag to assign the Promise to window synchronously
window.googleScriptPromise = new Promise((resolve) => {
  window.googleScriptCallback = resolve;
});
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=googleScriptCallback">
    </script>
<script type="module">
import { location } from './location_var.js'
window.googleScriptPromise.then(() => {
  // now, location will refer to the imported location, and google maps will have been loaded
});
</script>

如果您能够更改大部分 <script> 的位置是的，上述方法更简洁，绝对更可取。

关于javascript - 无法在代码中使用从 js 文件导入的 var，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57705534/

26 4 0
文章推荐： html - 在桌面浏览器窗口中以不同视口(viewport) [移动设备、平板电脑、桌面设备] 呈现网站
文章推荐： java - Thread Main 中的异常 : ClassNotFoundException
文章推荐： Hadoop MultipleOutputs 输出文件 "part-day-26"
文章推荐： javascript - 如何复制包含许多脚本的div onclick
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com