你不需要 jQuery,但你需要一个 DOM 库

作者 : 开心源码 本文共2256个字,预计阅读时间需要6分钟 发布时间: 2022-05-12 共219人阅读

写这篇文章的目的,是希望大家对 jQuery 有一个正确的认识,即便 jQuery 已经逐步退出历史舞台,但是它的 API 将会以另外一种形式存在下去。

jQuery 不会死去

从 GitHub 放弃 jQuery,再到 Bootstrap 5 宣布移除 jQuery,看来一个时代终究要落下帷幕。

为什么我们会放弃 jQuery 呢?起因无非这样几个:不需要再进行浏览器的兼容,原生 DOM 查找已经很方便,AJAX 请求有更好的替代方式等等。

在我看来 jQuery 最大的弊端是无法分板块引入,直接引入整个库实在有些不妥,毕竟太多功能已经没有用武之地。但是 jQuery 的 DOM 操作仍然很有必要。很多人对我的这个观点有些疑问。其实在使用 MVVM 框架的时候,DOM 操作的确已经很少。但是我们也不可能总是做少量 CRUD 的功能。对于复杂的业务需求依然需要少量 DOM? 操作。

如果 jQuery 可以把 DOM 操作相关的功能板块分离出来,或者许还有很大的使用空间。

原生当道

在平常的项目中,越来越多的人选择用原生 JS 去操作对象,比方获取元素属性,宽高,定位等等。

早在几年前,github 上就有很多文章详情如何用原生 JS 代替 jQuery,比方 [YouDontNeedJQuery](nefe/You-Dont-Need-jQuery),[YouMightNotNeedjQuery](HubSpot/youmightnotneedjquery)等。就我个人而言,纯 JS 操作的确很简单,但是并不是很优雅,复杂一点的操作还要经常翻 MDN。

以上是 jQuery 和原生 JS 比照的一个缩影,结果显而易见,jQuery 的 API 更加简洁。除此之外,jQuery API 的使用形式也非常统一。相反,原生 JS 的 API 使用方式就比较多样了,既有赋值,又有传参等。另外原生 JS 的 API 名称冗长,不方便记忆。这也是很多 JS 库诞生的意义。

很多插件一般都会有一个 `utils` 的文件,基本会对原生方法做一个简单封装并提供少量工具方法。

Zepto 的优势与弱势

Zepto 是一个思想超前的库,为什么我会有这样的结论?Zepto 对原生方法做了进一步的笼统,使用更简单。正如我在上文说过的,既然 jQuery 的 API 简洁易用,而且我们也更加熟习,那我们为什么不将 jQuery 和原生 JS 结合起来呢?令人惊讶的是,早在 2010 年,Zepto 的作者就已经这样去做了。用原生 JS 实现了 jQuery 的大部分 API,可替代率接近九成吧,至少在我编写的插件中,几乎可以替换掉所有的 jQuery API。而且 Zepto 也不是一味的使用 `document.querySelector` 方法,而是根据性能优劣,有选择的使用 `document.getElementById` 以及 `document.querySelector` 等。

但是 Zepto 也有少量显而易见的缺陷,毕竟还是上个时代的产物,首先就是无法按需加载,现在我们在写项目的时候更愿意根据自己的需要引入某些方法,而不是将整个库一律引入,尽管 Zepto 的体积不大,但是作为强迫症还是有少量厌恶。另外就是 Zepto 本身也有少量 bug,比方 `scrollTop`、`scrollLeft` 方法。其它不同参见源码。

`document` 元素无法取得正确的值,我对这个问题提过 pr 但是没有回应,Zepto 目前基本已经中止维护。正确的方法如下:

Domq 的使命

形如 jQuery 的 DOM 操作库有很多,比方 [bonzo](ded/bonzo)、[$dom](julienw/dollardom),但是在我重构 jQuery 插件时,我发现没有办法用这些库直接替换 jQuery,只有 Zepto 相对完美,但是我又不希望引入额外的无用的方法。

最后我决定改造 Zepto,使之更符合现在的使用习惯。多说一点,个人觉得 Zepto 的核心函数稍显凌乱,命名空间既有 `zepto`、又有 `$`、`Z`,感觉非常混乱,而 domq 的核心函数只有 `D` 这一个命名空间,形态及功能和 jQuery 的核心函数几乎一样,可以认为是一个 mini 版的 jQuery。

当然, Domq 最关键的还是按需加载,根据需要挂载方法,尽量减少不必要的代码。使用方式很简单,但是你需要创立一个独立文件,重新挂载需要的方法到 `D` 命名空间上,这在编写插件时非常有用。

另外,在做项目时经常会用到少量工具方法,这时候用一个工具库暴露这些方法或者许是最好的方式。Domq 也有少量常用的工具方法,不过还需要再迭代一下。

Domq 没有太多新的东西,所以也没有太多可以详情的,它已经在插件 [PhotoViewer](nzbin/photoviewer) 以及实际项目中得以运用,欢迎大家下载使用。

总结

这是一个好的时代,也是一个坏的时代,jQuery 的落幕的确让人感叹,但是我们完全没必要由于 jQuery 的落幕而放弃 jQuery 的使用方式。正如前文所说,jQuery 的 DOM 操作在我看来仍然是最好用的,所以,你不需要 jQuery,但你需要一个 DOM 库。

一个人学习会有迷茫,动力不足。这里推荐一下我的前台学习交流qun:四八四,七五七,七六零,里面都是学习前台的,假如你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前台学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到手机端HTML5的项目实战的学习资料都有整理,送给每一位前台小伙伴,有想学习web前台的,或者是转行,或者是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 你不需要 jQuery,但你需要一个 DOM 库

发表回复