前端开发入门：从静态网页到现代工程化 (Interactive Intro)
💡 学习指南：本章节无需编程基础，通过交互式演示带你回顾前端开发的 20 年变迁。我们将从最基础的 HTML 讲起，一直到现代的 Vue/React 组件化开发。
先把几个最常见的新名词说清楚（后面会反复出现）：
- HTML：网页的“骨架”，负责内容和结构（标题、段落、图片、按钮）。
- CSS：网页的“皮肤”，负责样式（颜色、大小、布局、动画）。
- JavaScript：网页的“肌肉”，负责交互与逻辑（点击、输入、请求数据）。
- 框架（Framework）：一套成熟的开发方式和工具，让你更高效地做复杂页面（比如 Vue/React）。
I. The Static Era
Web pages were just digital documents. The server sent HTML, and the browser rendered it. Want new content? Refresh the whole page.
<html>
<body>
<h1>Hello World</h1>
<p>Static content served by server.</p>
</body>
</html>0. 引言：网页为什么越来越难做？
最早的网页，只是电子海报。 现在的网页，是桌面级应用 (如 VS Code, Figma)。
为了支撑这种转变，前端技术经历了一场从 "手工作坊" 到 "工业化生产" 的革命。
核心变化只有一点：页面越来越复杂，我们需要更高效的“组织方式”和“开发方式”。
0.1 前端 vs 大前端（你到底在学什么？）
很多人说“我学前端”，但不同公司口径不一样。
- 前端（Web Frontend）：主要指“在浏览器里跑的那部分”。典型产物是网站和 H5 页面。
- 大前端（Big Frontend）：泛指“所有用户界面相关的开发”。不只 Web，还包括小程序、App、桌面应用等。
这里的几个新词（后面也会用到）：
- 端：平台/运行环境的意思，比如 Web 端、移动端、桌面端。
- H5：手机网页（本质也是 Web），通常用来做活动页/落地页，传播快、迭代快。
- WebView：App 里用来显示网页的“内置浏览器控件”。很多 App 的部分页面其实就是 WebView。
- 跨端：用一套代码同时做多个端（比如同时做 iOS + Android）。
- 原生：直接用平台官方语言/能力开发（iOS 的 Swift、Android 的 Kotlin）。
关键点：大前端不是一个“新岗位名字”，而是一种范围：把体验交付到更多平台。
1. 第一阶段：静态网页与切图 (2000s-)
早期网页开发像做报纸：设计师把 UI 设计切成很多小图，前端把这些图片拼成页面。 这就叫切图。
这里的几个新词：
- 静态网页：页面内容基本固定，打开就是一份 HTML 文件（不像现在很多页面是“数据驱动、可交互”的）。
- UI：User Interface，用户界面。也就是你看到的按钮、颜色、布局。
1.1 为什么会慢？
网页上的每一张小图，浏览器都要发一次网络请求。 请求越多，加载越慢。
补充一个常见技巧：雪碧图 (Sprite)。 把很多小图合成一张大图，这样请求数会变少（但制作和维护更麻烦）。
关键点：早期网页慢，常见原因之一是“请求太多”。（图片、脚本、样式都会产生请求）
2. 第二阶段：移动端普及与响应式布局 (2010s)
手机和平板开始流行以后，网页必须适配不同屏幕。 这就需要响应式布局：同一套 HTML/CSS，自动根据屏幕宽度变换布局。
这里用到了媒体查询 (Media Query)： 它是 CSS 里的“条件判断”，比如“如果屏幕小于 640px，就用 1 列布局”。
关键点：响应式让网页“会变形”，不再只适配电脑。
3. 第三阶段：从操作 DOM 到数据驱动 (jQuery -> Vue/React)
网页开始像 App 一样复杂之后，最麻烦的事变成了：同一份数据变化，要改很多地方。
举个最常见的例子：购物车数量从 1 变成 2。
- 右上角小红点要变
- 购物车页面的数量要变
- 结算按钮的价格要变
下面这个可视化演示，专门用来解释：什么是 jQuery（以及它为什么会累）。
3.1 jQuery 的思路：我来“亲手改页面”
在 jQuery 时代（2005+），你通常会写很多“命令”去改页面： “找到某个元素，把文字改掉；找到某个按钮，把它禁用……”
它的问题不是“写不出来”，而是：只要漏改一个地方，页面就会出现前后不一致的 bug。 页面越大，这种 bug 越多。
这里用到的新词（先解释清楚）：
- jQuery：早期非常流行的 JavaScript 工具库，特点是“很方便地找元素、改元素”。
- DOM：浏览器里保存页面结构的一棵“树”（按钮、文字、图片都在这棵树上）。
- ID：HTML 元素的唯一名字（类似“身份证号”），方便你定位某一个元素。
- div：HTML 里最常用的“盒子”标签，用来做布局和容器。
3.2 Vue/React 的思路：我只改“数据”，页面自己变
后来大家意识到：与其到处改页面，不如只维护一份状态 (State)。 状态变了，页面自动刷新到正确的样子。
这就是“数据驱动 UI”的核心：
- State（状态）：页面的“数据”，比如购物车数量、登录状态、输入框内容。
- 数据驱动：你只改 State，不直接改 DOM；框架负责把界面同步到正确状态。
- Vue/React：现代前端框架，主要解决“状态变化 -> 界面自动更新”。
3.3 什么是“命令式”和“声明式”？
这就好比你要画一幅画：
- 命令式：你告诉画家“拿起笔，蘸红颜料，在坐标(10,10)画一个圈”。
- 声明式：你直接给画家一张照片，“给我画成这样”。
3.4 交互演示：两种写法的区别
下方的演示展示了两种思维的巨大差异。
- 左边 (jQuery)：你需要手动关注每一步 DOM 操作。忘了更新 DOM？界面就不对了。
- 右边 (Vue)：你只管修改数据
count，界面自动变。
// 手动操作 DOM
$('#count').text(val);
if (val > 5) $('#msg').show(); // 只需要绑定数据
{{ count }}
<div v-if="count > 5">...</div> 关键点：从 jQuery 到 Vue/React，变化的核心不是“语法”，而是思维方式：从“我去改页面”变成“我只改数据”。
3.5 Vue 和 React 怎么选？先把差异理解清楚
很多初学者会纠结：“我到底学 Vue 还是 React？” 先别急着站队。你先把它们的“共同点”和“差异点”理解清楚，就不会被带节奏了。
共同点（它们都在解决同一件事）：
- 都是为了解决：页面复杂时，如何可靠地管理状态、更新界面
- 都强调：组件化（把页面拆成积木）
差异点（你会在写代码时真实感受到）：
- 写 UI 的方式：Vue 常用 Template；React 常用 JSX
- 状态变化时怎么更新：Vue 更偏“依赖追踪”；React 更偏“重新渲染组件函数”
这里的几个新词（像课件一样解释清楚）：
- Template：Vue 常见写法，用类似 HTML 的语法来写界面。
- JSX：React 常见写法，用“像写 JS 一样”的方式写界面结构。
- Hook：React 的一套函数式能力（比如
useState），用来保存状态、处理副作用。 - SFC：Single File Component，Vue 常见的单文件组件（一个
.vue文件里写模板/逻辑/样式）。
<template>
<button @click="count++">+1</button>
<div>count: {{ count }}</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(1)
</script>function App() {
const [count, setCount] = useState(1)
return (
<>
<button onClick={() => setCount(count + 1)}>+1</button>
<div>count: {count}</div>
</>
)
}关键点：别死记名词。你只要记住一句话：它们都能做同样的产品，只是“写法和心智模型”不一样。
4. 第四阶段：组件化（像搭积木一样写页面）
解决了“怎么更新页面”的问题，接下来是“怎么组织代码”。 以前一个页面可能是一个超大的 HTML 文件，改一个按钮可能牵连全局。
4.1 “积木”是什么？
现代前端把页面拆成了组件。 一个按钮、一个导航栏、一个商品卡片，都是独立的积木。
4.2 为什么组件能复用？
定义好一个"商品卡片"组件后，你可以由它生成 100 个实例。每个实例都有自己独立的状态（比如点赞状态），互不干扰。
Notice how each one works independently!
新名词解释：
- 组件 (Component)：页面里的“积木块”，可以单独复用。
- 封装：组件内部的状态不影响别人。
- 复用：同一个组件可以用很多次。
关键点：组件化让页面像搭积木一样搭出来。
5. 第五阶段：页面切换体验（MPA vs SPA）
用户不再想要“每点一次就刷新整页”的体验。 于是出现了单页应用 (SPA)：整个网站只加载一次，之后只是切换内容。
与之对应的是多页应用 (MPA)：每点一次都会重新加载整个页面。
这里的一个新词：路由 (Routing)。 简单理解：就是“从 A 页面切到 B 页面”的规则和过程。
再补两个新词（非常重要）：
- 前端路由：页面切换主要由浏览器里的 JavaScript 控制（常见于 SPA）。
- 后端路由：页面切换主要由服务器决定“返回哪个页面”（常见于 MPA）。
5.1 MPA 是什么？（多页应用）
MPA 的直觉很像“翻书”：
- 点“商品页” -> 浏览器向服务器要一个新的页面（新的 HTML）
- 旧页面被替换掉 -> 原来的输入、滚动位置、临时数据往往会消失
优点（为什么很多网站仍在用）：
- 结构简单：服务器负责“出页面”，浏览器负责“展示”
- SEO 友好：搜索引擎更容易直接看到页面内容
- 首屏容易快：因为服务器直接给了 HTML
缺点：
- 体验偏“跳”：整页刷新会白一下、加载一下
- 复杂交互会变难：页面之间共享状态不方便
5.2 SPA 是什么？（单页应用）
SPA 更像“同一本书里换章节”：
- 第一次打开：加载一个“外壳页面”（HTML + CSS + JS）
- 之后切换页面：通常只换内容区域，整页不刷新
优点：
- 体验丝滑：页面切换快
- 状态好管理：同一个页面里，数据更容易共享（登录态、购物车等）
缺点（也要知道）：
- 首次加载可能更慢：需要先下载一堆 JS
- SEO 要额外处理：通常需要 SSR/SSG 方案配合（后面第 7 阶段会讲）
5.3 交互演示：状态会不会丢？
下面这个小实验更直观：输入一段文字，然后切换页面再回来，看看有没有被清空。
关键点：从“整页刷新”到“局部更新”，带来的不仅是速度，更是“状态能不能保留”的体验差异。
6. 第六阶段：工程化（打包、依赖、规范）
前端项目越来越大，不能再靠手动引入脚本文件。 于是有了打包工具（Webpack/Vite）：把多个文件和依赖打成一个或多个“优化后的包”。
依赖就是你用到的第三方库，比如图表库、编辑器。
这里的几个新词：
- 工程化：用工具和规范把项目“像工程一样”管理（目录结构、构建、发布、代码规范等）。
- Bundle（包）：打包后的产物文件。
- Tree Shaking：把“没用到的代码”从包里摇掉，体积更小。
关键点：工程化让多人协作的大项目变得可控。
7. 第七阶段：渲染方式（CSR / SSR / SSG）
为了更快的首屏、更好的搜索排名，渲染方式也在进化。
- CSR：客户端渲染。浏览器拿到 JS 之后再画页面。
- SSR：服务端渲染。服务器先把 HTML 画好再发给浏览器。
- SSG：静态生成。提前把页面生成好，像静态文件一样直接发。
这里的几个新词：
- 首屏：用户打开网站时，最先看到的那一屏内容。
- SEO：Search Engine Optimization，搜索引擎优化。让页面更容易被搜索到。
- TTFB：Time To First Byte，浏览器收到“第一口数据”的时间（越小越快）。
- TTI：Time To Interactive，页面变得“可以点、可以用”的时间。
关键点：不同渲染策略适配不同业务场景。
8. 小结与学习建议
前端技术的进化，本质上是在解决两个问题：
- 效率：从 手动操作 DOM -> 数据驱动 (MVVM)。
- 规模：从 巨型面条代码 -> 组件化 + 工程化。
MVVM 是什么？ 简单理解：Model（数据）变了，View（界面）自动变。
现在你可以把前端理解成三件事：
- 写页面：HTML + CSS（结构与样式）
- 让页面动起来：JavaScript（交互与状态）
- 把复杂项目做好：组件化 + 工程化（协作与质量）
如果你刚开始学，建议按这个顺序：
- 先把 HTML/CSS 写熟（布局、响应式）
- 再学 JavaScript 的基础（变量、函数、事件）
- 最后上手一个框架（Vue/React），理解“状态驱动 UI”