JS 中导入变量的方法

在 JavaScript 编程中，有效地导入变量是构建模块化和可维护代码的关键。以下将详细介绍几种常见的导入变量方法。

一、ES6 模块导入

ES6 引入了模块系统，极大地提升了代码的组织性。通过 import 关键字可以从其他模块中导入变量。

（一）具名导入

如果一个模块导出多个变量，使用具名导入。例如，有一个 mathUtils.js 文件：

// mathUtils.js
export const PI = 3.14159;
export function add(a, b) {
    return a + b;
}

在另一个文件中导入这些变量：

// main.js
import { PI, add } from './mathUtils.js';
console.log(PI);
console.log(add(2, 3));

（二）默认导入

当模块只导出一个主要变量或函数时，适合使用默认导入。例如 message.js：

// message.js
const greeting = 'Hello, world!';
export default greeting;

在其他文件导入：

// main.js
import message from './message.js';
console.log(message);

二、CommonJS 模块导入

在服务器端 Node.js 环境中，CommonJS 模块系统广泛应用。使用 require 函数导入变量。

假设有一个 data.js 文件：

// data.js
const user = { name: 'John', age: 30 };
module.exports = user;

在另一个文件中导入：

// main.js
const user = require('./data.js');
console.log(user.name);

三、AMD 模块导入（Asynchronous Module Definition）

AMD 主要用于浏览器端异步加载模块，RequireJS 是常用的 AMD 实现库。

首先定义一个模块 myModule.js：

// myModule.js
define([], function () {
    const value = 42;
    return value;
});

然后在页面中引入 RequireJS，并在入口脚本中导入模块：

<script data-main="main.js" src="require.js"></script>

// main.js
require(['myModule'], function (moduleValue) {
    console.log(moduleValue);
});

不同的导入方法适用于不同的场景，开发者需根据项目环境、需求以及代码结构来选择合适的导入方式，以实现高效、可维护的 JavaScript 代码编写。