时间戳

首页 > 解决方案 > 我可以在 JavaScript 中全局使用导入的函数和类吗？

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

问题描述

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

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

在我的 head 部分的 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>

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

标签： javascriptimportexport

解决方案

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

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

  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 中的任何位置访问，而无需任何导入。但这首先违背了使用导入的目的，并且不那么优雅。

推荐阅读