[toc]

Lecture04-模块 import - export（用 node 运行）

1、本节讲什么

学会把代码拆到多个文件互相引用：export 导出、import 导入，全程用 node 跑 .js 文件验证。类比你已经会的 Java：一个文件相当于一个类，import 相当于引入别的类。

2、概念速览

什么是模块：一个文件只干一件事，用 export 把"要给别人用的东西"交出去，用 import 把"别人给的东西"接进来。类比 Java 的一个类 + import 别的类。

好处：代码拆开好维护、避免命名冲突、方便复用。

正确 vs 误区：模块不是"把代码分几个文件"这么简单，核心是"明确谁导出、谁导入"——别把不该导出的东西泄露出去。

3、先看效果

一个文件把东西"导出"，另一个文件"导入"并打印，node 直接能跑（Vite 项目默认就是 ESM 模块）。这一节一共建 6 个文件，按 3 组走完，先建导出文件、再建导入文件、node 跑导入文件。

4、照着做（6 个文件，按 3 组）

① 分散导出 / 分散导入（含 as 别名）

建 export-scattered.js（export 直接标注在声明前面）：

// 声明一些资源，其中有些导出，有些不导出（不导出就仅限于当前文件内使用）
let age = 10;
const PI = 3.14;
function showInfo() {
    console.log("info good");
}

export let atguiguInfo = "尚硅谷北京校区成立于2013年3月";
export const BIG_VALUE = 123456789;
export function printInfo() {
    return "Hello 尚硅谷~~~";
}

再建 import-scattered.js，node import-scattered.js：

// 使用 as 关键词可以给导入的资源起别名
import { atguiguInfo, BIG_VALUE as SPECIAL_BIG_VALUE, printInfo } from "./export-scattered.js";

console.log("导入的资源：" + atguiguInfo);
// console.log("导入的资源：" + BIG_VALUE); 起了别名之后，原来的名字就不能用了
console.log("导入的资源：" + SPECIAL_BIG_VALUE);

console.log("导入的资源：" + printInfo());

// 其它文件没有导出的资源，不能直接使用
// console.log(age);

两个要点：

• 没 export 的资源（age），别的文件用不了——所以那行注释掉了。
• as 起别名后，原名就不能用了（BIG_VALUE 那行也注释了）。

② 批量导出 / 批量导入

export 也可以放在文件末尾集中写。建 export-batch.js：

const GOOD = "GOOD";
const HAPPY = "HAPPY";
const INFO = "INFO";

// 把当前文件中需要导出的资源放在一起，集中做导出的操作
// 不管用什么方式导出的，导入时的语法都一样，没有区别
export {
    GOOD,
    HAPPY,
    INFO
}

建 import-batch.js，node import-batch.js：

import { GOOD, HAPPY, INFO } from "./export-batch.js";

console.log("导入的资源：" + GOOD);
console.log("导入的资源：" + HAPPY);
console.log("导入的资源：" + INFO);

要点：分散导出和批量导出，导入时语法一模一样——所以混用也行，导入方不用关心对方怎么导出的。

③ 默认导出 / 默认导入

每个文件有一个"默认导出"名额，导入时名字随便起。建 export-default.js：

// 每个 JavaScript 文件都有一个名额，可以把一个资源（变量、常量、函数……）默认导出
// 默认导出的资源会失去自己的名字，在导入时另外再起一个名字
// 好处：导入时不需要知道它以前叫什么名字，不必看框架源码，临时起一个名字使用即可
const BIG_HELLO = "VERY BIG HELLO";

// 使用 default 关键词实现默认导出
export default BIG_HELLO;

建 import-default.js，node import-default.js：

// 默认导入的资源名称不放在大括号中
import BIG_HELLO from "./export-default.js";

console.log("导入的资源：" + BIG_HELLO);

要点：默认导入不加大括号、名字随便起——好处是导入第三方库时不必看它原名（vue、axios 这类框架往往就是默认导出）。

5、常见疑问

• Q：import 后面带不带 {} 有什么区别？ A：带 {} 是命名导入（对方 export 什么就导什么，名字要一致或 as 改名）；不带 {} 是默认导入（对方 export default）。多数第三方库用默认导入，自己写的工具函数用命名导出。
• Q：as 是什么？ A：给导入的资源起别名。起了别名后，原名就不能用了。
• Q：一个文件能不能又默认导出又命名导出？ A：能。但默认导出只有一个名额。第三方框架一般以默认导出为主。

6、规范要点

• 自己写的工具函数统一命名导出 + 驼峰，别混用。
• 一个文件只放一个职责：类型放 types.ts、工具函数放 utils.ts、组件放各自文件，具体做法就是使用 import/export 机制，把特定代码放在一起。
• 导入别家库多用默认导入，导入自己的工具用命名导入。

7、本节验证

• 会用 export / import 把代码拆到多个文件互相引用，node 能跑通 ✅
• 会写分散导出（export let/const/function）和批量导出（末尾 export { ... }）✅
• 知道导入时可用 as 起别名，起别名后原名不能再用 ✅
• 会写 export default，并在导入时任意命名 ✅
• 分得清带 {} 的命名导入和不带 {} 的默认导入 ✅