用javascript导入函数

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 。 您的代码不在模块中。 要使其成为模块，请在script标签中使用type="module" ：

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

但是，请注意，对浏览器中模块的本机支持是非常新的。 （此外，它在IE中也不起作用，永远不会。）大多数使用import / export语法的人仍然通过编译器和/或打包程序（例如Webpack或Browserifty）来这样做。

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

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

但是，您正在使用的load事件在页面加载过程的非常非常晚的时候发生，等待所有图像和其他资源完成加载。 在大多数情况下，最好将script元素移到文档的最后，即在</body>元素之前，然后立即执行init：

<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 个解决方案

解决方案1
0 已采纳 2018-10-01 11:05:57

用javascript导入函数

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-10-01 11:05:57

解决方案1
0 已采纳 2018-10-01 11:05:57