gpt4 book ai didi

javascript - 直接在html中使用ES6模块中定义的函数

转载 作者:数据小太阳 更新时间:2023-10-29 06:09:18 25 4
gpt4 key购买 nike

我正在尝试完成一件非常简单的事情:我在一个 javascript 模块文件上有一些代码,我将它导入另一个 javascript 文件(不导出任何东西),我想调用其中的一些定义函数直接从 HTML 文件。

让我们举一些发生在我身上的有代表性的最小例子(实际测试了代码并给出了我在真实问题中遇到的完全相同的问题,实际上并不比这个问题复杂多少):

  • module.js:

    const mod = () => 'Hello there!';
    export { mod };
  • main.js:

    import { mod } from './module.js';

    function hello()
    {
    console.log(mod());
    }
  • main.html:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="module" src="module.js"></script>
    <script type="module" src="main.js"></script>
    </head>

    <body>
    <button name="next-button" onclick="hello()">Obi-Wan abandons the high ground to salute you</button>
    </body>
    </html>

没有 import(并将所有函数定义放在一个 .js 文件中),我可以直接从 HTML 调用该函数。然而,一旦我引入了模块,我就不能再这样做了:它只是说“hello()”函数没有定义。

我对 ES6 模块(实际上是前端 javascript)是全新的,所以我完全知道我刚才所说的只是缺乏知识(或理解),但我将不胜感激任何关于我是什么的评论做错了以及如何解决它,这样我就可以将我的代码放在不同的文件中并能够使用它。提前谢谢大家!

最佳答案

每个模块都有自己的范围。它们不像“普通”脚本那样共享全局范围。这意味着 hello 只能在 main.js 模块/文件本身内部访问。

如果您明确想要创建一个全局变量,您可以通过在全局对象window 上创建一个属性来实现:

function hello()
{
console.log(mod());
}
window.hello = hello;

另见 Define global variable in a JavaScript function


话虽如此,但最好避免使用全局变量。相反,您可以重组 HTML 以在创建按钮后加载模块并通过 JavaScript 绑定(bind)事件处理程序:

<!DOCTYPE html>
<html>
<body>
<button name="next-button">Obi-Wan abandons the high ground to salute you</button>
<script type="module" src="module.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>

import { mod } from './module.js';

function hello()
{
console.log(mod());
}
document.querySelector('button').addEventListener('click', hello);

关于javascript - 直接在html中使用ES6模块中定义的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53630310/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com