module 、export 、import分别有什么作用

在 JavaScript 中，module、export 和 import 是 ES6 模块系统 的核心关键字，用于实现代码的模块化组织和管理。以下是它们的详细作用：

---

一、module 的作用

module（模块）是一个独立的 JavaScript 文件，具有独立作用域 ，通过 export 和 import 与其他模块交互。

• 特点 ：
  • 每个文件默认是一个模块。
  • 模块内部的变量、函数、类等默认是私有的（除非显式导出）。
  • 模块通过 import 和 export 实现依赖管理。

---

二、export 的作用

export 用于将模块内部的变量、函数、类等导出，供其他模块使用。

1. 导出方式

• 命名导出（Named Export）：导出多个具名值。

  // math.js
  export const PI = 3.14159;              // 导出常量
  export function add(a, b) { return a + b; } // 导出函数
  export class Calculator { /* ... */ }   // 导出类

• 默认导出（Default Export）：一个模块只能有一个默认导出。

  // logger.js
  const log = (message) => console.log(message);
  export default log; // 默认导出

2. 导出规则

• 命名导出需在导入时使用相同名称，默认导出可任意命名。
• 导出可以是变量、函数、类，甚至是字面量。

---

三、import 的作用

import 用于从其他模块导入已导出的内容，分为命名导入和默认导入。

1. 导入方式

• 命名导入：导入指定的具名导出。

  // app.js
  import { PI, add } from './math.js'; // 导入多个命名导出
  console.log(PI); // 3.14159

• 默认导入：导入模块的默认导出。

  // app.js
  import logger from './logger.js'; // 导入默认导出（可自定义名称）
  logger("Hello World");

• 混合导入：同时导入默认导出和命名导出。

  // app.js
  import log, { LOG_LEVEL } from './logger.js'; 

• 整体导入：导入所有命名导出为一个对象。

  // app.js
  import * as math from './math.js';
  console.log(math.PI); // 3.14159

2. 导入规则

• 导入路径可以是相对路径（./、../）或绝对路径。
• 导入的变量是只读引用（不可直接修改导出值）。

---

四、核心对比

关键字	作用	示例
module	定义一个独立作用域的代码单元	每个 .js 文件默认是一个模块
export	导出模块内容供外部使用	export const name = 'John';
import	引入其他模块的导出内容	import { name } from './module.js';

---

五、关键细节

1. 默认导出 vs 命名导出

• 默认导出：适合模块主要功能的单一导出（如工具类、配置对象）。
• 命名导出：适合导出多个相关功能（如工具函数集合）。

2. 动态导入（Dynamic Import）

使用 import() 函数实现按需加载模块（返回 Promise）：

// 动态加载模块（如路由懒加载）
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

3. 模块的静态分析

• ES6 模块是静态的（导入/导出必须在顶层作用域，不可动态生成路径）。
• 静态特性便于打包工具（如 Webpack、Rollup）进行 Tree Shaking（删除未使用代码）。

---

六、示例：完整模块交互

模块定义（userModule.js）：

// 命名导出
export const MAX_AGE = 100;
export function getUserName() { return 'John'; }

// 默认导出
export default class User {
  constructor(name) { this.name = name; }
}

模块导入（app.js）：

import User, { MAX_AGE, getUserName } from './userModule.js';

const user = new User('Alice');
console.log(MAX_AGE);       // 100
console.log(getUserName()); // 'John'

---

七、注意事项

1. 浏览器中使用 ES6 模块 ：需在 <script> 标签添加 type="module"：

   <script type="module" src="app.js"></script>

2. Node.js 中使用 ES6 模块 ：需将文件后缀改为 .mjs 或在 package.json 中设置 "type": "module"。

3. 避免循环依赖：模块 A 依赖模块 B，模块 B 又依赖模块 A 可能导致错误。

---

总结

• module：代码组织的基本单元，提供独立作用域。
• export：暴露模块功能，支持命名导出和默认导出。
• import ：引入其他模块的功能，支持按需加载和静态优化。
  三者结合，实现代码的高效模块化管理和复用。