Question

我正在尝试在此处输入代码以执行从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

然后在部分执行之后，它会给出错误

未捕获的ReferenceError：sayHi未定义

在加载时（test.html：7）

错误图片如下：

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

我在这里做什么错了？

Answer 1

字符串插值的经典情况

使用

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

以`代替'或'

引用https://campushippo.com/lessons/how-to-do-string-interpolation-with-javascript-7854ef9d

对于错误，将窗口绑定到加载

window.addEventListener("load", () => {
    sayHi('testing');
});

Answer 2

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

这是一件好事。

相反，只需从main.js调用函数即可：

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

因为模块脚本会自动推迟到HTML处理结束，所以您会知道，直到所有HTML都加载完毕，脚本才会发生。 this section of the spec中的一张精美图片对此进行了覆盖，并在此处复制：

如果您要等待更长的时间，直到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"));
});

还要注意，正如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);
}

Answer 3

基本上，我的目标是将一些参数从HTML脚本传递到main.js文件。在你们两个都给我提示后，我得到了要求，尤其是Vikas Saini。在main.js文件中添加事件侦听器的建议很有帮助。非常感谢。我将发布更正后的最新代码文件，以使像我这样的ES6初学者受益。

test.html文件内容

<html>
<head>
    <script type="module" src="./main.js"></script>
</head>
<body>
    <input type="text" id="btn-say-hi"label="fill here" placeholder="Fill in here and click"/>
</body>
</html>

main.js文件内容

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

say.js文件内容

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

请注意：所有这些文件都在同一目录/文件夹中。我可以更改文本项的值，并可以根据输入内容执行所需的执行。

非常感谢T.J. Crowder和特别感谢Vikas Saini 提供的与添加事件侦听器有关的代码段。那是一个黄金的建议。

非常感谢。问候 Manish。

JavaScript模块导入失败

3 个答案:

test.html文件内容

main.js文件内容

say.js文件内容