JS模块导出模式_Export Default技巧

export default 是 JavaScript 模块的默认导出机制，每个模块只能有一个，默认导入时无需大括号且可自定义名称；它支持函数、类、对象、基本类型等导出形式，常用于主功能或主类的暴露，可与命名导出共存，动态导入时需通过 .default 访问。

在JavaScript中，export default 是一种常用的模块导出方式，它允许你为模块指定一个默认导出值。这样其他文件在导入时可以使用任意名称引用该值，提高了灵活性和可读性。掌握 export default 的使用技巧，有助于写出更清晰、易维护的代码。

什么是 export default？

每个模块可以有一个默认导出。与命名导出（named exports）不同，export default 只能存在一个，并且在导入时不需要用大括号。

例如：

// math.js
export default function add(a, b) {
  return a + b;
}
// main.js
import myAdd from './math.js';
console.log(myAdd(2, 3)); // 输出 5

这里导入时使用的 myAdd 是自定义名称，完全合法，因为默认导出不要求名称一致。

支持的默认导出类型

你可以用 export default 导出多种类型的值，包括函数、类、对象、基本类型等。

• 导出函数：适合工具函数或主要逻辑入口
• 导出类：常用于组件或封装对象
• 导出对象字面量：适合配置或常量集合
• 导出基本值：如字符串、数字，适用于主题、版本号等

示例：导出类

// Button.js
export default class Button {
  constructor(text) {
    this.text = text;
  }
  render() {
    return `${this.text}`;
  }
}
// 使用
import Button from './Button.js';
const btn = new Button("点击我");

结合命名导出使用

你可以同时使用默认导出和命名导出，但要避免混淆。

示例：

// utils.js
export default function log(msg) {
  console.log('Log:', msg);
}
export const PI = 3.14159;
export function square(x) {
return x * x;
}
// 使用
import log, { PI, square } from './utils.js';
log('启动');        // 默认导入
console.log(PI);    // 命名导入
console.log(square(4));

注意：默认导入写在前面，命名导入用大括号包裹。

动态导入和默认导出的配合

在需要按需加载的场景中，export default 配合 import() 更加直观。

async function loadComponent() {
  const Calculator = await import('./Calculator.js');
  return Calculator.default; // 注意访问 .default
}

由于默认导出被包装在模块对象的 default 属性中，动态导入后需显式取值。

基本上就这些。合理使用 export default 能让模块接口更简洁，尤其适合作为主功能或主类的导出方式。只要注意别滥用，保持模块职责单一，就能发挥它的优势。