Window 中未识别的未使用功能

Question

在 ReactJS 中工作时，我遇到了一个问题，即“未使用”的导入函数无法被程序识别，并且我相信没有被添加到 window。

就我而言，我试图能够从其他文件中导入函数，然后通过字符串名称调用它们。

前任）

import {myFunction} from '../otherFile';

functionNameString = 'myFunction'
window[functionNameString]()       //call function by it's string name

//ERROR: window[functionNameString] is not a function

在不更改上述语法的情况下，我找到了两种解决此问题的方法：

1. 将实际的 function 添加到与window[functionNameString]()调用相同的文件中
2. 将 function 显式分配给我文件顶部的 window，例如window.myFunction = myFunction

我试图避免第一种情况以使该文件更短，但也不明白为什么我需要将 function 显式分配给 window，如第二种情况所示（以及为什么在相同的情况下定义 ZC1C425268E68384F14AZ0文件不需要这个）

总的来说，我的问题是如何避免这种显式分配并使这些导入的函数可以从导入中调用（或以更短的语法）？ 像这样分配对于 function 或两个来说很好，但我正在考虑从另一个文件中导入 15 个函数，这会使事情以这种方式工作变得混乱。 谢谢！

Answer 1

模块有自己的 scope，它们不在全局 scope 中，并且导入是作为模块 scope 中的绑定创建的，而不是全局的。 这至少是模块的一半：不再让所有东西都全球化。

总的来说，我的问题是如何避免这种显式分配并使这些导入的函数可调用？

它们是可调用的。 myFunction()将在您的示例代码中调用您的 function。 window没有任何理由参与其中。

如果出于某种原因需要在字符串中通过名称来引用它们，可以将它们放在 object 中：

const functions = {
    myFunction,
    // ...
};

然后functions[functionNameString]()将起作用。