新手上路，请多包涵

我正在测试 ES6 模块并想让用户使用 onclick 访问一些导入的函数：

测试.html：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Module Test</title>
</head>
<body>
    <input type="button" value="click me" onclick="hello();"/>
    <script type="module">import {hello} from "./test.js";</script>
</body>
</html>

测试.js：

 export function hello() {console.log("hello");}

当我单击该按钮时，开发人员控制台显示： ReferenceError: hello is not defined 。我如何从模块中导入函数，以便它们可以作为 onclick 函数使用？

我正在使用 Firefox 54.0，并将 dom.moduleScripts.enabled 设置为 true 。

原文由 Konrad Höffner 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript ecmascript-6 es6-modules

阅读 489

2 个回答

得票最新

社区维基

发布于
2022-12-12

✓ 已被采纳

模块创建一个范围以避免名称冲突。

将您的函数暴露给 window 对象

import {hello} from './test.js'

window.hello = hello

或者使用 addEventListener 绑定处理程序。演示

<button type="button" id="hello">Click Me</button>
<script type="module">
  import {hello} from './test.js'

  document.querySelector('#hello').addEventListener('click', hello)
</script>

原文由 Yury Tarabanko 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-12

`ES6` 模块中的模块范围：

当您使用 type="module" 以下列方式导入脚本时：

 <script type="module">import {hello} from "./test.js";</script>

您正在创建一个称为模块范围的特定范围。这是模块范围相对于其他级别范围的位置。从全球开始，他们是：

全局范围：在最外层模块外的所有声明（即不在函数中，以及 const 和 let 不在块中）在 Javascript 运行时环境中的任何地方都可以访问
模块范围：模块内的所有声明都限定在模块范围内。当其他 javascipt 试图访问这些声明时，它会抛出一个引用错误。
函数范围：在函数体内部（顶层）声明的所有变量都是函数范围的
块作用域： let 和 const 变量是块作用域的

您收到 referenceError 是因为 hello() 函数是在模块中声明的，它是 module scoped 。正如我们之前看到的，模块范围内的声明仅在该模块内可用，而您试图在模块外使用它。

当我们 明确地 将它放在 window 对象上时，我们可以在模块内部进行全局声明，以便我们可以在模块外部使用它。例如：

 window.hello = hello;  // putting the hello function as a property on the window object

原文由 Willem van der Veen 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

ES6 模块：导入后未定义的 onclick 函数

`ES6` 模块中的模块范围：

你尚未登录，登录后可以

省市区街道数据在哪里可以下载？

js 如何将Key属性相同的放在同一个数组？

两个promise问题？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

前端页面脚本更新时，如何让用户端，使用最新脚本？

solidjs中如何实现vue中的keep-alive功能？

Stack Overflow 翻译

ES6 模块：导入后未定义的 onclick 函数

ES6 模块中的模块范围：

你尚未登录，登录后可以

省市区街道数据在哪里可以下载？

js 如何将Key属性相同的放在同一个数组？

两个promise问题？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

前端页面脚本更新时，如何让用户端，使用最新脚本？

solidjs中如何实现vue中的keep-alive功能？

Stack Overflow 翻译

`ES6` 模块中的模块范围：