在多个 JavaScript 文件中引用同一个 JS 文件，可以通过以下几种方式实现，具体取决于你的运行环境（如浏览器、Node.js 或模块化开发工具）：
1. 浏览器环境（HTML 中直接引入）
在 HTML 文件中通过 <script> 标签引入公共 JS 文件，其他 JS 文件即可直接使用其暴露的变量或函数。
<!-- index.html --><script src="common.js"></script> <!-- 公共库 --><script src="file1.js"></script> <!-- 依赖 common.js --><script src="file2.js"></script> <!-- 依赖 common.js -->
- 注意：确保
<script>的加载顺序（被依赖的文件先加载）。
2. ES6 Modules（现代浏览器/打包工具）
使用 import/export 语法实现模块化引用：
（1）在公共文件 common.js 中导出内容：
// common.jsexport const sharedVar = "Hello";export function sharedFunc() { console.log(sharedVar); }
（2）在其他文件中导入：
// file1.jsimport { sharedVar, sharedFunc } from './common.js';sharedFunc();
（3）HTML 中需声明模块类型：
<script type="module" src="file1.js"></script>
- 适用场景：Webpack、Vite、Rollup 等打包工具或支持 ES6 Modules 的浏览器。
3. CommonJS（Node.js 环境）
通过 module.exports 和 require：
（1）公共文件 common.js：
// common.jsmodule.exports = {sharedVar: "Hello",sharedFunc: () => console.log("Shared function")};
（2）其他文件中引用：
// file1.jsconst common = require('./common');common.sharedFunc();
4. AMD/RequireJS（旧浏览器兼容）
异步模块定义规范，适合旧项目：
（1）定义模块：
// common.jsdefine([], function() {return {sharedFunc: function() { console.log("AMD module"); }};});
（2）引用模块：
// file1.jsrequire(['./common'], function(common) {common.sharedFunc();});
5. UMD（通用模块定义）
兼容 CommonJS、AMD 和全局变量的混合模式：
// common.js(function(root, factory) {if (typeof exports === 'object') {module.exports = factory(); // CommonJS} else if (typeof define === 'function' && define.amd) {define([], factory); // AMD} else {root.commonLib = factory(); // 全局变量}})(this, function() {return { sharedFunc: () => console.log("UMD module") };});
关键注意事项
- 作用域污染：避免在非模块化环境中直接定义全局变量（如
var x = 1;），推荐用命名空间封装。 - 依赖管理：大型项目建议使用 Webpack/Rollup/Parcel 等工具处理依赖和打包。
- 跨文件共享状态：如需共享可变状态，需谨慎设计（如单例模式）。
根据你的项目环境选择合适的方式即可！
内容由零声教学AI助手提供，问题来源于学员提问
