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 用户使用的最流行的 ...
随机推荐
- 剑指offer---圆圈中最后剩下的数
题目:圆圈中最后剩下的数 要求:0,1,2...n-1 共n个数排成一个圆圈,从数字0开始,每次删除第m个元素,求这个圆圈里面剩下的最后一个元素 如 n=5, m=3 的情况:0, 1, 2, 3, ...
- 转载:SpringMVC的工作原理图
SpringMVC的工作原理图: SpringMVC流程 1. 用户发送请求至前端控制器DispatcherServlet. 2. DispatcherServlet收到请求调用HandlerMa ...
- 【Python实践-8】和为S的两个数字
(剑指offer)输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 思路:选定第一个数字,然后遍历后面的数字求和并与S比 ...
- java---括号匹配
import java.util.HashMap;import java.util.LinkedList;import java.util.Map; /* *括号匹配 * 1.用栈实现,如果读取字符为 ...
- exists关键词和case表达式
首先声明一下,exist和case没有必然联系,这里只是为了一起整理个笔记. EXIST谓词 如果存在对应的记录,返回TRUE.否则,返回FALSE.*实际使用中,即使不适用exist,基本也可以使用 ...
- Maven学习总结(32)——Maven项目部署到Tomcat8中
1.环境准备 Maven.Tomcat8.Eclipse 2.maven中的镜像配置 大家知道,mavne默认使用的是国外的镜像,但是速度很慢,这里建议大家使用阿里的中央仓库镜像. 阿里出品,必出精品 ...
- mongodb local数据库的空间初始化好大啊!
新建立了一个replicat set,登录到primary里,show dbs一看吓一跳 local数据库竟然占用了80多G的空间 [root@wxlab31 bin]# ./mongo --host ...
- 这个贴子的内容值得好好学习--实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化
感觉要DJANGO用得好,ORM必须要学好,不管理是内置的,还是第三方的ORM. 最最后还是要到SQL.....:( 这一关,慢慢练啦.. 实例详解Django的 select_related 和 p ...
- C. Hexadecimal's Numbers
C. Hexadecimal's Numbers time limit per test 1 second memory limit per test 64 megabytes input stand ...
- 移动端,input输入获得焦点被键盘遮住简单解决方案
(function (window,document) { document.querySelector('input[type="text"]').addEventListene ...