Javascript 引用带有字符串的函数（在模块中）

Question

我有一个 JS 文件作为模块加载到头部：

<script type="module" src="/js/main.js"></script> 

在 main.js 文件中，我有许多函数需要动态调用，具体取决于单击的按钮实例。

正常的解决方案是使用

window["my_func"]

但这在模块上下文中不起作用。

我可以通过将每个功能分配给窗口来解决这个问题，即

window.my_func = my_func;

但是我在这里缺少什么吗？在模块范围内是否有类似于

window["my_func"]

的东西？

Answer 1

您可以导入模块命名空间对象，然后按照您所展示的那样使用它。因此，与其将

/js/main.js

直接包含在

script

标签中，不如在

script

标签中有另一个模块来执行导入并根据需要调用函数：

import * as fns from "/js/main.js";

fns["my_func"]();

例如，假设你有

functions.js

：

function show(msg) {
    const p = document.createElement("p");
    p.textContent = msg;
    document.getElementById("output").appendChild(p);
}
export function one() {
    show("Function one called");
}
export function two() {
    show("Function two called");
}

和

main.js

：

import * as fns from "./functions.js";

const timer = setInterval(() => {
    const fn = Math.random() < 0.5 ? "one" : "two";
    fns[fn]();
}, 800);
setTimeout(() => {
    clearInterval(timer);
}, 10000);

你加载了

main.js

：

<script type="module" src="./main.js">

这将每 800 毫秒从

one

调用一次

two

或

functions.js

，直到 10 秒过去。 stackblitz 上的示例（因为 Stack Snippets 不支持多个文件）。