【AICon】 如何构建高效的 RAG 系统?RAG 技术在实际应用中遇到的挑战及应对策略?>>> 了解详情
写点什么

GitHub:我们为什么会弃用 jQuery?

  • 2018-09-15
  • 本文字数:3384 字

    阅读完需:约 11 分钟

我们最近完成了一个里程碑,将 jQuery 完全从 GitHub.com 的前端代码中移除。这标志着我们数年来逐步移除 jQuery 这个渐进式的过程终于结束了,我们现在已经完全移除了这个库。这篇文章将介绍我们是如何依赖上 jQuery 的,以及后来我们意识到不再需要它,到最后我们并没有使用另一个库或框架取代它,而是使用标准的浏览器 API 实现了我们所需要的一切。

为什么在早期 jQuery 对我们来说是有意义的

GitHub.com 在 2007 年底开始使用 jQuery 1.2.1。那是谷歌发布 Chrome 浏览器的前一年。当时还没有通过 CSS 选择器来查询 DOM 元素的标准方法,也没有动态渲染元素的样式的标准方法,而 Internet Explorer 的 XMLHttpRequest 接口与其他很多 API 一样,在浏览器之间存在不一致性问题。

jQuery 让 DOM 操作、创建动画和“AJAX”请求变得相当简单——基本上,它让 Web 开发人员能够创建更加现代化的动态 Web 体验。最重要的是,使用 jQuery 为一个浏览器开发的代码也适用于其他浏览器。在 GitHub 的早期阶段,jQuery 让小型的开发团队能够快速进行原型设计并开发出新功能,而无需专门针对每个 Web 浏览器调整代码。

基于 jQuery 简单的接口所构建的扩展库也成为 GitHub.com 前端的基础构建块:pjax( https://github.com/defunkt/jquery-pjax )和 facebox( https://github.com/defunkt/facebox )。

我们将永远不会忘记 John Resig 和 jQuery 贡献者创建和维护的这样一个有用的基本库。

后来的 Web 标准

多年来,GitHub 成长为一家拥有数百名工程师的公司,并逐渐成立了一个专门的团队,负责 JavaScript 代码的规模和质量。我们一直在排除技术债务,有时技术债务会随着依赖项的增多而增长,这些依赖项在一开始会为我们带来一定的价值,但这些价值也随着时间的推移而下降。

我们可以将 jQuery 与现代浏览器支持的 Web 标准的快速演化进行比较:

  • $(selector) 模式可以使用 querySelectorAll() 来替换 ;
  • 现在可以使用 Element.classList 来实现 CSS 类名切换 ;
  • CSS 现在支持在样式表中而不是在 JavaScript 中定义可视动画 ;
  • 现在可以使用 Fetch Standard 执行 $.ajax 请求 ;
  • addEventListener() 接口已经足够稳定,可以跨平台使用 ;
  • 我们可以使用轻量级的库来封装事件委托模式 ;
  • 随着 JavaScript 语言的发展,jQuery 提供的一些语法糖已经变得多余。

另外,链式语法不能满足我们想要的编写代码的方式。例如:

复制代码
$('.js-widget')
.addClass('is-loading')
.show()

这种语法写起来很简单,但是根据我们的标准,它并不能很好地传达我们的意图。作者是否期望在当前页面上有一个或多个 js-widget 元素?另外,如果我们更新页面标记并意外遗漏了 js-widget 类名,浏览器是否会抛出异常会告诉我们出了什么问题?默认情况下,当没有任何内容与选择器匹配时,jQuery 会跳过整个表达式,但对我们来说,这是一个 bug。

最后,我们开始使用 Flow 来注解类型,以便在构建时执行静态类型检查,并且我们发现,链式语法不适合做静态分析,因为几乎所有 jQuery 方法返回的结果都是相同的类型。我们当时之所以选择 Flow,是因为 @flow weak 模式等功能可以让我们逐步将类型应用于无类型的代码库上。

总而言之,移除 jQuery 意味着我们可以更多地依赖 Web 标准,让 MDN Web 文档成为前端开发人员事实上的默认文档,在将来可以维护更具弹性的代码,并且可以将 30KB 的依赖从我们的捆绑包中移除,加快页面的加载速度和 JavaScript 的执行速度。

逐步解耦

虽然定下了最终目标,但我们也知道,分配所有资源一次性移除 jQuery 是不可行的。这种匆匆忙忙的做法可能会导致网站功能出现回归。相反,我们采取了以下的策略:

  • 设定指标,跟踪整一行代码调用 jQuery 的比率,并监控指标走势随时间变化的情况,确保它保持不变或下降,而不是上升。
  • 我们不鼓励在任何新代码中导入 jQuery。为了方便自动化,我们创建了 eslint-plugin-jquery( https://github.com/dgraham/eslint-plugin-jquery ),如果有人试图使用 jQuery 功能,例如 $.ajax,CI 检查将会失败。
  • 旧代码中存在大量违反 eslint 规则的情况,我们在代码注释中使用特定的 eslint-disable 规则进行了注解。看到这些代码的读者,他们都该知道,这些代码不符合我们当前的编码实践。
  • 我们创建了一个拉请求机器人,当有人试图添加新的 eslint-disable 规则时,会对拉取请求留下评论。这样我们就可以尽早参与代码评审,并提出替代方案。
  • 很多旧代码使用了 pjax 和 facebox 插件,所以我们在保持它们的接口几乎不变的同时,在内部使用 JS 重新实现它们的逻辑。静态类型检查有助于提升我们进行重构的信心。
  • 很多旧代码与 rails-behavior 发生交互,我们的 Ruby on Rails 适配器几乎是“不显眼的”JS,它们将 AJAX 生命周期处理器附加到某些表单上:
复制代码
// 旧方法
$(document).on('ajaxSuccess', 'form.js-widget', function(event, xhr, settings, data) {
// 将响应数据插入到 DOM 中
})

我们选择触发假的 ajax* 生命周期事件,并保持这些表单像以前一样异步提交内容,而不是立即重写所有调用,只是会在内部使用 fetch()。

  • 我们自己维护了 jQuery 的一个版本,每当发现我们不再需要 jQuery 的某个模块的时候,就会将它从自定义版本中删除,并发布更轻量的版本。例如,在移除了 jQuery 的 CSS 伪选择器之后(如:visible 或:checkbox)我们就可以移除 Sizzle 模块了,当所有的 $.ajax 调用都被 fetch() 替换时,就可以移除 AJAX 模块。这样做有两个目的:加快 JavaScript 执行速度,同时确保不会有新代码试图使用已移除的功能。
  • 我们根据网站的分析结果尽快放弃对旧版本 Internet Explorer 的支持。每当某个 IE 版本的使用率低于某个阈值时,我们就会停止向它提供 JavaScript 支持,并专注支持更现代的浏览器。尽早放弃对 IE 8 和 IE 9 的支持对于我们来说意味着可以采用很多原生的浏览器功能,否则的话有些功能很难通过 polyfill 来实现。
  • 作为 GitHub.com 前端功能开发新方法的一部分,我们专注于尽可能多地使用常规 HTML,并且逐步添加 JavaScript 行为作为渐进式增强。因此,那些使用 JS 增强的 Web 表单和其他 UI 元素通常也可以在禁用 JavaScript 的浏览器上正常运行。在某些情况下,我们可以完全删除某些遗留的代码,而不需要使用 JS 重写它们。

经过多年的努力,我们逐渐减少对 jQuery 的依赖,直到没有一行代码引用它为止。

自定义元素

近年来一直在炒作一项新技术,即自定义元素——浏览器原生的组件库,这意味着用户无需下载、解析和编译额外的字节。

从 2014 年开始,我们已经基于 v0 规范创建了一些自定义元素。然而,由于标准仍然在不断变化,我们并没有投入太多精力。直到 2017 年,Web Components v1 规范发布,并且 Chrome 和 Safari 实现了这一规范,我们才开始更广泛地采用自定义元素。

在移除 jQuery 期间,我们也在寻找用于提取自定义元素的模式。例如,我们将用于显示模态对话框的 facebox 转换为元素( https://github.com/github/details-dialog-element )。

我们的渐进式增强理念也延伸到了自定义元素上。这意味着我们将尽可能多地保留标记内容,然后再标记上添加行为。例如,默认显示原始时间戳,它被升级成可以将时间转换为本地时区,而对于,当它被嵌在

元素中时,可以在不使用 JavaScript 的情况下具备交互性,它被升级成具有辅助增强功能。

以下是实现自定义元素的示例:

复制代码
// local-time 根据用户的当前时区显示时间。
//
// 例如:
// <local-time datetime="2018-09-06T08:22:49Z">Sep 6, 2018</local-time>
//
class LocalTimeElement extends HTMLElement {
static get observedAttributes() {
return ['datetime']
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === 'datetime') {
const date = new Date(newValue)
this.textContent = date.toLocaleString()
}
}
}
if (!window.customElements.get('local-time')) {
window.LocalTimeElement = LocalTimeElement
window.customElements.define('local-time', LocalTimeElement)
}

我们很期待 Web 组件的 Shadow DOM。Shadow DOM 的强大功能为 Web 带来了很多可能性,但也让 polyfill 变得更加困难。因为使用 polyfill 会导致性能损失,因此在生产环境中使用它们是不可行的。

英文原文: https://githubengineering.com/removing-jquery-from-github-frontend/

感谢覃云对本文的审校。

2018-09-15 11:038354
用户头像

发布了 731 篇内容, 共 430.5 次阅读, 收获喜欢 1995 次。

关注

评论

发布
暂无评论
发现更多内容

图像搜索是什么

Geek_e369a5

图像搜索 图像搜索是什么

第二届征文大赛开奖啦!速来领奖!

InfoQ写作社区官方

热门活动 初夏征文

搭建在线帮助中心,轻松帮助客户解决问题

小炮

APICloud可视化开发丨一键生成专业级源码

YonBuilder低代码开发平台

App 低代码 可视化 APICloud 移动端开发

ServerLess Aws Lambda攻击与横向方法研究

火线安全

云安全

想加盟自助洗车不知道一般啥流程

共享电单车厂家

自助洗车加盟

传统企业在进行信息化升级的过程中,如何做好信息化顶层设计

WorkPlus

Flutter在数字生活的发展与天翼云盘落地实践

flutter 架构 混合应用开发 移动开发 客户端

改变世界的开发者丨玩转“俄罗斯方块”的瑶光少年

华为云开发者联盟

人工智能 华为云 俄罗斯方块

APICloud可视化开发新手图文教程

YonBuilder低代码开发平台

App APICloud 低代码开发 移动端开发 可视化开发

Vue-5-模板语法-2

Python研究所

前端 6月月更

李飞飞:我更像物理学界的科学家,而不是工程师|深度学习崛起十年

OneFlow

人工智能 深度学习 李飞飞 ImageNet

华为云鲲鹏DevKit代码迁移实战

乌龟哥哥

6月月更

推开混合云市场大门,Lenovo xCloud的破局之道

脑极体

如何使用物联网低代码平台进行工作表管理?

AIRIOT

低代码 物联网 低代码开发平台

仅需三步学会使用低代码ThingJS与森数据DIX数据对接

ThingJS数字孪生引擎

可视化 数字孪生

掌握高性能计算前,我们先了解一下它的历史

华为云开发者联盟

华为云 高性能计算 处理器

一文带你了解J.U.C的FutureTask、Fork/Join框架和BlockingQueue

华为云开发者联盟

Java 开发 华为云

数据的软删除—什么时候需要?又如何去实现?

翊君

6月月更

Spark ShuffleManager

布兰特

大数据 spark

flutter系列之:UI layout简介

程序那些事

flutter 程序那些事 6月月更

新思科技助力以色列Visuality Systems推进安全“左移”

InfoQ_434670063458

软件开发 代码 新思科技 安全测试 安全左移

Linux 之父亮相,OpenCloudOS 社区开放日来了

腾讯安全云鼎实验室

APICloud 5月SDK发版说明

YonBuilder低代码开发平台

App 低代码 APICloud 可视化开发

攻防演练 | 网络安全“吹哨人”:安全监控

青藤云安全

网络安全 主机安全 攻防演练

【6.3-6.10】精彩博文回顾

InfoQ写作社区官方

优质创作周报

2022 年 DevOps 路线图|Medium

观测云

【愚公系列】2022年06月 面向对象设计原则(五)-接口隔离原则

愚公搬代码

6月月更

新思科技在《 2022 年 Gartner® 应用安全测试关键能力报告》中表现优异 在五个常见用例中荣获最高分

InfoQ_434670063458

新思科技 Gartner 应用安全测试

为什么要开发分布式操作系统

LAXCUS分布式操作系统

分布式计算 分布式存储 超算 云边端协同 分布式操作

首批!青藤通过信通院CWPP能力评估检验

青藤云安全

网络安全 主机安全 信通院

GitHub:我们为什么会弃用jQuery?_GitHub_GitHub前端工程团队_InfoQ精选文章