JavaScript使用字符串引用模块中的函数。

huangapple go评论62阅读模式
英文:

Javascript reference a function with a string (in a module)

问题

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

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

在main.js文件中,我有许多需要根据单击的按钮实例动态调用的函数。

通常的解决方法是使用window["my_func"],但在模块上下文中这不起作用。

我可以通过将每个函数分配给window来绕过这个问题,例如window.my_func = my_func;,但我是否遗漏了什么?是否有类似于window["my_func"] 在模块范围内起作用的东西?

英文:

I have a JS file loaded into the head as a module:

&lt;script type=&quot;module&quot; src=&quot;/js/main.js&quot;&gt;&lt;/script&gt; 

In the main.js file I have a number of function that need to be called dynamically, depending on what instance of a button is clicked.

The normal solution would be to use window[&quot;my_func&quot;] but this doesn't work in a module context.

I can get around this by assigning each function to the window i.e window.my_func = my_func; but is there something I'm missing here? Is there something similar to window[&quot;my_func&quot;] that works in the module scope?

答案1

得分: 1

你可以导入模块的命名空间对象,然后像你展示的那样使用它。所以,不要直接在script标签中包含/js/main.js,而是在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">

这将在10秒内每800毫秒调用functions.js中的onetwo之一。在 StackBlitz 上的示例(因为 Stack Snippets 不支持多个文件)。

英文:

You can import the module namespace object, then use it as you've shown. So instead of including /js/main.js directly in a script tag, have another module in the script tag that does the import and calls the functions as needed:

import * as fns from &quot;/js/main.js&quot;;

fns[&quot;my_func&quot;]();

For example, suppose you had functions.js:

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

and main.js:

import * as fns from &quot;./functions.js&quot;;

const timer = setInterval(() =&gt; {
    const fn = Math.random() &lt; 0.5 ? &quot;one&quot; : &quot;two&quot;;
    fns[fn]();
}, 800);
setTimeout(() =&gt; {
    clearInterval(timer);
}, 10000);

And you loaded main.js:

&lt;script type=&quot;module&quot; src=&quot;./main.js&quot;&gt;

That would call either one or two from functions.js once every 800ms until 10 seconds had passed. Example on stackblitz (since Stack Snippets don't support multiple files).

huangapple
  • 本文由 发表于 2023年3月9日 17:59:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/75682997.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定