2019 年了,为什么我还在用 jQuery?
译者按: 看来 jQuery 还是有一些用武之地的。
为了保证可读性,本文采用意译而非直译。翻译仅供学习探讨,不代表 Fundebug 观点。
许多人都在提倡: “直接用原生的 JavaScript 就好了,不需要 jQuery 了”。
You might not need jQuery尝试告诉我们,摆脱 jQuery 是一件很容易的事情。但是,它的第一个例子恰恰告诉我们用 jQuery 其实也不错,因为我们写了 10 行原生的 JavaScript 代码,其实只需要 1 行 jQuery 代码就够了。

很多 JavaScript 的 API,尤其是 DOM 相关的 API,挑战了我的审美哲学,直白点说,我觉得它们太糟糕了!el.insertAdjacentElement('afterend', other)当然也可以用,但是$(el).after(other)更加简洁。$()函数也没那么好看,我没有特别喜欢,但是它比原生的 API 好太多了。
你们如何获取某个元素的 sibling 呢?到底用nextSibling还是用nextElementSibling?它们有什么不同?各个浏览器分别支持哪个方法?当你忙着去 MDN 查文档的时候,我直接用 jQuery 的next和prev()就好了。
许多常用的 JavaScript 的标准 API 都挺奇怪的,这里我就不列出来了,大家去You might not need jQuery看看就知道了。
写代码的时候,我们总会需要使用一些常用的帮助函数,You might not need jQuery列举了很多,使用 jQuery 可以很方便的使用这些帮助函数,这样我们就不需要每次都去 Stack OverFlow 上去复制代码了。。。
浏览器的兼容问题已经没有以前那么头疼了,但是它还是个不小的问题,除非你觉得只要 85%的用户 OK 就行。关于这个问题,大家可以阅读我的Why Hello CSS doesn’t use CSS variables。
那么,我们必须使用 jQuery 吗?当然不是!使用任何第三方库都是有代价的,增加了复杂度,也增加了文件大小。但是,jQuery 其实没那么大,压缩之后的大小只有 30K。如果我们去掉 ajax 以及一些不常用的功能的话,就只有 23K;如果我们使用 querySelector 替代 SizzleJS 来构建的话,则只有 17K 了。无论是 30K 还是 17K,对许多应用来说,这个大小都是完全可以接受的。
大家不妨看看Bootstrap removing jQuery,为了移除 jQuery,他们也是花了不少精力啊:自己撸帮助函数;放弃兼容 IE,因为太难写了;他们花了 1 年半时间来倒腾这个。最终的结果在我看来,这些努力似乎不值得。
我理解他们为什么这么做,大家希望在 Vue 项目中使用 Bootstrap,但是同时使用 Vue 和 jQuery 的话有点傻。对于减少网页大小,我非常同意,也很喜欢Web bloat与The Ethics of Web Performance两篇博客中的观点。但是,我们需要实际一点,不要过于理想主义。添加 17K 的 jQuery 真的那么糟糕吗?当我吐槽 Medium 或者 New York Times 这样的网站需要的 JS 文件超过 1M 的时候,有的人会这样反驳:”莫非你还在用 56k 的带宽?“,但是,为什么 17K 的 jQuery 就那么不能接受了呢?
不用 jQuery 而自己写帮助函数也可以,比如你希望你写的函数被其他人复用,或者你写的函数特别小。但是为了不用 jQuery,放弃向后兼容?那我觉得还是用 jQuery 得了。所有事情都用 jQuery 实现当然不好,但是任何时候都不用 jQuery也不是什么明智之举。
我不是 jQuery 的狂热粉丝,我也愿意使用一些简化版的 jQuery,只要它们可以让 JS 的 API 更好用一点。You might not need jQuery推荐了bonzo和$dom,以及其他一些 AJAX 库,但是大多数看起来没怎么维护。如果没有足够吸引人的理由,最好不要去替代 jQuery,因为 jQuery 本身没什么大毛病。
有些读者也许会去比较 Vue, React 以及其他前端框架,但是这篇博客的目的是比较 jQuery 与原生的 JavaScript,没有打算去论证整个前端到底应该如何开发。
话说回来,我觉得有些场景下只使用简单的 JavaScript 也挺好的,主要原因是我希望网页可以足够快,可以让尽量多的人正常访问。以我的经验,使用服务端渲染,再加上渐进式增强 JavaScript,是最佳的实现方式,开发起来很简单,访问速度足够快,BUG 也很少。
难道前端框架不好吗?当然不是,没有什么绝对不好的技术,所有技术都有一定的取舍,当然也包括 jQuery。
参考
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用!

版权声明
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2019/06/04/why-i-am-still-using-jquery-in-2019/
2019 年了,为什么我还在用 jQuery?的更多相关文章
- 【原创】我们还需要学jQuery吗?
引言 最近撸Vue的项目,感觉的有点心累.恰巧近日,有读者来信,就是想咨询一下 烟哥,现在还有必要学习jQuery么? 我明白,现在MVVM框架逐渐占据了主要市场,很多老项目也逐渐的从jQuery转向 ...
- 在Visual Studio Code 运行 webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development 提示 Module no t found:Error:Can't resolve' 'jquery' 是因为vs code还没安装jquery
在Visual Studio Code 运行 webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mo ...
- Visual Studio 2019 RC入门
介绍 在本文中,让我们看看如何开始使用Visual Studio 2019 RC.Microsoft现已发布Visual Studio Release Candidate,现在可以下载了.最初,Mic ...
- Visual Studio 2019 RC
Visual Studio 2019 RC入门 介绍 在本文中,让我们看看如何开始使用Visual Studio 2019 RC.Microsoft现已发布Visual Studio Release ...
- 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈
本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...
- Win11曝光 代号“Core OS” 明年推出-IT外包
Win10发布距今已经有两年半的时间了,微软对其"修修补补"也有五次了,而第六次的更新也正在进行中.根据消息爆料,Win 11级别的开发项目"Windows Core O ...
- python学习的准备工作
1.python安装 1.下载: https://www.python.org/downloads/windows/ 2.安装: 安装很简单,就是下一步,只是在最后要勾选上 Add Python 3. ...
- Office2019都有哪些强大功能
前阵子是微软一年一度的Ignite大会.而其中最引人注目.也是与我们一般人最息息相关的消息,当然是Office 2019的正式发布. 尽管Office 2019所更新的功能,对于Office 365的 ...
- AWS 推出长期支持的 OpenJDK 免费分发版本 —— Amazon Corretto
简评:听说 Oracle JDK 要收费了,Oracle 要限制 Java 的商业或生产用途,针对这个问题,AWS 将会推出 Amazon Corretto. Java 是 AWS 用户使用的最流行的 ...
随机推荐
- try catch影响Spring事务吗?
对于这个问题有两种情况: 1.catch只打印异常,不抛出异常 try { 数据库做添加订单表; /; 数据库减少库存; }catch (Exception e){ e.printStackTrace ...
- MFC 多行文本显示心得
最近在利用MFC做端口扫描器实验,其中涉及CString.char.int等之间的转换.文本框的多行显示问题.总是显示底层最新结果等问题,下面写一些我总结的相关方法. 一.CString 转 cha ...
- Vue2 + Koa2 实现后台管理系统
看了些 koa2 与 Vue2 的资料,模仿着做了一个基本的后台管理系统,包括增.删.改.查与图片上传. 工程目录: 由于 koa2 用到了 async await 语法,所以 node 的版本需要至 ...
- Python的import module与form module import的区别
import moduleName 如果要使用moduleName模块中的方法时,是moduleName.method(点方法), 比如moduleName中有个方法是set,则使用的是moduleN ...
- mysql 查询出的数组为null怎么转换成0
mysql 查询出的数组为null怎么转换成0 IFNULL(b.dayPay,0) as yesterdayPay,
- BNUOJ 26224 Covered Walkway
Covered Walkway Time Limit: 10000ms Memory Limit: 131072KB This problem will be judged on HDU. Origi ...
- HDU 1130
题目大意 给定节点数 , 求通过这么多个节点能得到的二叉树的组成方式 用卡特兰数解决 f[n] = (4*n-2) * f[n-1] / (n+1); 递归不断解决 /** * @(#)Main.ja ...
- [luoguP1507] NASA的食物计划(DP)
传送门 二位费用背包 ——代码 #include <cstdio> #include <iostream> int n, maxv, maxw; ][]; inline int ...
- Username is not in the sudoers file. This incident will be reported
type sudo adduser <username> sudo where username is the name of the user you want to add in th ...
- Spring注解配置定时任务<task:annotation-driven/>
http://m.blog.csdn.net/article/details?id=50945311 首先在配置文件头部的必须要有: xmlns:task="http://www.sprin ...