sanbuphy
67 lines
2.7 KiB
Markdown
67 lines
2.7 KiB
Markdown
# 前端进化史：从 "切图" 到 "工程化" (Interactive Intro)
|
||
|
||
> 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你回顾前端开发的 20 年变迁。我们将从最基础的 HTML 讲起，一直到现代的 Vue/React 组件化开发。
|
||
|
||
<FrontendEvolutionDemo />
|
||
|
||
## 0. 引言：网页的"身份危机"
|
||
|
||
最早的网页，只是**电子海报**。
|
||
现在的网页，是**桌面级应用** (如 VS Code, Figma)。
|
||
|
||
为了支撑这种转变，前端技术经历了一场从 "手工作坊" 到 "工业化生产" 的革命。
|
||
|
||
核心变化只有一点：**如何更高效地管理日益复杂的页面状态？**
|
||
|
||
---
|
||
|
||
## 1. 痛苦的根源：命令式操作 (Imperative)
|
||
|
||
在 jQuery 时代（2005+），我们操作网页就像是在**发号施令**。
|
||
"嘿，浏览器！找到那个 ID 是 `msg` 的 div，把它隐藏起来！然后把那个按钮变红！"
|
||
|
||
这种方式直观，但随着页面变复杂，命令会打结。
|
||
|
||
### 1.1 什么是"命令式"？
|
||
这就好比你要画一幅画：
|
||
* **命令式**：你告诉画家“拿起笔，蘸红颜料，在坐标(10,10)画一个圈”。
|
||
* **声明式**：你直接给画家一张照片，“给我画成这样”。
|
||
|
||
### 1.2 交互演示：命令式 vs 声明式
|
||
下方的演示展示了两种思维的巨大差异。
|
||
* **左边 (jQuery)**：你需要手动关注每一步 DOM 操作。忘了更新 DOM？界面就不对了。
|
||
* **右边 (Vue)**：你只管修改数据 `count`，界面自动变。
|
||
|
||
<ImperativeVsDeclarativeDemo />
|
||
|
||
**关键点**：现代框架（Vue/React）的核心价值，就是把我们从繁琐的 DOM 操作中解放出来，专注于**数据（State）**。
|
||
|
||
---
|
||
|
||
## 2. 工业化革命：组件化 (Component)
|
||
|
||
解决了"怎么更新页面"的问题，接下来要解决"怎么组织代码"的问题。
|
||
以前写网页，是一个巨大的 HTML 文件，混杂着几千行 JS 代码。改一个按钮，可能弄坏整个页面。
|
||
|
||
### 2.1 乐高积木思维
|
||
现代前端把页面拆成了**组件**。
|
||
一个按钮、一个导航栏、一个商品卡片，都是独立的积木。
|
||
|
||
### 2.2 组件的复用
|
||
定义好一个"商品卡片"组件后，你可以由它生成 100 个实例。每个实例都有自己独立的状态（比如点赞状态），互不干扰。
|
||
|
||
<ComponentReusabilityDemo />
|
||
|
||
**思考**：上面的演示中，点击生成的每一个 "Counter" 或 "Card"，它们的数据是独立的吗？
|
||
是的。这就是组件化的魔力：**封装**与**复用**。
|
||
|
||
---
|
||
|
||
## 3. 总结
|
||
|
||
前端技术的进化，本质上是在解决两个问题：
|
||
1. **效率**：从 手动操作 DOM -> 数据驱动 (MVVM)。
|
||
2. **规模**：从 巨型面条代码 -> 组件化架构。
|
||
|
||
现在的你，正站在巨人的肩膀上，使用着最先进的生产力工具。
|