JavaScript进阶教程 - 模块导入导出

在现代JavaScript开发中，模块是一种将代码分解成可重用部分的强大工具。ES6引入了官方的模块导入（import）和导出（export）语法，允许开发者在不同的文件之间共享代码。

导出（Export）

有两种主要的导出方式：命名导出（Named Exports）和默认导出（Default Exports）。

命名导出

命名导出允许你导出多个值。每个值都有其对应的名称。

// file: mathFunctions.js

// 命名导出函数
export function sum(x, y) {
    return x + y;
}

// 命名导出常量
export const pi = 3.14159;

默认导出

默认导出允许你导出一个值作为模块的默认导出。每个模块只能有一个默认导出。

// file: MyComponent.js

export default class MyComponent {
    // 类定义
}

导入（Import）

根据导出的类型（命名或默认），导入语法也有所不同。

导入命名导出

// 导入单个命名导出
import { sum } from './mathFunctions.js';

// 导入多个命名导出
import { sum, pi } from './mathFunctions.js';

// 使用别名导入
import { sum as add } from './mathFunctions.js';

导入默认导出

import MyComponent from './MyComponent.js';

导入所有命名导出

这种方式将所有命名导出作为一个对象导入。

import * as math from './mathFunctions.js';

console.log(math.sum(1, 2)); // 使用导入的对象调用函数
console.log(math.pi);

混合使用导入和导出

你可以在一个模块中同时使用默认导出和命名导出。在导入时，你需要结合使用对应的导入语法。

// file: utility.js
export default function() { /* 默认导出的函数 */ }
export function utilityFunction() { /* 另一个函数 */ }

// 导入
import defaultFunction, { utilityFunction } from './utility.js';

注意事项

• 确保模块路径正确，如果是本地文件，通常路径以./或../开始。
• 使用模块时，浏览器环境需要服务器（即使是本地开发服务器）来正确处理模块请求，直接通过file://协议打开含有ES6模块的HTML文件通常不会工作。
• 一些现代JavaScript框架（如React、Vue和Angular）和工具（如Webpack、Rollup和Parcel）提供了高级的模块处理功能，支持模块的热替换、代码拆分等特性。

模块导入和导出为JavaScript代码的组织提供了极大的灵活性，有助于构建易于维护和扩展的大型应用程序。