我正在测试 ES6 模块,并希望让用户使用 onclick:test.html 访问一些导入的函数:
<...
我正在测试 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
.
模块创建一个范围以避免名称冲突。
您可以使用 addEventListener
来绑定处理程序。 演示
<button type="button" id="hello">Click Me</button>
<script type="module">
import {hello} from './test.js'
document.querySelector('#hello').addEventListener('click', hello)
</script>
或者你可以把你的功能暴露给对象 window
,但是我们不推荐这样做。
import {hello} from './test.js'
window.hello = hello