ES6 模块化通过 export 和 import 实现暴露和导入功能

ES6 模块化通过 export 和 import 实现暴露和导入功能，让代码可复用且结构清晰，以下是核心用法

一、暴露方式（export

1. 命名导出（Named Export

在模块中给需要暴露的变量、函数、对象等添加  export  关键字，可暴露多个成员

// 示例：math.js

export const pi = 3.14;

export function add(a, b) { return a + b; }

export class Calculator { /* 类定义 */ }

导入时需指定对应名称

import { pi, add } from './math.js';

console.log(pi, add(1, 2)); // 3.14 3

2. 默认导出（Default Export

一个模块只能有一个默认导出，适合暴露单个主要对象（如组件、函数），导入时可自定义名称

// 示例：user.js

const user = { name: '张三', age: 20 };

export default user; // 默认导出对象

导入时无需大括号，直接赋值：

import myUser from './user.js'; // myUser 为自定义名称

console.log(myUser.name); // 张三

3. 导出语句统一声明

也可在模块末尾集中导出：

// 示例：utils.js

const base = 10;

function multiply(a, b) { return a * b; }

export { base, multiply }; // 统一导出命名成员

 

二、导入方式（import）

1. 按需导入命名成员

用  {}  导入指定名称：

import { base, multiply } from './utils.js';

console.log(multiply(base, 5)); // 50

2. 导入默认成员

直接导入默认导出的内容：

import person from './person.js'; // person 是默认导出的对象

3. 重命名导入（as）

避免名称冲突时可重命名：

import { multiply as multiplyNum } from './utils.js'; // multiply 重命名为 multiplyNum

4. 整体导入（ as）*

将模块所有命名导出作为对象导入：

import * as MathModule from './math.js'; // MathModule 包含 pi 和 add 等成员

console.log(MathModule.pi, MathModule.add(1, 3)); // 3.14 4