个人中心
gpt4 book ai didi

Javascript 模块导入失败

转载 作者：行者123 更新时间：2023-11-30 11:02:56 25 4
gpt4 key购买 nike

我正在尝试在此处输入代码以从 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 }');}

This code partially executes

然后在这个部分执行之后，报错

Uncaught ReferenceError: sayHi is not defined

at onload (test.html:7)

报错图片如下:

This is the error that says sayHi function is not recognized. Why?

我在这里做错了什么？

最佳答案

模块的一大优点是其中的顶级声明等不会创建全局变量。 onxyz 属性样式事件处理程序的缺点之一是您使用它们调用的函数必须是全局函数。您的 sayHi 不是全局的，因此 onload="sayHi('Manish')" 失败，因为它无权访问 sayHi .

这是一件好事。

相反，只需调用 main.js 中的函数:

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

因为模块脚本会自动延迟到 HTML 处理结束，所以您知道在加载所有 HTML 之前不会发生这种情况。 this section of the spec 中的精美图片涵盖了这一点, 复制于此:

enter image description here

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

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

如果您需要来自 Hook 事件的元素的信息，请使用传统函数并以 this 访问元素，或者接受 event 参数并使用 event.currentTarget(您还可以将 event.target 用于事件所针对的元素，它可以在您 Hook 事件的元素内)。例如，假设您有:

<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"));
});

另请注意，正如 Vikas Saini 指出的那样，您的 say.js 使用的是字符串文字而不是模板文字(尽管他/她没有提及，但也有错误的语法替换)，因此您实际上会看到文本 Hello { $user } 而不是 Hello MK 或 Hello Manish。使用具有正确替换形式的模板文字(${user}，而不是 { $user}):

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

或简单的字符串连接:

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

关于Javascript 模块导入失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56855084/

25 4 0
文章推荐： javascript - 为什么 process.env 在模块中未定义？
文章推荐： java - 使用 Jersey 输出后 PDF 文件为空
文章推荐： java - 远程ejb方法参数隔离
文章推荐： swift - 类型错误 : Cannot read property 'messageBody' of undefined
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com