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

Question

我正在使用 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中声明这些变量。

- Nate Beers

---

你希望 autoPosts 读取变量 apiRoot 吗？ - epascarello

是的，我正在尝试让autoPosts读取主文件中的变量。 - Nate Beers

仅仅因为 app.js 是主模块，并不意味着在其中声明的变量会成为全局变量。 - Bergi

我以为它们是可访问的，但显然我错了。 - Nate Beers

Answer 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';
…

- Bergi

---

这正是我应该做的。我从不知道这可以做到。肯定需要提高一下对新版JavaScript的了解。 - Nate Beers

我会在这里使用通配符导入器(import * as config from './config.js')。然后你可以将变量引用为config.apiRoot，这更容易理解 :) - Fabian von Ellerts

@FabianvonEllerts 当然可以，哪种导入风格更简单是一个主观选择。 - Bergi

@Bergi 你知道导入文件中的代码是否每次导入时都会重新评估吗？我正在寻找一种方法，只运行基本函数（如“isMobile”）一次，并稍后仅引用它们。或者也许该函数已被缓存，性能提高并不值得... - Fabian von Ellerts

@FabianvonEllerts 每个模块只被实例化和评估一次。 - Bergi

Answer 2

只是使用

const apiRoot = 'whatever';

这并不会创建一个全局变量，因为它没有被导出，所以也无法访问。

要使用全局变量，请将其添加到window对象中；

window.apiRoot = 'whatever';

并且它可以通过简单的变量名称从任何其他类中访问。

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

- Georgios Dimitriadis

---

window 只在浏览器脚本中可用，而不在 Node.js（或其他服务器端）应用程序中。 - Philipp

Answer 3

它不能使用窗口吗？

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

- RyanA91

---

只有在模块加载后访问变量时，才能使用@NateBeers，而不是在“autoPosts”模块执行期间。 - Bergi