ES6模块化开发：export default与具名export详解

1. 模块化开发的核心价值

前端开发从最初的脚本堆砌到如今的工程化体系，模块化是其中最关键的技术演进之一。想象一下，如果所有JavaScript代码都写在同一个文件里，随着项目规模扩大，这个文件会变成难以维护的"意大利面条式代码"。模块化就像把图书馆的藏书分类整理到不同书架，既避免了命名冲突，又提高了代码复用率。

在ES6标准之前，社区已经出现了多种模块化方案：

• CommonJS（Node.js默认规范）
• AMD（RequireJS为代表）
• UMD（通用模块定义）

但这些方案都需要依赖第三方库实现。ES6模块化(ES Modules)的诞生，终于让JavaScript在语言层面拥有了原生模块系统。现在所有现代浏览器和Node.js都已支持ES Modules，这成为我们日常开发的首选方案。

2. export default 详解

2.1 基本语法与特点

javascript复制// moduleA.js
const message = 'Hello World'
export default message

// 等效写法
export default 'Hello World' 

export default 是模块的默认导出，每个模块只能有一个默认导出。它的特点包括：

1. 导入时可以自定义名称

   javascript复制import customName from './moduleA.js'
   console.log(customName) // 'Hello World'
   

2. 导出内容可以是任意类型（变量、函数、类、对象等）
3. 通常用于导出模块的主要功能

2.2 实际应用场景

1. 单功能模块：当模块主要提供一个核心功能时

   javascript复制// logger.js
   export default function log(message) {
     console.log(`[${new Date().toISOString()}] ${message}`)
   }
   

2. 类定义：导出整个类定义时

   javascript复制// User.js
   export default class User {
     constructor(name) {
       this.name = name
     }
   }
   

3. 配置对象：导出默认配置时

   javascript复制// config.js
   export default {
     apiUrl: 'https://api.example.com',
     timeout: 5000
   }
   

注意：虽然技术上可以在一个模块中同时使用默认导出和具名导出，但这会造成使用时的混乱，建议一个模块只选择一种导出方式。

3. 具名export深度解析

3.1 基本语法形式

javascript复制// mathUtils.js
export const PI = 3.14159

export function sum(a, b) {
  retur