jessquery: 一个值得尝试的 jQuery 强大刺客?

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 jessquery

jessquery 是 DOM API 的轻量级包装器，保持了 jQuery 的直观优雅，但针对现代 Web 进行了大量简化。jessquery 拥有 43 种功能强大的自定义方法，可帮助开发者无缝处理异步任务、自定义错误行为并确保 DOM 操作始终按顺序执行。

从体积上看，jQuery 在未压缩之前的体积为 88.3kb，而 jessquery 只有 8.82k，只有前者的十分之一，Gzip 后 jQuery 依然有 31.7kb，而后者只有 3.76kb，远远小于 jQuery。

目前 jessquery 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。

如何使用 jessquery

首先需要安装相应依赖：

npm install jessquerypnpm install jessqueryyarn add jessquerybun install jessquery

当然，如果没有包管理工具可以直接通过 CDN 方式引入：

下面是 jessquery 的基本用法示例：

// 大多数东西都紧密遵循 DOM API，只是名称略有不同。// 但是，现在开发者可以将其链接在一起// 其总是按顺序执行！const fadeIn = [{opacity: 0}, { opacity: 1 }]// WAAPI keyframesconst fadeOut = [{opacity: 1}, { opacity: 0 }]// WAAPI keyframesconst animatedText = $$(".animated-text")// 注意： $$ ≈ querySelectorAll 而 $ 相当于 querySelector// // animatedText .addClass("special") .wait(1000) // Will not appear for one second .toggle("hidden") .text( `

In two seconds, every element matching the 'animated-text' class will fade in and out twice then disappear.

` ) .wait(2000) .transition(fadeIn, 1000) .transition(fadeOut, 1000) .transition(fadeIn, 1000) .transition(fadeOut, 1000) .purge // 所有 `.animated-text` 元素都会从 DOM 中移除

jessquery 还提供了强大的 TypeScript 支持，比如：

const button = $(".button")const coolInputs = $$(".cool-inputs")

更加强大的是，jessquery 还提供了 DomProxy Lifecycle、Async Flow、条件逻辑、promisify 和 setErrorHandler、AJAX 等 jQuery 常用高级用法，比如下面是发送一个Ajax请求的示例：

const fetchOptions = { // 使用与 fetch 相同选项，但具有大量额外功能，例如： // 使用自动重试，默认为 0 retries: 3, // 第一次重试将在一秒内，然后两秒，然后四秒 retryDelay: 1000, // 可以设置一个错误处理程序，如果在所有重试后提取仍然失败，将调用该错误处理程序 onError: (err) => sendFetchErrorToAnalytics(err). // Or, a success handler that will reflect the DOM AFTER the element has been updated. onSuccess: => dynamicSpans.attach("

Data Loaded!

"), // This custom loading message will replace the element's text while it waits. onWait: => dynamicSpans.text("Hold your horses! I'm loading data!") // But, only if it doesn't load within one second. (default is 250ms and no message) waitTime: 1000, // 默认情况下，所有内容都会被清理，但如果需要可以关闭 runScripts: true, sanitize: false, //仍然支持完整范围的获取选项（请求） headers: { "Cool-Header": "Cool-Value", },}// 支持任意嵌套dynamicSpans.fromJSON( "https://jessepence.com/api/cool-json", (el, json) => { el.html( `

${json.name}

${json.bio}

` ) .wait(5000) .fromHTML("/api/extended-bio", fetchOptions) .attach( "

Enough about me, I'll replace this with a cool stream in 5 seconds!

" ) .wait(5000) .fromStream("/api/cool-stream", fetchOptions) }, fetchOptions)

更多关于 jessquery 的用法可以参考文末资料，本文不再过多展开。

参考资料