1. 项目缘起为什么今天还要聊jQuery最近在整理一个老项目的代码发现里面密密麻麻的$符号没错就是那个曾经统治前端世界的jQuery。跟团队里刚毕业的年轻同事聊起他们一脸茫然“jQuery不是早就被Vue、React淘汰了吗” 这话对但也不全对。淘汰的是它在大型、复杂单页面应用SPA中的核心地位但远未到“无用”的地步。我手头这个项目就是一个典型的内网管理系统功能简单页面不多但交互需求杂七杂八动态表格、表单验证、图片预览、生成带描述的二维码等等。用现代框架重写成本太高杀鸡用牛刀。这时候轻量、直接、兼容性无敌的jQuery反而成了最高效的解决方案。所以这个“jQuery实践1”不是什么怀旧教程而是一个务实的选择。它面向的恰恰是那些被“技术潮流”裹挟却忽略了实际场景的开发者。如果你维护着遗留系统、开发着轻量级工具页、或者需要快速实现一些零散的交互功能而不想引入庞大的构建工具链那么jQuery依然是你工具箱里一把锋利的好刀。今天我就结合最近实际遇到的几个需求——特别是如何用jQuery生成带文字描述的二维码、以及如何处理动态图片的尺寸获取——来聊聊在2024年我们该如何“务实”地使用jQuery。2. 环境准备与现代jQuery的引入姿势很多人对jQuery的印象还停留在直接从CDN引入一个jquery.min.js的时代。虽然这依然可行但在模块化、npm包管理成为主流的今天我们有更优雅、更可控的引入方式。2.1 放弃传统CDN拥抱npm管理过去我们可能这样写script srchttps://code.jquery.com/jquery-3.6.0.min.js/script这种方式简单粗暴但依赖网络版本管理混乱且无法与现代构建工具如Webpack、Vite集成。现在的推荐做法是通过npm或yarn安装将其作为一个模块来管理npm install jquery # 或 yarn add jquery然后在你的入口JavaScript文件例如main.js或app.js中引入import $ from jquery; // 或者如果你项目中有多处使用避免全局污染可以这样 import jQuery from jquery; window.$ window.jQuery jQuery; // 仅在需要全局暴露时这样做这样做的好处显而易见版本锁定package.json里清晰记录版本号团队协作和环境部署不会出现差异。构建集成可以享受Tree Shaking虽然jQuery本身不易被摇树、代码压缩等现代构建流程带来的优化。依赖清晰项目依赖关系一目了然。注意如果你的项目完全不需要构建步骤只是一个简单的静态页面那么继续使用可靠的公共CDN如cdnjs、jsdelivr也完全没问题它们通常提供了SRI子资源完整性校验安全性更高。2.2 选择兼容版本与压缩版jQuery目前有两个主要维护分支jQuery 3.x当前主力版本移除了对老旧IEIE6-8的支持更轻量性能更好。对于绝大多数现代浏览器项目请直接使用3.x的最新版如3.7.1。jQuery 1.x / 2.x除非你必须支持IE8或更早的浏览器这类需求现在极少否则请避免使用。安装时默认获取的就是压缩版minified version体积小适合生产环境。开发时如果你需要调试可以在node_modules中找到未压缩的源文件或者通过Source Map进行调试。2.3 基础HTML结构与一个简单的启动脚本假设我们有一个简单的页面需要实现后续的二维码生成和图片处理功能。一个清晰的结构是成功的一半。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlejQuery综合实践 - 二维码与图片处理/title !-- 假设我们通过构建工具引入这里不直接写script标签 -- !-- 引入必要的样式例如用于布局的简单CSS -- style .container { max-width: 800px; margin: 2rem auto; padding: 1rem; } .section { margin-bottom: 2.5rem; padding: 1.5rem; border: 1px solid #eee; border-radius: 8px; } .input-group { margin-bottom: 1rem; } label { display: block; margin-bottom: .5rem; font-weight: bold; } input[typetext], textarea { width: 100%; padding: .75rem; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; } button { padding: .75rem 1.5rem; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } #qrcodeContainer, #imageInfoContainer { margin-top: 1rem; text-align: center; } #imagePreview { max-width: 100%; height: auto; display: block; margin: 1rem auto; } /style /head body div classcontainer h1jQuery实战工作台/h1 section classsection idqrcodeSection h21. 生成带描述的二维码/h2 div classinput-group label forqrText二维码内容/label input typetext idqrText placeholder输入网址或文本 valuehttps://example.com /div div classinput-group label forqrDescription图片描述文字/label textarea idqrDescription rows3 placeholder输入要添加到二维码图片上的描述文字这是一个示例二维码指向Example官网。/textarea /div button idgenerateQRBtn生成二维码/button div idqrcodeContainer !-- 二维码和描述将在这里动态生成 -- /div /section section classsection idimageInfoSection h22. 获取网络图片信息/h2 div classinput-group label forimageUrl图片链接/label input typetext idimageUrl placeholder输入图片的完整URL valuehttps://picsum.photos/400/300 small提示可以输入诸如 https://picsum.photos/宽度/高度 的链接进行测试。/small /div button idloadImageBtn获取图片信息/button div idimageInfoContainer img idimagePreview src alt预览图 styledisplay:none; p idimageDimensions尺寸信息将显示在这里。/p /div /section /div !-- 应用主脚本 -- script src./dist/main.js/script !-- 假设这是通过构建工具打包后的文件 -- /body /html我们的main.js入口文件在DOM加载完成后初始化事件监听import $ from jquery; // 导入我们即将编写的功能模块 import { initQRCodeGenerator } from ./qrcodeModule.js; import { initImageInfoLoader } from ./imageModule.js; // 等待DOM完全加载 $(document).ready(function() { console.log(jQuery 实践项目启动...); // 初始化二维码生成模块 initQRCodeGenerator(); // 初始化图片信息获取模块 initImageInfoLoader(); // 这里可以添加其他全局的初始化逻辑 });通过这种模块化的方式即使使用jQuery我们也能保持代码的清晰和可维护性。接下来我们就深入第一个核心功能生成带文字描述的二维码。3. 核心功能一用jQuery生成与定制二维码图片生成二维码本身并不复杂社区有成熟的库例如qrcode.js。但需求是“在二维码图片里添加文字描述”这就不再是简单的生成而是涉及Canvas绘图与图片合成的操作。jQuery在这里的角色是高效地组织DOM操作、处理用户事件、并管理整个生成流程。3.1 工具选型为什么是qrcode.jshtml2canvas首先我们需要一个生成二维码的库。qrcode.js是一个纯JavaScript实现不依赖任何其他库体积小API简单非常适合与jQuery搭配使用。npm install qrcode但是qrcode.js默认输出的是canvas元素或table结构的DOM并非直接的图片数据。而我们要添加文字最灵活的方式是在Canvas上绘制。所以我们选择使用qrcode.js的Canvas渲染模式。其次如何“添加文字描述”有两种思路在同一个Canvas上绘制二维码和文字这是最直接的方式。qrcode.js生成二维码后我们获取其Canvas上下文继续在指定位置绘制文本即可。将二维码Canvas与文字Canvas合成如果文字样式复杂或需要独立处理可以先分别生成二维码Canvas和文字Canvas再将两者合并。为了覆盖更通用的场景比如文字带背景、复杂排版我们采用第二种思路并引入一个强大的库html2canvas。它可以将任意的DOM元素比如一个包含文字描述的div渲染成Canvas。这样我们的流程就清晰了用qrcode.js生成二维码Canvas (A)。用html2canvas将描述文字DOM渲染成Canvas (B)。将Canvas A和Canvas B合并成一张最终的图片Canvas (C)。将Canvas C转换为图片URL并插入到页面中。安装依赖npm install qrcode html2canvas3.2 模块化代码实现我们创建一个qrcodeModule.js文件import $ from jquery; import QRCode from qrcode; import html2canvas from html2canvas; /** * 初始化二维码生成功能 */ export function initQRCodeGenerator() { const $generateBtn $(#generateQRBtn); const $qrTextInput $(#qrText); const $qrDescInput $(#qrDescription); const $outputContainer $(#qrcodeContainer); // 清除容器内的旧内容 function clearContainer() { $outputContainer.empty(); } // 生成并合并二维码与描述 async function generateQRCodeWithDescription() { const text $qrTextInput.val().trim(); const description $qrDescInput.val().trim(); if (!text) { alert(请输入二维码内容); return; } clearContainer(); $outputContainer.append($(p).text(正在生成请稍候...)); try { // 1. 创建临时的、用于布局的容器 const $tempContainer $(div).css({ position: absolute, left: -9999px, // 移到屏幕外避免闪烁 top: -9999px, background: white, padding: 20px, textAlign: center, fontFamily: Arial, sans-serif }); // 2. 生成二维码Canvas const qrCanvas await QRCode.toCanvas(text, { width: 256, // 二维码大小 margin: 2, color: { dark: #000000, // 二维码深色部分 light: #FFFFFF // 背景色 } }); $(qrCanvas).css({ display: block, margin: 0 auto 15px }); $tempContainer.append(qrCanvas); // 3. 添加描述文字DOM if (description) { const $descDiv $(div).css({ fontSize: 16px, color: #333, lineHeight: 1.5, maxWidth: 256px, margin: 0 auto, wordBreak: break-word }).text(description); $tempContainer.append($descDiv); } // 将临时容器添加到bodyhtml2canvas才能捕获 $(body).append($tempContainer); // 4. 将整个临时容器二维码文字渲染成一个Canvas const finalCanvas await html2canvas($tempContainer[0], { backgroundColor: #ffffff, scale: 2, // 提高输出精度生成更清晰的图片 useCORS: true, // 如果二维码或文字涉及跨域资源可能需要 logging: false // 关闭调试日志 }); // 5. 清理临时DOM $tempContainer.remove(); // 6. 将最终Canvas转换为图片并显示 const dataUrl finalCanvas.toDataURL(image/png); const $finalImage $(img).attr({ src: dataUrl, alt: 二维码: ${text} }).css({ maxWidth: 100%, height: auto, border: 1px solid #ddd, borderRadius: 4px }); const $downloadLink $(a).attr({ href: dataUrl, download: qrcode_with_desc_${Date.now()}.png }).css({ display: inline-block, marginTop: 10px, padding: 8px 15px, background: #28a745, color: white, textDecoration: none, borderRadius: 4px }).text(下载图片); clearContainer(); $outputContainer.append($finalImage).append($(br)).append($downloadLink); } catch (error) { console.error(生成二维码失败:, error); clearContainer(); $outputContainer.append($(p).css(color, red).text(生成失败 error.message)); } } // 绑定按钮点击事件 $generateBtn.on(click, generateQRCodeWithDescription); // 可选监听输入框回车键 $qrTextInput.add($qrDescInput).on(keypress, function(e) { if (e.which 13) { // Enter键 generateQRCodeWithDescription(); } }); }3.3 关键点解析与避坑指南异步操作与async/awaitQRCode.toCanvas和html2canvas都是异步函数。使用async/await可以让代码逻辑保持清晰的顺序结构避免陷入“回调地狱”。这是现代JavaScript开发的好习惯即使在使用jQuery的项目中也应积极采用。临时DOM与性能我们创建了一个离屏position: absolute; left: -9999px的临时容器来组装二维码和文字。这样做是为了让html2canvas能正确捕获到样式渲染后的状态。务必在操作完成后使用.remove()彻底删除这个临时元素避免产生内存泄漏和DOM冗余。html2canvas的配置scale: 2这是生成高清图的关键。默认scale为1在Retina等高分辨率屏幕上会模糊。设置为2或更高可以生成更清晰的图片代价是Canvas尺寸变大处理时间稍长。useCORS: true如果二维码中编码的URL对应的网站图片或你添加的文字使用了网络字体且跨域这个选项至关重要。它尝试以CORS方式加载资源否则可能导致html2canvas渲染失败或内容缺失。backgroundColor明确设置背景色避免透明背景在某些场景下显示异常。下载功能的实现我们利用Canvas的toDataURL()方法生成一个Base64格式的图片数据URL并将其设置为一个a标签的href属性同时设置download属性。当用户点击这个链接时浏览器会直接下载这张PNG图片。这是一种纯前端实现的下载方案无需服务器端支持。错误处理使用try...catch包裹核心异步操作并在界面上给予用户友好的错误提示而不是让脚本静默失败。这是提升用户体验的重要一环。通过这个功能我们不仅实现了需求还实践了如何用现代ES6的语法模块化、async/await来优雅地组织传统的jQuery项目并集成了强大的第三方Canvas库来解决具体问题。接下来我们看第二个常见需求动态获取网络图片的尺寸。4. 核心功能二动态获取网络图片尺寸与信息这个需求听起来简单“给我一个图片链接告诉我它的宽高”。但在Web开发中处理网络资源总是伴随着异步加载和潜在错误如404、跨域限制。jQuery的$.ajax和Deferred对象现在更常用Promise为我们提供了强大的工具来处理这些情况。4.1 原理如何在不插入DOM的情况下获取图片尺寸最直观的想法是创建一个img元素设置其src等它加载完成然后读取它的naturalWidth和naturalHeight属性。这完全正确。关键在于“等它加载完成”。我们需要监听图片的load事件同时也要处理error事件。为什么不直接用$(‘img’).width()因为.width()获取的是元素在页面中渲染后的CSS宽度可能被样式修改如max-width: 100%。而naturalWidth/naturalHeight是图片固有的原始尺寸这才是我们通常需要的“图片大小”。4.2 模块化代码实现创建imageModule.js文件import $ from jquery; /** * 初始化图片信息获取功能 */ export function initImageInfoLoader() { const $loadBtn $(#loadImageBtn); const $imageUrlInput $(#imageUrl); const $previewImg $(#imagePreview); const $dimensionsInfo $(#imageDimensions); const $infoContainer $(#imageInfoContainer); // 显示加载状态 function showLoading() { $dimensionsInfo.text(正在加载图片并获取信息...); $previewImg.hide(); } // 显示错误信息 function showError(message) { $dimensionsInfo.html(span stylecolor: red;错误: ${message}/span); $previewImg.hide(); } // 显示图片信息和预览 function showImageInfo(width, height, url) { $dimensionsInfo.html( strong原始尺寸:/strong ${width} × ${height} 像素br strong宽高比:/strong ${(width / height).toFixed(2)}br strong文件地址:/strong a href${url} target_blank${url}/a ); $previewImg.attr(src, url).show(); } // 核心函数获取图片尺寸 function getImageDimensions(imageUrl) { // 返回一个Promise便于异步控制 return new Promise((resolve, reject) { // 创建一个内存中的Image对象不插入DOM const img new Image(); // 设置超时定时器 const timeoutId setTimeout(() { reject(new Error(图片加载超时10秒)); // 清除事件监听避免内存泄漏 img.onload img.onerror null; }, 10000); img.onload function() { clearTimeout(timeoutId); // 清除超时定时器 resolve({ width: img.naturalWidth, height: img.naturalHeight, url: imageUrl }); // 清理引用 img.onload img.onerror null; }; img.onerror function(err) { clearTimeout(timeoutId); // 错误事件可能没有详细的错误信息我们可以根据情况判断 let errorMsg 图片加载失败; // 可以尝试更精确的错误判断需要服务器CORS支持 // 例如如果是跨域错误控制台会有CORS策略报错但这里捕获的event可能没有详细信息。 // 一种实践是设置img.crossOrigin Anonymous并监听更具体的情况。 reject(new Error(errorMsg)); img.onload img.onerror null; }; // 重要设置crossOrigin属性尝试处理跨域图片 // 设置为Anonymous意味着以CORS方式请求图片但需要服务器响应正确的CORS头 // 如果服务器不支持可能会导致onerror触发 img.crossOrigin Anonymous; // 开始加载 img.src imageUrl; // 如果图片已经被缓存可能不会触发onload。对于某些浏览器需要先检查complete属性。 if (img.complete) { // 如果图片已经缓存完成立即触发模拟onload setTimeout(() { if (img.naturalWidth img.naturalHeight) { clearTimeout(timeoutId); resolve({ width: img.naturalWidth, height: img.naturalHeight, url: imageUrl }); } else { // 缓存加载但尺寸为0可能是损坏的图片 clearTimeout(timeoutId); reject(new Error(图片已缓存但无法获取有效尺寸)); } }, 0); } }); } // 处理按钮点击 async function handleLoadImage() { const imageUrl $imageUrlInput.val().trim(); if (!imageUrl) { alert(请输入图片链接); return; } // 验证URL格式简单版 try { new URL(imageUrl); } catch (e) { showError(请输入有效的URL地址包含http://或https://); return; } showLoading(); try { const info await getImageDimensions(imageUrl); showImageInfo(info.width, info.height, info.url); } catch (error) { console.error(获取图片信息失败:, error); showError(error.message); } } // 绑定事件 $loadBtn.on(click, handleLoadImage); $imageUrlInput.on(keypress, function(e) { if (e.which 13) { handleLoadImage(); } }); // 可选提供一个示例图片URL $imageUrlInput.on(focus, function() { if (!$(this).val()) { $(this).attr(placeholder, 例如: https://picsum.photos/400/300); } }); }4.3 关键点解析与避坑指南使用new Image()而非$(‘img’)在只需要获取尺寸、不需要立即插入DOM的场景下使用原生Image对象更轻量、更直接。jQuery对象包装了更多功能但在此处是不必要的开销。naturalWidthvswidth/height这是本功能最核心的点。img.naturalWidth和img.naturalHeight是只读属性返回图片的原始内在尺寸。而img.width是元素属性可以被HTML属性或CSS修改。永远使用naturalWidth/naturalHeight来获取图片的真实大小。处理缓存图片浏览器会缓存图片。如果一张图片之前加载过再次设置img.src为相同URL时可能会直接从缓存读取并立即进入complete状态而不会触发onload事件。我们的代码通过检查img.complete属性来处理这种情况确保能正确获取到已缓存图片的尺寸。超时控制网络请求不可靠。必须为图片加载设置超时如10秒防止因图片链接失效或网络极慢导致用户界面一直等待。使用setTimeout并在加载成功或失败后及时用clearTimeout清理。跨域问题CORS这是前端处理网络图片最常见的“坑”。默认情况下通过JavaScriptnew Image()加载跨域图片你可以使用它比如插入DOM但无法读取其像素数据虽然naturalWidth通常可以读取但某些严格的安全策略下也可能被阻止。我们设置了img.crossOrigin ‘Anonymous’;这告诉浏览器以CORS模式请求图片。但这需要图片所在服务器的配合即服务器响应头中必须包含Access-Control-Allow-Origin: *或允许你的域名。如果服务器不支持你可能会遇到onerror触发或者在某些浏览器中能获取尺寸但无法进行更高级的Canvas操作如我们之前二维码合成中的html2canvas。对于公开的、支持CORS的图片服务如许多图床、picsum.photos这很有效对于不支持的源此功能可能会失败。在实际项目中你需要明确告知用户该限制或考虑通过后端代理来获取图片信息。内存管理在onload和onerror回调的最后我们将事件处理器置为nullimg.onload img.onerror null;。这是一个好习惯有助于在某些浏览器中释放对图片对象的引用避免潜在的内存泄漏。虽然现代浏览器的垃圾回收机制很强但主动清理总是更稳妥。使用Promise包装将基于事件的异步操作封装成Promise使得调用方可以使用更清晰的async/await语法大大提升了代码的可读性和可维护性。这是将传统jQuery回调模式升级到现代异步编程模式的关键技巧。通过这个模块我们不仅实现了功能更深入处理了网络编程中常见的异步、错误、超时、跨域等边界情况使得工具更加健壮和实用。5. 功能集成与项目优化思考将两个功能模块集成到主应用后一个实用的jQuery小工具就完成了。但作为一次“实践”我们不能只停留在功能实现。让我们思考一下如何让这个小项目变得更专业、更健壮。5.1 用户体验优化添加加载状态与反馈在我们的代码中已经初步实现了加载提示和错误提示。可以进一步优化禁用按钮在异步操作生成二维码、加载图片期间禁用对应的按钮防止用户重复点击。// 在generateQRCodeWithDescription和handleLoadImage函数开始处 $generateBtn.prop(disabled, true).text(生成中...); // 在try...catch的finally块或完成/失败后 .finally(() { $generateBtn.prop(disabled, false).text(生成二维码); });更美观的加载器可以使用CSS动画或一个小的GIF动画来代替简单的文字提示。5.2 代码结构优化提取通用工具函数项目中有些逻辑是通用的比如“安全的URL验证”、“统一的错误提示函数”。我们可以创建一个utils.js模块// utils.js import $ from jquery; export function isValidUrl(string) { try { new URL(string); return true; } catch (_) { return false; } } export function showToast(message, type info) { // 实现一个简单的非阻塞提示可以基于jQuery动态创建元素 const $toast $(div classtoast toast-${type}${message}/div).css({ position: fixed, top: 20px, right: 20px, padding: 10px 20px, background: type error ? #f8d7da : #d1ecf1, color: type error ? #721c24 : #0c5460, border: 1px solid ${type error ? #f5c6cb : #bee5eb}, borderRadius: 4px, zIndex: 9999, transition: opacity 0.3s }).appendTo(body); setTimeout(() { $toast.css(opacity, 0); setTimeout(() $toast.remove(), 300); }, 3000); } // 防抖函数用于优化频繁触发的事件如输入框实时验证 export function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later () { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout setTimeout(later, wait); }; }然后在主模块中引入并使用这些工具函数使业务逻辑更清晰。5.3 性能与兼容性考量图片预览的懒加载如果imageUrl输入框支持实时预览频繁触发图片加载会浪费流量和性能。可以为输入框绑定input事件并配合防抖debounce函数只在用户停止输入一段时间如500毫秒后才触发获取图片信息的操作。浏览器兼容性我们使用了async/await和Promise这些是ES2017的特性。对于需要支持老旧浏览器如IE11的项目需要通过Babel等转译工具将其转换为ES5代码。jQuery本身对IE有良好支持但现代JavaScript语法需要额外处理。第三方库体积html2canvas是一个相对较大的库。如果项目只生成二维码而不需要复杂的文字描述合成可以考虑更轻量的方案比如直接在qrcode.js生成的Canvas上使用Canvas API绘制文字从而移除html2canvas依赖。5.4 从“能用”到“好用”可配置性扩展目前二维码的大小、颜色描述文字的字体、颜色等都是硬编码的。一个更专业的工具应该允许用户自定义这些选项。我们可以轻松地扩展HTML增加一些输入框或选择器如颜色选择器、字体大小下拉框然后在JavaScript中读取这些配置动态传递给QRCode.toCanvas的选项和描述文字的CSS中。例如在HTML中添加label二维码颜色 input typecolor idqrColor value#000000/label label背景颜色 input typecolor idqrBgColor value#ffffff/label label文字大小 input typenumber iddescFontSize value16 min10 max32 px/label然后在generateQRCodeWithDescription函数中获取这些值const qrColor $(#qrColor).val(); const qrBgColor $(#qrBgColor).val(); const descFontSize $(#descFontSize).val() px; // ... 将这些值应用到QRCode配置和$descDiv的样式中通过这样的迭代一个简单的练习项目就逐渐演变成一个功能丰富、用户体验良好、代码结构清晰的小型应用。这正是jQuery在特定场景下的价值体现快速原型开发、轻量级交互增强、以及对遗留系统进行渐进式改进。它不需要复杂的脚手架、状态管理和构建配置直击痛点快速交付价值。