Uncaught Reference Error: variable undefined

Question

我正在尝试在单独的 javascript 文件中定义 class，然后在我的 HTML 文件中使用该 class。

这是我正在尝试的。

我在 VoiceCard.js 文件中创建 class 语音卡：

class VoiceCard {
    constructor(nickname, date_time, post_title, voice_post) {
        this.nickname = nickname;
        this.date_time = date_time;
        this.post_title = post_title;
        this.voice_post = voice_post;
    }

我创建了一个 HTML 文件，我将文件添加为源：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script type="module" src="../VoiceCard.js"></script>
</head>

我创建了一个脚本，我在其中调用 class 来创建语音卡的新变量 class 并将其中一个属性记录到控制台：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script type="module" src="../VoiceCard.js"></script>
</head>
<body>
<script type="text/javascript">
    let v_card = new VoiceCard(
        "Lorder",
        "12:00",
        "First Voicer Post",
        "file_location.mp4");

    console.log(v_card.nickname);
</script>
</body>
</html>

错误是：Uncaught ReferenceError: VoiceCard is not defined。

我好像找不到错误的原因。任何帮助将不胜感激。

Answer 1

模块不创建全局变量。这就是他们的大部分观点。 :-)

以下是如何做您想做的事情：

删除 VoiceCard.js 的 script 标签。
在 VoiceCard.js 中，通过在 class 前面添加 export，导出 class。
将内联脚本更改为从 VoiceCard.js 文件导入 class 的内联模块。

所以：

export class VoiceCard {
// ^^^
    constructor(nickname, date_time, post_title, voice_post) {
        this.nickname = nickname;
        this.date_time = date_time;
        this.post_title = post_title;
        this.voice_post = voice_post;
    }
} // <== This closing `}` was missing

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <!-- No script tag for VoiceCard -->
</head>
<body>
<script type="module">
import { VoiceCard } from "../VoiceCard.js"; // ***
let v_card = new VoiceCard(
    "Lorder",
    "12:00",
    "First Voicer Post",
    "file_location.mp4"
);
console.log(v_card.nickname);
</script>
</body>
</html>

浏览器会在看到 import 时自动下载 VoiceCard.js。

Answer 2

您可以删除 type="module" 来解决这个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <script src="../VoiceCard.js"></script>
</head>
<body>
<script type="text/javascript">
    let v_card = new VoiceCard(
        "Lorder",
        "12:00",
        "First Voicer Post",
        "file_location.mp4");

    console.log(v_card.nickname);
</script>
</body>
</html>

Uncaught Reference Error: variable undefined

Uncaught Reference Error: variable undefined

javascript

html

oop

referenceerror