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