External Brain

ES6 Modules

3 min read

导出（export） 与 导入（import） 函数与常量。 模块是一个独立的 JavaScript 文件，

每个模块都有自己的作用域，不会污染全局变量。

通过模块化，可以：

  • 分离逻辑结构，代码更清晰
  • 重复利用函数
  • 避免变量命名冲突
  • 按需导入需要的内容
// 导出
export const name = "Yuwei";
export function sayHi(){ ... }
 
// 导入（必须用相同名字）
import { name, sayHi } from './file.js';

在浏览器中：HTML 中要写 

// ======================== module.js (模块文件) ========================
// 定义并导出一些常量和函数
 
// 使用 "export" 导出常量 PI
// export 表示该变量或函数可以被其他文件导入使用
export const PI = 3.142;
 
// 导出一个函数，用于计算圆的周长
export function getCircumference(radius){
    // 圆周长公式：C = 2πr
    return 2 * PI * radius;
}
// 导出一个函数，用于计算圆的面积
export function getArea(radius){
    // 圆面积公式：A = πr²
    return PI * radius * radius;
}
// 导出一个函数，用于计算球的表面积（或体积公式的错误示范 😅）
export function getVolume(radius){
    // 这里只是简单演示，没有乘以 π 或 4/3
    // 正确球体积公式应为：(4/3) * π * r³
    return 4 * radius * radius;
}
// ======================== main.js (主文件) ========================
// 从另一个模块文件中导入我们需要的常量与函数
 
// 从 './module.js' 文件中导入指定的导出成员
// ✅ 注意：路径必须加上相对路径（如 './module.js'）
// ❌ 你写的 './' 会报错，因为系统找不到默认文件
import { PI, getCircumference, getArea, getVolume } from './module.js';
 
// 打印导入的常量
console.log(PI); // 输出: 3.142
 
// 调用导入的函数
const circumference = getCircumference(10);
const area = getArea(10);
const volume = getVolume(10);
 
// 输出结果
console.log(`Circumference: ${circumference}`); // 62.84
console.log(`Area: ${area}`);                   // 314.2
console.log(`Volume: ${volume}`);               // 400 (此公式仅示例)

Graph View

Backlinks