在javascript中导入函数答案

【问题标题】：Importing functions in javascript在javascript中导入函数
【发布时间】：2019-03-06 11:35:33
【问题描述】：

尝试使用 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){
    ...
}

【问题讨论】：

标签： javascript html import module export

【解决方案1】：

正如错误所说，您不能在模块中使用import。您的代码不在模块中。要使其成为一个模块，请在script 标签中使用type="module"：

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

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

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

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

但是，您使用的load 事件在页面加载过程中非常非常晚地发生，等待所有图像和其他资源完成加载。在大多数情况下，you're better off 通过将 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 定义的所有元素都存在并且可以对其进行操作。

【讨论】：