Javascript模块导入失败

曼尼斯·德什潘德(Manish Deshpande)

我正在尝试在此处输入代码以执行从HTML页面导入的模块。我看到它正在部分执行。我需要帮助。我的代码文件是test.html,main.js和say.js。这些文件在下面以相同的顺序生成。

test.html

<html>
 <head>
     <script type="module" src="./main.js"></script>
 </head>
 <body onload="sayHi('Manish')">
 </body>
</html>

main.js

import { sayHi } from './say.js';
sayHi('MK');

say.js

export function sayHi(user) {
alert('Hello, { $user }');}

此代码部分执行

然后,在部分执行之后,它给出了一个错误

未捕获的ReferenceError:sayHi未定义

在onload(test.html:7)

错误图片如下所示:

这是无法识别sayHi函数的错误。为什么?

我在这里做错了什么?

TJ人群

关于模块的一大优点是顶级声明等不会在模块中创建全局变量。关于onxyz-attribute风格的事件处理程序的坏事之一是,您使用它们调用的函数必须是全局函数。sayHi不是全局用户,因此onload="sayHi('Manish')"失败,因为它无法访问sayHi

这是一件好事。

相反,只需从中调用函数main.js

import { sayHi } from './say.js';
sayHi('MK');
sayHi('Manish');

因为模块脚本会自动推迟到HTML处理结束,所以您知道要等到所有HTML都加载后才能执行。本节的此部分中,有一个很棒的图形覆盖了该图形,此处重复了以下内容:

在此处输入图片说明

如果您想等待更长的时间,直到load事件(直到加载所有图像等都不会触发),请使用现代的事件处理程序来执行此操作:

import { sayHi } from './say.js';
sayHi('MK');
window.addEventListener("load", () => {
    sayHi('Manish');
});

如果需要挂钩事件的元素的信息,请使用传统函数并以方式访问该元素this,或接受event参数并使用event.currentTarget(您也可以event.target将事件所针对的元素用于该对象,它可以位于挂钩的元素之内事件发生)。例如,假设您有:

<button type="button" data-name="Manish" id="btn-say-hi">

你可以有:

import { sayHi } from './say.js';
document.getElementById("btn-say-hi").addEventListener("click", function() {
    sayHi(this.getAttribute("data-name"));
});

同时请注意,维卡斯赛尼指出您say.js正在使用一个字符串,而不是一个模板文字(尽管他/她没有提到它,也有一个替代错误的语法),所以你实际看到的文本Hello { $user },而不是看到Hello MKHello Manish使用具有正确替换形式的模板文字(${user},不是{ $user }):

export function sayHi(user) {
    alert(`Hello, ${user}`);
}

或简单的字符串连接:

export function sayHi(user) {
    alert("Hello, " + user);
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章