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]()將起作用。