我可以在JavaScript中全局使用导入的函数和类吗？

Question

我想从html头文件中的所有类切换到模块方法。

我想在按钮和其他元素上使用一些方法和功能。

在我的index.html头部：

<script src="js/main.js" type="module" defer></script>

在main.js内部：

import {writeAlert} from './test.js';

在test.js内部：

export function writeAlert () {
    alert('I am an alert');
}

在index.html的body元素内部

<button onlick="writeAlert()">Alert</button>

我收到错误消息，指出未定义函数（或在其他情况下为类）。那么，实现导入功能的全局使用的方法是什么？客户实际上可以通过这种方法查看我的整个源代码吗？

Answer 1

模块中导入的标识符在外部不可见。

按个人喜好排序的两种解决方案：

1. 将回调安装从HTML移至JS：
   • 将按钮定义更改为：<button id="alertButton">Alert</button>
   • 将以下代码添加到main.js或另一个导入writeAlert的模块中：

   document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("alertButton").onclick = writeAlert;
   });
   

2. 在其中一个模块中将“ writeAlert”导出到window上：

   import { writeAlert } from "./test.js";
   window.writeAlert = writeAlert;
   

   这样，writeAlert可以在代码，HTML或JS中的任何位置访问，而无需任何导入。但这恰恰违背了使用导入的目的，而且不够优雅。

Answer 2

这是一个不完整的答案。但是，相同的想法可以进一步扩展。

在main.js中：

import {writeAlert} from './test.js';
window.writeAlert = writeAlert;

之后，可以从HTML文件访问“ writeAlert”。