前端技术演化史

jQuery

Properties1
tags框架, jquery, 命令式, dom, ajax时代

7分钟阅读

💧 jQuery

一句话定性

jQuery 不是框架,而是一层抹平浏览器差异的薄薄的兼容层。它用一个 $() 拯救了一代开发者,却也因为它的”命令式”本质,亲手为整个范式刨好了坟墓。它是前端史上最成功、也最早被范式淘汰的工具。

一、它是什么 & 出现的时代

2006 年,John Resig 发布 jQuery,口号是 “write less, do more”。它生于 2005-2013 Ajax时代 的开端:Gmail / Google Maps 刚刚证明”网页可以是应用”,所有人都想做富交互,但手里的工具还停留在石器时代。

jQuery 的本质是:用一个统一的 API,封装了 DOM 选择、操作、事件绑定、Ajax 请求和动画——并在内部替你处理所有浏览器兼容性。

// 一行代码,跨所有浏览器:选中、绑定、Ajax、改 DOM
$('.btn').on('click', () => $.get('/data', d => $('#list').html(d)));

二、为什么会出现(解决上一代什么痛点)

在 jQuery 之前,前端开发是一场跨浏览器的酷刑:

原生 DOM 时代的地狱

  1. 选 DOM 没有统一方式:getElementById / getElementsByTagName,想按 class 选?自己遍历。
  2. 事件模型分裂:IE 用 attachEvent,标准浏览器用 addEventListener,this 指向还不一样。
  3. XMLHttpRequest 极其难用:要写 readyState 状态机,还要为 IE 单独 new ActiveXObject。
  4. 每个 API 都要写 if-else 判断浏览器,代码一半是兼容性补丁。

jQuery 用 CSS 选择器语法($('.foo > .bar'))+ 链式调用 + 内部兼容封装,一次性消灭了以上全部痛点。详见时代背景 2005-2013 Ajax时代。

三、核心创新 & 为什么流行(踩中什么时代红利)

  • CSS 选择器即 API:借鉴 CSS 选择器选 DOM,符合直觉、零学习成本。
  • 链式调用:$(...).addClass().fadeIn().on(...),一气呵成。
  • 抹平一切兼容性:这是它最大的价值——开发者不用再关心 IE6 和 Firefox 的差异。
  • 极低门槛:一个 <script> 标签就能用,不需要构建工具、不需要懂架构。

为什么它能封神

jQuery 精准命中了那个时代唯一最痛的点,且哲学极其务实:不改变 Web 本身,只做一层薄薄的抹平层。它的普及程度一度高到”jQuery 几乎等于 JavaScript”——大量开发者会写 jQuery 却不会写原生 JS。它建立在 ES5 的语言基础上,踩中了 Ajax 富交互的时代红利。

四、带来的新问题 / 副作用

它的成功,正是它衰落的种子

jQuery 是**命令式(imperative)**的——它手把手告诉浏览器”先选这个元素,再改它的 class,再插入那段 HTML”。当应用复杂起来:

  1. 状态与视图的同步要全手动:数据变了,你要记得手动找到对应 DOM 去改;DOM 改了,又要记得回写数据。漏一处就不一致,这是 bug 的最大来源。
  2. 没有真正的组件化:jQuery 插件本质是函数,无法把”状态 + 视图 + 行为”封装成可复用单元,复制粘贴成常态。
  3. 没有单一数据源:状态散落在 DOM 的 data-* 属性、全局变量、闭包里,没人说得清”当前真实状态”是什么。
  4. 代码无法推理:任何地方都能改任何 DOM,改一处不知道会影响哪里 —— 经典的意大利面条代码。

核心新矛盾:当应用足够复杂,“手动保持数据和 DOM 同步”会成为压垮开发者的最后一根稻草。

五、为什么会衰落 / 现状(仍在用则讲演化)

jQuery 的衰落不是因为有人做了”更好的 jQuery”,而是因为整个范式被推翻了:

  • 声明式取代命令式:React 提出 UI=f(state),你只描述 UI 长什么样,框架负责同步 DOM——从根本上消灭了 jQuery 要解决的”手动同步”问题。
  • 浏览器自己进步了:querySelectorAll、fetch、classList、addEventListener 标准化后,jQuery 抹平兼容性的核心价值大幅缩水。
  • IE 死亡:IE 退场后,兼容性地狱基本消失,jQuery 最大的存在理由也随之消失。

但它没死,只是成了"活化石"

因为海量遗留网站(WordPress 生态、老后台、政企站点)仍在用,jQuery 至今是使用率最高的 JS 库之一。它不再被用于新项目,却支撑着半个互联网的存量。

六、对后续技术的影响(因果链)

原生 DOM API 难用 + 浏览器不兼容
        │
        ↓
jQuery:$() 一把抹平 ──► 富交互门槛暴跌 ──► Ajax 时代繁荣
        │
        │  命令式本质暴露:应用一大 → 意大利面 → 状态/视图同步成灾
        ↓
催生"声明式"的渴望
        │
        ├─► Backbone(2010):先给代码立个 MVC 规矩
        │
        ├─► AngularJS(2010):双向绑定,数据变 UI 自动变
        │
        └─► React(2013):UI=f(state),彻底拿走"如何改 DOM"的责任
                │
                ↓
        jQuery 的范式被埋葬,但它的"选择器 + 链式 + 务实抹平"
        思想,影响了之后所有库的 API 设计

历史地位

jQuery 是 Ajax 时代的图腾。它教会整个行业一个深刻教训:抹平差异只是权宜之计,真正的进步是改变思维范式——从”怎么改 DOM”到”UI 应该长什么样”。这个领悟,正是下一个时代(2013-2018 SPA时代)的全部主题。

🔗 相关:前端框架演进史 | Backbone | AngularJS | React 🔗 时代:2005-2013 Ajax时代 | 2013-2018 SPA时代 🔗 语言:ES5

关系图谱

反向链接