模块 4.1

现代前端第一步——模块化

前端基础，是怎么慢慢变成"现代前端"的

零到全栈 · 李勃老师 · 2026

WHERE WE ARE

模块 3，你已经完成了三件事

3.1 / 3.2

会写一个网页

HTML / CSS / JS 拆成三个文件，互相引用。

3.3 / 3.4

会管理代码

本地用 Git 提交，远程推到 GitHub。

3.5

会发布上线

Nginx 指向项目，公网 IP 谁都能访问。

你已经做出一个能上线的真实网站了——只是还很简单，就一张卡片。今天，咱们把它做大。

THE GOAL

这一节，网站要长成这样

两个页面 · 个人主页 + 文字实验室

全站导航 · 每页顶上都有，能切换

卡片飞入 · 进页面，卡片带弹性滑上来

数字动画 · 点"开始分析"，分数动一下

实现不难，AI 分分钟搞定——无非是 HTML 从一个变两个、多几个 css / js 文件。文件组织的方式，还是 3.2 那一套。

GET THE CODE

动手之前，先把示例代码拉到本地

# 克隆配套 demo 仓库
git clone https://github.com/joylibo/zero-to-tech-demos.git
cd zero-to-tech-demos/zero-to-tech-4-1

只想先看看长啥样？也可以直接在 GitHub 上在线浏览：github.com/joylibo/zero-to-tech-demos

THE STARTING POINT

打开 zero-to-tech-4-1，看看它的结构

zero-to-tech-4-1/
├── index.html      # 个人主页
├── text-lab.html   # 文字实验室
├── css/             # 8 个 css 文件
└── js/
    ├── cards.js     # 卡片飞入动画
    ├── score.js     # 开始分析的分数动画
    └── nav.js       # 导航高亮

8 个 css、3 个 js——全是 3.2 教过的 <link> 和 <script src> 引进去，一个新概念都没有。

ONE NEW THING · CDN

只有一处新东西：CDN 引用

本地引用

住在你硬盘上的文件

CDN 引用

住在别人公开服务器上的文件

本质一样——都是把一个 js 文件引到页面上让浏览器加载。区别只是：它住在哪儿。

AN INVISIBLE DEPENDENCY

cards.js 偷偷"依赖"着 anime.js

anime.js 加载后

在 window 这张"公共储物台"上，挂一个 anime——整个页面随便哪儿都能拿来用。

cards.js 里

张嘴就用 anime.animate——可它没有一行写明"我要用 anime"。

这条依赖，没写在任何代码里——它只藏在 HTML 里 <script> 的先后顺序里。我们叫它"暗依赖"。

DISASTER 1 · SCRIPT ORDER

把 anime.js 挪到 cards.js 后面，试试

<!-- 把前两行调换一下 -->
<script src="js/cards.js"></script>          # ← 跑的时候 anime 还没在
<script src="https://.../anime.iife.min.js"></script>

# F12 控制台 →
Uncaught ReferenceError: anime is not defined

一行 <script> 排错，整个动画报废。可"谁必须在谁前面"这条规矩，全凭人脑子记——文件一多就乱套。

DISASTER 2 · GLOBAL POLLUTION

全局污染——大家挤在一张公共台面上

屋里就俩人

张三往公共台面上放了一张"纸"，李四要用，直接拿——一切和谐。

人变多以后

赵六也放一张"纸"（纸巾），来得晚，把张三的顶掉了。李四再拿——欸，写不了字了。

window 就是那张公共台面。库一多，撞名就是早晚的事——后来的悄悄盖掉先来的，还没人通知你。这就是全局污染。

THE WAY OUT

这不是你水平不够
是这套老工具，到了它的天花板

全世界前端都撞过这堵墙。撞多了，长出一整套翻墙的办法，叫"工程化"——它的第一招，就是模块化。

TWO NEW WORDS

模块化只有两个新词：export 和 import

export（导出）

"我对外开放这个"

没标 export 的，外面谁也拿不到。

import（导入）

"我要用别人的这个"

不写 import，你就用不上。

共享不再靠"全堆在公共空间"，而是靠在代码里白纸黑字声明清楚。你不用学语法，懂这个意思就够了。

FYI · WHAT IS "ES"

顺手认识一个词：ES

ES = ECMAScript，就是 JavaScript 的语法标准。你基本可以把它当 JS 看。

ES6 = ECMAScript 的第 6 版（2015 年）。import / export 就是这一版引进来的。

ES 模块（ES Modules）= 用 import / export 组织起来的 js。

名字不用深究——以后看到 "ES"、"ES6"，知道它就是 JS 的语法标准，就行了。

FIVE STEPS

改造分五步——跟着贴代码就行

cards.js

import / export

动画拆进模块

→

score.js

import / export

顺手升级动画

→

nav.js

+ export

逻辑一字不动

→

main.js (新)

总入口

串起三个模块

→

HTML

4 行 → 1 行

type="module"

你不用自己写——每一步的代码我都给你，粘进去就行。

HTML · BEFORE / AFTER

HTML 底部那一摞 <script>，收成一行

改造前

<script src="...anime.iife.min.js"></script>
<script src="js/cards.js"></script>
<script src="js/score.js"></script>
<script src="js/nav.js"></script>

改造后

<script type="module"
  src="js/main.js"></script>

就这一行——顺序坑没了，全局污染也没了。

A NEW RULE

改完先别急着双击刷新——会白屏

ES 模块这种文件，必须通过"服务器"提供出来才能加载——浏览器不让你直接 file:// 双击打开。

背后是安全考虑：模块能 import 别的文件、还能从网上拉库。本地双击若也放行，那就是个大漏洞。

解药你早就有了——模块 3.5 那台 Nginx。push → 服务器 pull → 刷新，照样能看。

从此，"双击 index.html 打开"对模块化代码不好使了——得走服务器。

HISTORY

模块化这条路，走了整整 20 年

1995

JavaScript 诞生
没有模块系统

→ 14 年

2009

Node.js · CommonJS
社区方案，非官方

→ 6 年

2015

ES6：import/export
官方标准落地

→ 2 年

2017

浏览器原生支持
<script type="module">

你今天写的那行 import，真正能用还不到十年——这就是为啥"现代前端"叫"现代"，它真的很年轻。

模块化，是工程化的第一块基石
下一节，让它真正变成一个工程

Vite、npm、node_modules、package.json——4.2 见。

零到全栈 · 模块 4.1 完