前端框架的发展

银安
83 阅读5分钟

前端框架之前：静态页面与 jQuery 时代（1990s ~ 2010前后）

遭遇的问题

  1. 网页内容简单：最初网页是纯 HTML，静态排版，交互几乎没有。
  2. 交互需求增加：随着电商、门户网站兴起，需要动态 DOM 操作，比如轮播图、表单校验、弹窗。
  3. 原生 API 繁琐：操作 DOM 要写 document.getElementById()、innerHTML 等，很啰嗦且兼容性差。
  4. 浏览器兼容性噩梦：IE、Firefox、Chrome 等浏览器标准不统一，写一次代码到处调 bug。

解决方案

  • jQuery (2006)：一行 $() 就能选中元素并操作，大幅简化了 DOM 操作和事件绑定，还内置 Ajax、动画、跨浏览器兼容。

举例

  • 轮播图：原生要写几十行 JS，jQuery $("#banner").fadeIn() 就能搞定。

总结

jQuery 提升了开发效率，但带来问题：

  • 页面逻辑和 DOM 操作混杂，代码臃肿；
  • 大型应用里难以维护，数据与 UI 不同步（状态管理混乱）。

于是，前端世界进入“框架的探索期”。

MV* 框架的兴起（2010 ~ 2014）

遭遇的问题

  1. 单页应用 (SPA) 的需求：用户不想每次点击都刷新整页，要“桌面应用般流畅体验”。
  2. 复杂交互与数据绑定：jQuery 时代要手动更新 DOM，很容易出错。
  3. 团队协作与可维护性：代码越写越乱，急需有组织的架构。

解决方案

于是出现了 MVC/MVVM 框架，试图让数据和视图自动同步。

  • Backbone.js (2010)：带来了 MVC 模型，让数据和视图有一定分离，但需要大量手动 glue code（胶水代码）。
  • AngularJS (2010)：Google 推出，采用 双向数据绑定，HTML 可以直接写上 ng-model，数据变了 UI 自动更新。
  • Ember.js (2011)：主打约定优于配置，提供完整应用架构。

举例

  • 表单输入框绑定数据：AngularJS 里写 ng-model="username"，输入框变化 → 数据模型变化 → UI 自动刷新。

总结

这一时期框架解决了“DOM 手动操作噩梦”，但：

  • AngularJS 的“双向绑定”在大型应用里性能差（脏检查太重）；
  • Backbone 太轻量，大项目要写大量 glue code；
  • 框架各自为战，没有统一标准。

这就为“下一代更高效的框架”埋下伏笔。

现代前端框架的黄金时期（2014 ~ 2018）

遭遇的问题

  1. 性能瓶颈：AngularJS 脏检查太耗性能，页面复杂时卡顿明显。
  2. 复杂应用：SPA 越来越复杂，状态管理成了大问题（多组件共享数据）。
  3. 社区分裂：每个框架都有独特写法，学习成本高。

解决方案

进入 现代前端框架时代，三大框架崛起：

  • React (2013, Facebook)
    • 核心：虚拟 DOM + 单向数据流。
    • 思路：先用 JS 描述 UI，变更时只更新差异部分，提升性能。
    • 优势：组件化、逻辑清晰。
  • Vue.js (2014, 尤雨溪)
    • 核心：结合 Angular 的指令模板 + React 的虚拟 DOM。
    • 特点：轻量、易学、中文社区强大。
    • “渐进式框架”，可小可大。
  • Angular 2+ (2016, Google)
    • 推倒重来，引入 TypeScript，强调工程化，适合大型项目。

举例

React：写一个组件 <TodoList />，数据变化时自动重新渲染 UI。

  • Vue：通过 v-for 渲染列表，数据增删时自动更新页面。

总结

这一阶段框架达到了 性能与工程化的平衡，同时形成“三足鼎立”：React、Vue、Angular。
但问题也出现了：

  • React 生态过于碎片化（路由、状态管理要靠第三方）。
  • Vue2 的响应式系统基于 Object.defineProperty，存在局限。
  • Angular 太“重量级”，学习门槛高。

框架生态与工程化扩展（2018 ~ 2021）

遭遇的问题

  1. 前端应用变得巨大：从几十 KB 到几 MB，加载速度成瓶颈。
  2. 跨端需求：不仅仅是网页，还要支持移动端、小程序、桌面端。
  3. 状态管理与构建复杂：Redux、Vuex、Webpack 配置繁琐，新手难以上手。

解决方案

  • React Hooks (2019)：解决函数组件难以复用逻辑的问题，让逻辑组合更优雅。
  • Vue 3 (2020)：引入 Composition API + Proxy 响应式系统，性能提升。
  • Svelte (2019)：提出“编译时框架”，不用虚拟 DOM，代码更轻量。
  • Next.js / Nuxt.js：解决 SEO 与首屏加载问题，支持 SSR（服务端渲染）。
  • 跨端框架：React Native、Flutter、小程序框架（uni-app、Taro）。

举例

  • 用 Next.js 开发博客：支持 SEO，首屏渲染快，后续切换无刷新。
  • Vue 3 的 ref/reactive：让数据逻辑更清晰，能更好地复用。

总结

前端从“写页面”走向“构建复杂应用”，框架不仅管 UI，还管 构建、渲染、跨端。

当下与未来趋势（2022 ~ 至今）

遭遇的问题

  1. 性能再提升：大型前端应用仍存在首屏白屏、打包过大。
  2. 复杂度过高：前端生态工具链（Webpack、Babel、ESLint 等）太复杂。
  3. 前后端界限模糊：前端也要处理 SSR、API、数据库对接。

解决方案

  • Vite (2021)：基于 ES Module 的新型构建工具，开发速度极快，成为 Vue3 官方推荐。
  • Next.js 13 / React Server Components：支持 服务端渲染 + 流式渲染，性能更高。
  • Astro (2022)：面向内容网站，强调“岛屿架构”，只在需要时激活 JS。
  • Solid.js / Qwik：新一代高性能框架，主打细粒度响应和零 JS 传输。
  • 全栈框架趋势：Remix、Next.js、Nuxt 逐步向“前后端一体化”发展。

举例

  • 用 Astro 搭建文档站：默认零 JS，首屏极快。
  • Qwik：只有用户真正交互时才加载对应 JS，解决“白屏和性能损耗”。

总结

今天的前端框架已不再只是“操作 DOM 的工具”，而是：

  • 性能优化的战场（虚拟 DOM → 无虚拟 DOM → 流式渲染）。
  • 全栈化趋势（从纯前端到支持后端 API）。
  • 多端融合（Web、App、小程序、桌面）。

整体脉络总结

  1. 无框架时代（静态 HTML + 原生 JS）：问题 → DOM 繁琐 & 兼容性差 → 解决：jQuery。
  2. MV_ 框架探索期_*（Backbone、AngularJS）：问题 → 大型应用难维护 → 解决：数据绑定。
  3. 现代三大框架（React、Vue、Angular2+）：问题 → 性能与架构 → 解决：虚拟 DOM、组件化。
  4. 工程化与生态扩展（Hooks、Vue3、Svelte、SSR）：问题 → 应用复杂 & 跨端 → 解决：生态体系。
  5. 当下与未来（Vite、Astro、Qwik、全栈化）：问题 → 性能与复杂度 → 解决：新架构、新工具。
avatar
文章
阅读
粉丝