ES Module 的奇妙世界：从导出到导入的终极指南

2023-11-09 10:11:27

模块的曙光：ES Module 的诞生

在 JavaScript 开发的早期，我们不得不依赖于全局作用域污染和复杂的模块系统来管理代码。ES Module 的出现犹如一道曙光，为 JavaScript 带来了一场革命性的变革，它引入了一种更加模块化、可复用和可维护的代码组织方式。

导出：模块的对外窗口

就像一座建筑物的大门，导出（export）允许我们从一个模块中选择特定的值或对象，以便在其他模块中使用。使用 export ，我们可以控制模块的对外接口，只暴露需要共享的部分。

导出声明的语法

export { 成员1, 成员2, ... 成员n };
export default 默认值;

具名导出： 将指定的成员导出到其他模块。
默认导出： 导出一个默认值，可以在导入时使用。

导入：模块的对外依赖

导入（import）就好比一条通往其他模块的桥梁，它允许我们访问和使用导出值。通过 import 关键字，我们可以将外部模块的成员引入当前模块。

导入声明的语法

import { 成员1, 成员2, ... 成员n } from "模块路径";
import 默认名称 from "模块路径";

具名导入： 导入指定的成员。
默认导入： 导入模块的默认导出值。

export default 与 import 的巧妙组合

export default 和 import 搭配使用时，提供了一种简单而优雅的方式来导出和导入模块的默认值。

// 模块A
export default function myFunction() { ... }

// 模块B
import myFunction from "模块A";

实际案例：一个计数器模块

为了更好地理解 ES Module 的工作原理，让我们构建一个简单的计数器模块。

导出计数器功能

// counter.js
export default function createCounter() {
  let count = 0;

  return {
    increment: () => count++,
    decrement: () => count--,
    getCount: () => count,
  };
}

导入并使用计数器模块

// app.js
import counter from "./counter.js";

const myCounter = counter();
myCounter.increment();
myCounter.increment();
console.log(myCounter.getCount()); // 输出: 2