面试题：JavaScript ES6模块中如何优化导出和导入操作

Question

请举例说明在JavaScript ES6模块中，如何通过具名导出、默认导出以及不同的导入方式来优化代码结构与可读性。例如，在一个项目中有多个功能模块，每个模块有不同的函数和变量需要导出供其他模块使用，阐述如何合理地组织这些导出和导入操作。

Answer 1

具名导出

1. 定义模块（例如 mathUtils.js）：

// 具名导出函数
export function add(a, b) {
    return a + b;
}

// 具名导出变量
export const PI = 3.14159;

2. 导入模块：

// 完整导入具名导出的内容
import { add, PI } from './mathUtils.js';
console.log(add(2, 3));
console.log(PI);

// 导入时重命名
import { add as sum, PI as piValue } from './mathUtils.js';
console.log(sum(4, 5));
console.log(piValue);

默认导出

1. 定义模块（例如 user.js）：

// 默认导出一个对象
const user = {
    name: 'John Doe',
    age: 30
};
export default user;

2. 导入模块：

// 导入默认导出
import myUser from './user.js';
console.log(myUser.name);
console.log(myUser.age);

混合导出与导入

1. 定义模块（例如 utils.js）：

// 具名导出
export function multiply(a, b) {
    return a * b;
}

// 默认导出
const message = 'This is a utility module';
export default message;

2. 导入模块：

// 导入默认导出和具名导出
import defaultMessage, { multiply } from './utils.js';
console.log(defaultMessage);
console.log(multiply(2, 4));

优化代码结构与可读性

• 具名导出：适用于模块有多个相关功能或数据需要导出的场景，通过具名清晰地表明导出的内容，导入时也能按需导入，增强代码的可维护性和可理解性。
• 默认导出：适合模块主要导出单个实体（如一个类、一个函数、一个对象等）的场景，导入时简洁明了，不需要花精力去记忆具名。
• 混合使用：在复杂模块中，可结合具名导出和默认导出，将核心内容默认导出，辅助功能具名导出，使模块的接口清晰且易于使用。这样在大型项目中，不同模块之间的依赖关系更易管理，代码结构更清晰，提升整体的可读性。