如何从 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>

Answer 2

“模块”中的变量无法从外部访问，因此请使用 type="text/javascript" 作为

<script type="text/javascript">

function btnClick() {
   console.log('here')
}
</script>
<button onclick="btnClick()">Go!</button>