jQuery 已“死”?为清除技术债,我们删掉了前端所有 jQuery 依赖
近期,英国公共部门站 GOV.UK 前端开发主管 Matt Hobbs 宣布该公司删除了 jQuery 作为所有前端应用程序的依赖项,这意味着“在所有 13 个 FE 应用程序中,JS 大小减少了 32 KB(31% ~49% 之间)”。
Matt 也在推特上分享了几组数据,说明了在删除 jQuery 后一些关键指标得到了优化。
- 移除页面标签限制并查看所有页面 RUM 数据, 75% 用户的页面都有类似的下降:
- 在 75% 的页面中仅检查 Android 用户,可以看到 JS 长任务改进了 7%:
- 50% 用户的移动设备上的 JS Long Tasks 有 10% 的改进:
- 而对于 95% 用户,阻塞时间则减少了 10% :
“这些用户会遇到严重不利的网络和设备条件,每一次性能提升对他们来说尤其重要。”Matt 说道。
根据 Matt 说法,删除 jQuery 的本意是清理技术债。“它最初是为了支持浏览器而存在的,但随着时间的推移,情况发生了变化,所以 bits 可以被删除。我想在这之后会重新评估,看看还有什么是不再需要的。” Matt 表示。
jQuery 是一套跨浏览器的 JavaScript 库,可以简化 HTML 与 JavaScript 之间的操作。截至 2021 年,有将近 84% 的移动页面使用 jQuery。jQuery 是最受欢迎的 JavaScript 库之一,它的一些操作已经反映在标准 Web API 中。
JQuery 创建于 2006 年,主要是为了帮助开发者处理当时浏览器的不足。当时谷歌浏览器还未流行,人们饱受 Internet Explorer 之苦。而 JQuery 开发者可以使用 CSS 选择器和函数可以轻松地遍历和操作 DOM,
此外,JQuery 还提供了一些开箱即用的函数来做动画 DOM 元素,而无需弄乱 CSS。在没有 jQuery 之前发出 AJAX 请求很麻烦,但使用 JQuery 只需几行代码即可完成。JQuery 提供了一个可以在大多数浏览器上工作的 API,这在当时使用 JavaScript 是很难实现的。
但在过去的几年里,JavaScript 已经成熟了很多,它支持很多新的 API,其社区也构建了很多库来填补 jQuery 可能留下的任何空白。
现在,开发者几乎可以在原生 JavaScript 中做任何 jQuery 可以做的事情。例如,可以使用带有 querySelector 和 querySelectorAll 的 CSS 选择器语法来选择元素,使用 classList API 在元素上添加、删除和切换类,使用 addEventListener 将事件处理程序附加到 DOM 元素和窗口等等。
同时随着 Angular、Vue 和 React 等框架的出现和流行,一直未有特别创新的 jQuery 更显“老态”。“对我来说,他们 (jQuery ) 就像是那个随着时代变迁没有更新知识的老灰胡子。”有网友直言。
“现在,大多数事情都不再需要 jQuery 了。”有网友评论道,“我个人发现普通的 JS API 和 fetch 甚至比 jQuery 的东西更干净。人们仍然出于习惯使用 jQuery,是因为摆脱它需要做很多工作。”
近几年,业内对于“jQuery 是否已死”的讨论一直没停过。实际上,一些大型、资金充足的网站已经“用脚投票”,正在逐渐摆脱对 jQuery 的依赖。
2018 年,GitHub 宣布从 GitHub.com 的前端代码中完全移除了 jQuery。“早期,jQuery 对我们意义重大。”GitHub 前端工程团队在方式发布的文章里表示。“在 GitHub 的早期阶段,jQuery 让小型的开发团队能够快速进行原型设计并开发出新功能,而无需专门针对每个 Web 浏览器调整代码。”
但随着 GitHub 成长为一家拥有数百名工程师的公司,jQuery 带来的价值已经随着时间的推移而下降。比如技术债会随着依赖项的增多而增长,给企业带来很大的维护成本。因此,GitHub 最终决定删除 jQuery。不过,GitHub 没有选择另外的库或框架,而是使用标准的浏览器 API 来实现。
不只 GitHub,Bootstrap 最新版本也将删除 jQuery。
尽管被认为已经过时,但 jQuery 仍然是占主导地位的 JavaScript 库。今天的开发人员可能没有意识到在使用 jQuery,因为它被嵌入在了许多大型开源项目里面,其中最著名的就是 WordPress。
“大多数网站都不需要复杂的开发框架,它们大多是具有一些动态行为的静态网站,这种网站通常用 WordPress 编写。jQuery 在这个场景下仍然很流行,因为它既简单又有效,人们觉得没必要停止使用它。”jQuery 开发者 Micha Gobiowski-Owczarek 在接受外媒采访时说道。
Micha Gobiowski-Owczarek 也明确表示,为了不与浏览器冲突,jQuery 不会修改原生原型,而是用 jQuery 包装器对象包装 DOM 节点,每个操作都会创建一个新的包装器对象。大多数情况下,这并不重要,但对于具有大量 DOM 操作的、非常复杂的应用程序来说,可能会成为一个问题。
未来的很长一段时间里,jQuery 还继续会是 WordPress 的一部分,因为它很难在不破坏向后兼容性的情况下将它删除。但一些改变已经发生,如 WordPress 创建的 Gutenberg 编辑器不依赖于 jQuery。
随着时间的推移, WordPress 肯定会逐步更新技术,这是一个渐进的过程,jQuery 的最终去留也很难说。但不可否认的是,jQuery 为前端带来了重大的影响。
参考链接:
https://thenewstack.io/why-outdated-jquery-is-still-the-dominant-javascript-library/
jQuery是什么?
jQuery is a fast, small, and feature-rich JavaScript library — jQuery官方
jQuery官方解释的很清楚jQuery是一个快速、简洁、功能丰富的JavaScript库,重点在jQuery是一个库(library)
为什么jQuery是库?
库(library)就是一系列方法组成的集合,开发人员在使用库的过程中,想要什么功能就可以调用库中提供的对应方法就行。有点像图书馆中保存了各种类的图书,最近想要研究心理学,就可以在图书馆中查阅对应的书籍一个道理
jQuery就是一个js库,它里面就提供了很多的属性和方法供我们使用,
比如想操作样式,jQuery就提供了css等方法。比如想要制作一个动画,jQuery就提供了show()/slideDown()/animate()等方法。
例如:下面就相当于封装了一个简易的js库,当封装的方法一多就成了另外版本的jQuery
//数组转为字符串
function changStr(arr){
let str = arr.join(\’\’)
return str
}
//查找路径中的后缀名
function queryExtName(path){
let index = path.lastIndexOf(\’.\’)
let extname = path.substr( index + 1 )
return extname
}
库和框架的区别
库和框架都是别人编写的可复用代码, 都可以帮助我们快速的解决开发过程中出现的常见问题。但是两者之间还是存在着区别
3.1 框架和库的概念
库:library,简称lib。它是由一系列函数组成的集合,开发中想要什么功能就去调用库中提供的对应方法
框架:framework , 它是库的升级版,框架是为了解决同一类问题而制定的完整解决方案,只需按照它的规则去编写代码,框架会在适当的时机执行
3.2库和框架区别:
库和框架最大区别就是在于控制权,开发中谁站主导位置( you call Library Framework call you )
库:开发人员起来主导权力
库是没有主导权力,控制权在使用者手中,开发时库只是起了一个辅助作用,由开发人员说了算。开发人员起主导作用
框架:框架起了主导权力
使用框架开发时,有框架说了算,开发人员只能按照框架的语法进行编写,框架占有主导权力,开发人员会受到很多限制
库就相当于一个工具箱,里面有需要的各种工具,我们可以用这些工具给家里小孩制造出各种创意玩具。
框架就相当于我们在京东上买的乐高模型车,只需要按照图纸拼装好,喷上自己喜欢的颜色,贴上自己喜欢的贴纸就行。但是每个人拿在手里的乐高模型车都是一个样式,我们很难去改变它的结构样式
4.常见的库与框架
常见的库:
jQuery:是一个高效、精简并且功能丰富的 JavaScript 工具库
ramda:一款实用的 JavaScript 函数式编程库
lodash:是一个一致性,模块化,高性能的JavaScrip使用工具库
Moment:一个Javascript时间日期处理类库
DayJS:一个轻量级的Javascript时间日期处理类库
常见的框架:
Vue :是一套用于构建用户界面的渐进式框架。
angular:完全使用JavaScript编写的客户端技术。使Web应用开发比以往更简单、更快捷
Flutter:是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。
Taro:一套遵循React规范的多端统一开发框架(京东的凹凸实验室开发)
Chameleon:多端统一开发框架,一端所见即多端所见,你只需开发一次就能跑所有端(滴滴开发)
UIkit:是 YOOtheme 团队开发的一款轻量级、模块化的前端框架,可快速构建强大的web前端界面
layUI:是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式
Amaze UI:是一个轻量级Mobile first 的前端框架, 基于开源社区流行前端框架编写
jQuery 3.0 正式发布,兼容 Promises/A+
jQuery 3.0 正式发布,此版本从 2014 年 10 月份就开始开发,jQuery 团队想打造成轻量级的,速度更快,向后兼容的 jQuery 版本。此版本移除了所有旧版 IE 的方法,并且借鉴了一些现代 web APIs。如果用户想要继续支持 IE 6-8,请使用最新的 jQuery 1.12 版本。
为了更方便用户升级,jQuery 3.0 提供了全新的 3.0 升级指南,还有 jQuery Migrate 3.0 插件。
用户可以从 jQuery CDN 或者下面链接中下载最新文件:
https://code.jquery.com/jquery-3.0.0.js
https://code.jquery.com/jquery-3.0.0.min.js
或者从 npm 获取:
此外,发布了 jQuery Migrate 3.0:
https://code.jquery.com/jquery-migrate-3.0.0.js
https://code.jquery.com/jquery-migrate-3.0.0.min.js
更多从 jQuery 1.x/2.x 升级到 jQuery 3.0 的迁移问题请看 jQuery Migrate 1.4.1 博文。
更轻量的构建版本
jQuery 团队发布了一个更轻量的 “slim” 版本,不包括 ajax,动画效果和当前废弃的代码。有时候用户不需要 ajax,只要使用一些独立库就可以处理 ajax 请求。或者使用 CSS 和类操作的结合来制作 web 动画效果。jQuery 的性能得到了很大的提升,slim 构建版本比之前常规的构建小了 6k,也就是 23.6k vs 之前的 30k。 文件提供在 npm 和 CDN:
https://code.jquery.com/jquery-3.0.0.slim.js
https://code.jquery.com/jquery-3.0.0.slim.min.js
此外,jQuery 3.0 还兼容 jQuery UI 和 jQuery Mobile。
jQuery 3.0 主要改进
-
jQuery.Deferred 兼容 Promises/A+
-
Deferreds 新增 .catch() 方法
-
错误事例会抛出错误提示
-
移除废弃的事件别名,比如 , , 和
-
动画效果现在使用
-
加速一些 jQuery 自定义选择器
更多改进内容请看 jQuery 博客。
微信订阅号:开源派 (opensourcepie)
开源派官网:osp.io 作者:叶秀兰
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。