Appearance
jquery:便捷体验与插件生态
元信息
- 目标:把 jquery 当"组装现成能力"的最小练习——引入、传配置、排报错这套动作跨时代不变;同时建立生态意识与批判眼光:识别一个方案属于哪个时代,明白它为何兴起又为何被取代
- 关键概念:jquery、插件机制、配置对象、依赖管理、版本兼容、去 jquery 化、生态演化(plugin→npm 包→组件库→AI 生成)
- 关联阶段:cp3
- 常见误区:为"学最新技术"而跳过插件练习(四步接入动作在今天完全复用);以为 jquery 还该用于新项目生产(原生 API 与组件库已覆盖其大部分功能);只学语法不学"接入能力"(读文档、管依赖、传配置才是可迁移的本领)
jquery 是什么,为什么学它
- 早期 javascript 的语言特性及内置功能十分之弱,难以使用
- jquery 是使用 javascript 编写的第三方工具库,它为原生 javascript 增加了许多便利的语法糖、常用功能及工具——用最少的代码体验"改文档、响应操作"
- jquery 一度成为 javascript 事实上的标准,它对 javascript 所做的许多改进后来被 javascript 官方吸收和采用(链式调用、类库思想影响了整个生态)
学习 jquery 的意义与学插件一致:不是作为生产技术,而是作为"组装现成能力"的最小练习——引入、传配置、排报错,这套动作在今天的 npm 包、组件库和 AI 生成的代码上完全相同。
版本与兼容性
- 1.x:兼容 ie678,使用最为广泛,官方只做 BUG 维护,功能不再新增。最终版本:1.12.4 (2016年5月20日)
- 2.x:不兼容 ie678,很少有人使用。最终版本:2.2.4 (2016年5月20日)
- 3.x:只支持最新的浏览器,是官方主要维护的版本,但很多老插件不支持它
- 4.0 2025发布在即 https://blog.jquery.com/
提示浏览器升级小工具 http://browsehappy.osfipin.com/
版本史本身就是一堂"浏览器兼容性"的历史课:jquery 的兴衰与浏览器标准化的进程互为镜像。
插件机制:生态的原型
jquery 本体提供基础能力,而插件机制让全世界的开发者把常见功能——轮播、灯箱、表单校验——打包成即插即用的库。它是软件复用在前端的第一种大众形态:
- jquery 时代的形态:plugin(本篇)
- 工程化时代的形态:npm 包、组件库(第 13 周)
- 组件时代的形态:design system、Web Components(第 14 周)
- AI 时代的形态:让 AI 按你的配置生成组件代码——"能看懂、能调参、能排查"的要求没有变
插件的一般使用方法
无论哪代形态,接入第三方能力的步骤惊人地一致:
- 确认依赖:依赖哪个版本的 jquery?还依赖其它库吗?(工程化后叫依赖管理/package.json)
- 引入资源:引入插件需要的 js、css(用 CDN,见CDN)
- 按规范写结构:插件约定的 HTML 结构或挂载点(现代组件叫 props/slot)
- 调用并传参:传入元素选择器和配置对象
{key: value}(现代组件叫配置项)
javascript
// 典型的插件调用:选元素、传配置
$("#slider").slider({
autoplay: true,
interval: 3000,
arrows: false
});配置对象是 JS 对象字面量的第一次大量实战——后面所有组件 API 都长这样。
体验一两个插件
- 轮播示例 http://www.htmleaf.com/jQuery/Slideshow-Scroller/201609073971.html
- jquery form(ajax 提交表单) http://malsup.com/jquery/form/
- jquery validate(表单校验插件) https://www.runoob.com/jquery/jquery-plugin-validate.html
- 可与实训:js动态校验对照:同样是校验,插件把它做成了可配置的能力
练习路径:选一个插件 → 按四步接入站点 → 改三个配置项观察变化 → 故意删掉一个依赖观察报错,理解"依赖"意味着什么。
去 jquery 化
诚实的现状:jquery 作为生产技术已经过时。
- 随着浏览器的发展,jquery 提供的许多语法功能已由浏览器内置实现
- 其 ajax、动画等功能也已有专门的标准方案,如 fetch、CSS3 动画
- jquery 直接操作 DOM,而现代前端更推崇基于虚拟 DOM(VDOM)的操作模式
- 插件早已被组件库与 AI 生成取代——原生 API(
<dialog>、popover、CSS 动画)也覆盖了大部分页面特效
事实上,jquery 仍然在更新 https://blog.jquery.com/
本篇的价值不在 jquery 本身,而在于:生态意识(先找现成能力,不重复造轮子)、接入能力(读文档、管依赖、传配置、排报错)、批判眼光(识别一个方案属于哪个时代,明白 AI 给你的代码属于哪一代、该怎样驾驭)。
参考
- http://www.runoob.com/jquery/jquery-tutorial.html
- http://www.cnblogs.com/PBDragon/p/3622693.html
- cheatsheet https://htmlcheatsheet.com/jquery/
- github 去除 jquery 的计划 https://www.oschina.net/news/98404/is-it-necessary-to-remove-iquery-from-github
- plainjs:无库的原生 js 方案查询 https://plainjs.com/
- https://gist.github.com/thegitfather/9c9f1a927cd57df14a59c268f118ce86