javascript - 在 html 中访问在单独的 JavaScript 文件中声明的变量

Question

我有 2 个文件，第一个是 HTML 文件，另一个是 javascript 文件。我试图做的是在 javascript 文件上定义一个变量并在 Html 端访问它。可能吗？下面附有一个粗略的代码，但它不起作用我收到 favColor is not defined 错误。提前致谢。

JS 端

const favColor = "red"

HTML 端

<script src="pathtojsfile"></script>

<p id="insertHere"></p>

<script>
document.getElementById("insertHere").innerHTML = favColor
</script>

Answer 1

使用全局变量被广泛认为是不好的做法。为避免这种情况，您可以使用 ECMAScript 模块，该模块于 2015 年随 ES6/ES2015 引入。

这允许您的第一个 Javascript，我们将其命名为 colors.module.js 以export 变量:

export const favColor = 'red';

然后，在需要访问此变量的脚本中，导入它:

import { favColor } from '/path/to/js/modules/colors.module.js';

为此，您的importing 脚本需要具有type=module 属性，并且import 必须在你的Javascript。您从导入的脚本不需要包含在页面中。

这里有一些帮助您开始使用模块的链接:

• ES Modules Deep Dive
• Javascript Modules on MDN
• Flavio Copes' take on ES Modules

我已经设置了 a tiny github repo demonstrating this very basic usage of an ES module .

如果模块不是一个选项，例如因为您必须支持 IE 11，或者您的构建堆栈不支持模块，所以这里有一个替代模式，它适用于您附加到全局对象 window 的单个命名空间对象:

// colors.module.js
window.projectNamespace = window.projectNamespace || {};
projectNamespace.colors = window.projectNamespace.colors || {};
projectNamespace.colors.favColor = 'red';

在您的页面中，您可以从该 namespace 访问它:

document.getElementById("insertHere").innerHTML = window.projectNamespace.colors.favColor;

这样您就可以在一个位置放置所有可全局访问的变量。