我可以在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; 

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

Answer 2

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

在main.js中：

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

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