javascript - 如何从 HTML 元素事件调用 <script type ="module"> 内的 javascript 函数？

Question

我有一个简单的 HTML 页面，它正在导入一个 JS 模块，如下所示:

.. snip
<button onclick="btnClick()">Go!</button>

<script type="module">
import { func1 } from './utils.js'

function btnClick() {
   func1()
}
</script>

单击该按钮会产生错误:未定义 btnClick()。

为什么会这样？如何将这些功能带回正确的范围？

Answer 1

javascript 执行堆栈有自己的范围，因此，简单易用的解决方案是，您可以将您可访问的功能分配给窗口范围，如下所示；

<button onclick="btnClick()">Go!</button>

<script type="module">
    import { func1 } from './utils.js'

    function btnClick() {
      func1()
    }

    // variable function
    window.btnClick = btnClick;

    // or anonymous function
    window.btnClick = function(youCanSetParams){
      func1()
    }
</script>