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 用户使用的最流行的 ...
随机推荐
- PKI相关知识简述
1. 公钥泄露导致中间人攻击 有A.B.C三个人,如果C把自己的公钥提供给了AB双方,C伪装成B,让A认为C就B,这样A就把自己的公钥发送给C,C再伪装成A,让B认为C就A,B就把自己的公钥也发送给了 ...
- 深入理解PHP之foreach
招聘 标签(空格分隔): 招聘 PHP 国贸 语言基础 foreach 语法结构提供了遍历数组的简单方式. php5之前, foreach仅能用于数组php5+, 利用foreach可以遍历对象 fo ...
- Glossary in Turbulence
Table of Contents 1. Concepts/Glossary 1.1. Turbulent eddy viscosity ,μt 1.2. Turbulent kinetic ener ...
- 【模板】网络流-最大流 Dinic
洛谷 3376 #include<cstdio> #include<algorithm> #include<cstring> #define N 10010 #de ...
- Maven学习总结(31)——Maven坐标详解
Maven的一个核心的作用就是管理项目的依赖,引入我们所需的各种jar包等.为了能自动化的解析任何一个Java构件,Maven必须将这些Jar包或者其他资源进行唯一标识,这是管理项目的依赖的基础,也就 ...
- Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
- 解决win10磁盘占用过大的问题(亲测有效)
问题:打开任务管理器,经常会发现磁盘占用95%以上,电脑很卡,下面是解决方案 方法: 1.关闭家庭组. (1)搜索服务,找到“HomeGroupListener”服务,右键单击“属性”.在弹出属性界面 ...
- 【整理】uclibc,eglibc,glibc之间的区别和联系
http://www.crifan.com/relation_between_uclibc_glibc_eglibc/ 1.Glibc glibc = GNU C Library 是GNU项(GNU ...
- T1097 校门外的树 codevs
http://codevs.cn/problem/1097/ 题目描述 Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的 ...
- Spring MVC使用@RestController生成JSON示例
继上一章的生成JSON示例http://www.cnblogs.com/EasonJim/p/7500405.html,现在还有另一种选择,就是使用@RestController,下面将参照上一节例子 ...