Question

我尝试使用从IObservable<IChangeSet<T, key>>文件导入的vars到我的代码中，但是我无法使其以例外的方式工作。

location_var.js

js

index.html

var location = {

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

};
export { location };

但是如果我在下面放置一个<script type="module"> import { location } from './location_var.js' console.log(location.lat) // this will be displayed </script>标签，就不能再使用我的变量。

<script>

有什么主意为什么不能在那儿叫它？

Answer 1

在模块中定义（或导入）的变量在该模块中仅作用域。如果<script type="module">定义或导入了某些内容，则它将在其他任何<script>标签中不可见。

与普通脚本不同，用const / let / var定义的变量名和函数声明不会放入全局环境中，因此即使将导入的{ {1}}转换为独立变量，将无济于事。

另一个问题是，这里有两个异步操作：您必须获得location才能获得location_var.js对象，并且还必须等待googleapis脚本要下载。这两个脚本都不相互依赖，但是您都想在两者完成后再运行一些东西（初始化地图）。要等待多个异步操作完成然后再运行其他操作，应使用location，要使用Promise.all，则需要确保每个异步操作完成后都会解决Promise。因此，这是一种可能的方法：

Promise.all

这将保留您当前的<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>就可以了。遵守Google承诺：

.then

如果您可以更改<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>的大部分位置，则上述方法更加简洁，绝对是可取的。

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

1 个答案: