js中引用.js文件变量的方法

在JavaScript开发中，经常会遇到需要在一个.js文件中引用另一个.js文件中定义的变量的情况。下面将介绍几种常见且有效的方法。

方法一：将变量挂载到全局对象window上

在JavaScript中，全局对象是window（在浏览器环境中）。可以将需要共享的变量挂载到window对象上，这样在其他.js文件中就可以通过window对象来访问这些变量。

例如，在file1.js中定义一个变量并挂载到window上：

// file1.js
var myVariable = 'Hello World';
window.sharedVariable = myVariable;

然后在file2.js中就可以这样引用：

// file2.js
console.log(window.sharedVariable); 

方法二：使用模块模式（适用于现代JavaScript开发）

在ES6中，引入了模块的概念。通过export关键字导出变量，在其他文件中使用import关键字导入变量。

比如，在file1.js中：

// file1.js
export const myVariable = 'Hello World';

在file2.js中：

// file2.js
import { myVariable } from './file1.js';
console.log(myVariable);

方法三：使用AMD（Asynchronous Module Definition）规范

AMD规范常用于浏览器端的JavaScript模块加载。它使用define函数来定义模块，使用require函数来加载模块。

例如，使用RequireJS库： 在file1.js中：

// file1.js
define(function () {
    var myVariable = 'Hello World';
    return {
        myVariable: myVariable
    };
});

在file2.js中：

// file2.js
require(['file1'], function (file1) {
    console.log(file1.myVariable);
});

不同的引用方法适用于不同的场景和开发环境。在实际开发中，根据项目的具体需求和技术栈选择合适的方法来引用.js文件中的变量，能够提高代码的可维护性和可扩展性。