使用导入的 Javascript 函数 ES6 访问主文件中的全局变量答案

【问题标题】：Access a Global Variable in Main File with an Imported Javascript Function ES6使用导入的 Javascript 函数 ES6 访问主文件中的全局变量
【发布时间】：2018-09-20 14:12:26
【问题描述】：

我正在使用Vue.js，但只是使用JS 文件而不是vue 文件，我正在将一个组件导入到我的主app.js 中，如下所示：

import autoPosts from './components/autoPosts.js';

它可以很好地导入它，但我正在尝试访问这些全局变量。在人们因为我使用全局变量而毁掉我之前，你能告诉我这是否可能吗？

const apiRoot    = location.origin + '/wp-json/wp/v2/';
const acfApiRoot = location.origin + '/wp-json/acf/v3/';

import autoPosts from './components/autoPosts.js';

无论我在变量之前还是之后包含它，它都不会在该组件中读取 apiRoot 或 acfApiRoot。

唯一可行的方法是在我的组件文件autoPosts.js中声明变量

【问题讨论】：

您希望autoPosts 读取变量apiRoot 吗？
是的，我正在尝试让 autoPosts 读取主文件中的变量
app.js 是主模块并不意味着其中声明的变量是全局的。
我认为它们可以访问，但我显然错了

标签： javascript ecmascript-6 vuejs2 javascript-import

【解决方案1】：

仅仅因为app.js 是主模块并不意味着其中声明的变量成为全局变量。但是无论如何你都不应该使用全局变量。相反，创建另一个模块

// config.js
export const apiRoot    = location.origin + '/wp-json/wp/v2/';
export const acfApiRoot = location.origin + '/wp-json/acf/v3/';

您可以在需要常量的地方导入：

// components/autoPosts.js
import { apiRoot, acfApiRoot } from '/config.js';
…

【讨论】：

这正是我应该做的。没想到这可以做到。肯定需要复习更新的 javascript
我会在这里使用通配符导入器 (import * as config from './config.js')。然后您可以将变量引用为config.apiRoot，这更容易理解:)
@FabianvonEllerts 当然，哪种导入风格被认为更简单是主观的选择。
@Bergi 不知道导入文件中的代码每次导入时会不会重新计算？我正在寻找一种只运行一次基本功能（如'isMobile'）并且以后只引用它们的方法。或者，函数无论如何都被缓存了，性能提升不值得......
@FabianvonEllerts 每个模块只被实例化和评估一次。

【解决方案2】：

只是使用

const apiRoot = 'whatever';

不会使其成为全局变量，并且由于未导出，因此不可访问。

要使用全局变量，请将其添加到窗口中；

window.apiRoot = 'whatever';

它可以通过简单的变量名从任何其他类访问

console.log(apiRoot); // outputs 'whatever'

【讨论】：

window 仅在浏览器脚本中可用，但在 nodejs（或其他服务器端）应用程序中不可用。

【解决方案3】：

不能用window吗？

window.apiRoot = location.origin + '/wp-json/wp/v2/';

【讨论】：

@NateBeers 仅在模块加载后访问变量时，而不是在 autoPosts 模块执行期间访问