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