[关闭]
@qinyun 2018-09-10T11:42:58.000000Z 字数 4060 阅读 1389

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

未分类


最近,我们将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标准的快速演化进行比较:

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

  1. $('.js-widget')
  2. .addClass('is-loading')
  3. .show()

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

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

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

逐步解耦

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

  1. // 旧方法
  2. $(document).on('ajaxSuccess', 'form.js-widget', function(event, xhr, settings, data) {
  3. // 将响应数据插入到DOM中
  4. })

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

自定义元素

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

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

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

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

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

  1. // local-time根据用户的当前时区显示时间。
  2. //
  3. // 例如:
  4. // <local-time datetime="2018-09-06T08:22:49Z">Sep 6, 2018</local-time>
  5. //
  6. class LocalTimeElement extends HTMLElement {
  7. static get observedAttributes() {
  8. return ['datetime']
  9. }
  10. attributeChangedCallback(attrName, oldValue, newValue) {
  11. if (attrName === 'datetime') {
  12. const date = new Date(newValue)
  13. this.textContent = date.toLocaleString()
  14. }
  15. }
  16. }
  17. if (!window.customElements.get('local-time')) {
  18. window.LocalTimeElement = LocalTimeElement
  19. window.customElements.define('local-time', LocalTimeElement)
  20. }

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

英文原文

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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注