Question

尝试使用GoJS库时，出现“导入声明只能出现在模块的顶层”的错误。。

main.html

...
<script id = "code">
    import {makeNodes} from "./make_nodes.js";

    function init(){
       makeNodes(model);
       ...
    }
</script>

<body onload="init()">
...

make_nodes.js

export function makeNodes(model){
    ...
}

Answer 1

如错误所述，除非在模块中，否则不能使用import。您的代码不在模块中。要使其成为模块，请在type="module"标签中使用script：

<script id = "code" type = "module">

但是，请注意，浏览器中模块的本机支持为very new。（而且，它在IE中也不起作用，而且永远不会。）大多数使用import / export语法的人仍然通过编译器和/或捆绑程序（例如Webpack或Browserifty）来这样做。 >

一旦您这样做，init将不再是全局变量，但是您的<body onload="init()">希望init是全局变量。（这是不使用onxyz属性型事件处理程序的几种原因之一。）要解决此问题，请在代码中挂接事件，从onload中删除<body>属性：

function init(){
   makeNodes(model);
   // ...
}
window.addEventListener("load", init);

但是，您正在使用的load事件在页面加载过程中非常非常晚的时候发生，等待所有图像和其他资源完成加载。在大多数情况下，you're better off比将代码script移动到文档的最后（紧接在</body>元素之前）运行代码的时间更早，然后立即进行初始化：

<body>
<!-- presumably there's stuff here ... -->

<script id="code" type="module">
    import {makeNodes} from "./make_nodes.js";

    function init(){
       makeNodes(model);
       // ...
    }
    init();
</script>
</body>

到那时，script标记上方的HTML定义的所有元素都存在并且可以对其进行操作。

用javascript导入函数

1 个答案: