如何跨JS文件访问变量？解决Unexpected Token <引入报错问题

嘿，我来帮你搞定这个问题～首先得先搞清楚你为什么会遇到Unexpected Token <错误：你不能在.js文件里直接写<script>标签！<script>是HTML语法，浏览器解析JS文件时看到这个符号，根本不知道怎么处理，自然就报错了。

下面给你两种靠谱的实现方式，按需选择：

方式一：通过HTML按顺序引入（简单直接，适合小型项目） #

既然两个JS文件是在浏览器环境中运行，最直接的办法是在你的HTML文件里按先first.js、后second.js的顺序引入它们：

<!-- 推荐放在HTML的<body>末尾，确保DOM元素已加载完成 -->
<script type="text/javascript" src="/first.js"></script>
<script type="text/javascript" src="/second.js"></script>

原理很简单：浏览器会按引入顺序加载并执行JS文件，first.js先执行，arrVar会成为全局变量，后面的second.js自然就能直接访问到它了。

不过要注意：document.getElementsByTagName("label")返回的是动态HTMLCollection，如果DOM还没加载完成就执行first.js，可能会拿到空集合。所以最好给first.js加DOM加载完成的监听，确保能正确获取元素：

// first.js里改成这样更稳妥
let arrVar;
document.addEventListener('DOMContentLoaded', function() {
  arrVar = document.getElementsByTagName("label");
});

方式二：使用ES模块（推荐，避免全局变量污染） #

如果你的项目规模稍大，不希望用全局变量（容易引发命名冲突），可以用ES模块的方式导出/导入变量：

1. 修改first.js，导出变量：

// first.js
let arrVar;
document.addEventListener('DOMContentLoaded', function() {
  arrVar = document.getElementsByTagName("label");
});
export { arrVar };

2. 在second.js里导入变量：

// second.js
import { arrVar } from './first.js'; // 路径要正确，同目录用./，不同目录对应调整

// 使用arrVar时要确保它已被赋值，比如同样监听DOM加载
document.addEventListener('DOMContentLoaded', function() {
  console.log(arrVar);
});

3. 最后在HTML里引入second.js时，要加上type="module"：

<script type="module" src="/second.js"></script>

这样浏览器就会按照ES模块的规则处理，自动加载依赖的first.js，而且变量不会污染全局作用域。

内容的提问来源于stack exchange，提问作者cpp_learner