【CSDN简介】7月17日，对于GitHub来说，这绝对是一件可以载入公司史册的大事件。
在今天的文章中，四位参与 jQuery 修订和废弃的 GitHub 工程师将首先介绍 GitHub 使用 jQuery 的历史背景，以及后来不再需要 jQuery 的原因，并解释 GitHub 如何不引入其他库或构架。 接下来，通过标准的浏览器API，来实现自己需要的功能。
首先为什么需要 jQuery
我们最近刚刚通过了一个里程碑，成功从 GitHub.com 的后端代码依赖项中删除了 jQuery。 这标志着多年的 jQuery 解耦工作一点点完成，我们终于可以完全删除该库了。
GitHub.com 在 2007 年底引入了 jQuery 1.2.1 作为依赖项。当时，距离 Google 发布第一个版本的 Chrome 浏览器还有一年的时间。
当时，还没有标准的方法来通过 CSS 选择器查询 DOM 元素，也没有标准的方法来实现元素的视觉动画。 Internet Explorer 提倡的 XMLHttpRequest 套接字与许多其他 API 一样，被用于各种浏览器中。 设备上的实现不一致。
jQuery 使得操作 DOM、定义动画和实现“AJAX”请求变得非常容易。 简而言之，它使 Web 开发人员能够创建更现代、更动态的效果。
最重要的是，在一种浏览器中适用的 jQuery 基本上也适用于其他浏览器。
在 GitHub 的早期，许多功能才刚刚起步，借助 jQuery，我们的小团队能够快速制作原型并推出新功能，而无需为每个 Web 浏览器调整代码。
我们还使用 jQuery 的简单套接字作为构建扩展库（pjax 和 Facebox）的新蓝图，这些扩展库后来成为 GitHub.com 后端其他部分的一部分。
我们永远感谢 John Resig 和其他 jQuery 贡献者创建和维护这个非常有用且具有历史意义的库。
后来的网络标准
这些年来，GitHub 已经成长为一家拥有数百名工程师的公司，并逐渐组建了一个独立的团队，负责我们发送到浏览器的 JavaScript 代码的规范和质量。
我们仍在监控技术声明，一些技术因这些依赖关系欠了钱，这些依赖关系曾经有价值，但随着时间的推移失去了价值。
至于 jQuery，我们将其与现代浏览器中快速发展的 Web 标准进行比较，发现：
而且，链式句型并不能满足我们直观地编写代码的需要。 例如：
$('.js-widget')
.addClass('is-loading')
.show()
这个句型很容易编造，但按照我们的标准，它并不能很好地传达作者的意图。 作者希望页面上只有一个 JS-Widget 元素，还是多个？
而且，如果我们在更改网页代码时不小心删除了JS-Widget类名，浏览器会不会形成异常，告诉我们发生了错误呢？
默认情况下，如果类名不匹配，jQuery 会默默地忽略整个表达式，但在我们看来，这种行为更多的是一个错误，而不是一个功能。
最后但并非最不重要的一点是，我们希望使用 Flow() 进行标记jquery 事件元素，以便我们可以在构建时实现静态类型检查。
但我们得出的结论是，链式句型不太适合静态分析，因为几乎所有 jQuery 函数都返回相同的类型。
我们选择 Flow 而不是其他库的原因是，当时像 @flow 弱模式这样的功能允许我们缓慢而有效地向大量几乎没有任何类型的代码添加类型。
总的来说，jQuery的解耦意味着我们可以更多地依赖Web标准，并使用MDN Web文档作为事实上的后端开发标准，方便以后维护代码灵活性jquery 事件元素，最终去掉一个30KB的依赖，提高页面加载率和 JavaScript 执行时间。
增量解耦
即使最终目标确定了，我们也不能简单地将所有资源都花在用原生 JS 重绘 jQuery 上。
一旦出了事，急功近利就会导致很多网站功能倒退，需要更多的时间来解决。 我们必须这样做：
设定衡量标准，跟踪jQuery调用次数占代码总行数的比例，随时监控衡量情况，确保不增不减，但不减少。
我们不鼓励在任何新代码中使用 jQuery。 为了减少使用自动化的工作量，我们创建了 eslint-plugin-jquery (#readme)，如果有人尝试使用 $.ajax 等 jQuery 功能，这也会导致 CI 检测失败。
旧代码中存在大量的 ESLint 规则违规，我们使用 eslint-disable 规则在代码注释中标记这些违规。 这使得早期代码审查和头脑风暴成为可能。
许多遗留代码显式耦合了两个 jQuery 插件 Pjax 和 Facebox 的外部套接字，因此我们在用原生 JS 替换它们的实现时尝试保持套接字不变。 静态检测使我们能够更加自信地进行构建。
许多旧代码与rails-behaviors() 接口，这是我们在Ruby on Rails 和JS 之间的适配器。 此套接字为特定表单添加 AJAX 生命周期处理程序。
// LEGACY APPROACH
$(document).on('ajaxSuccess', 'form.js-widget', function(event, xhr, settings, data) {
// insert response data somewhere into the DOM
})
为了防止不得不使用新的方法一次性重绘整个网站，我们采用了触发伪“*AJAX*”生命周期风暴的方法，让这个表单可以像以前一样继续异步提交内容，但是内部使用的是fetch()。
我们定制了一个jQuery，一旦我们觉得不再需要某个模块，我们就把它从定制版本中删除，让jQuery更加灵活。
例如，在删除最后一个 jQuery 特定的 CSS 伪类（:visible、:CheckBox 等）之后，我们删除了 Sizzle module(); 在用 fetch() 替换最后一个 $.ajax 调用之后，我们删除了 AJAX 模块。
这样做有两个目的，一是提高 JavaScript 执行速度，二是确保新功能不会使用已删除的功能。
根据站点访问分析的结果，我们将尽可能删除对旧版 Internet Explorer 版本的支持。 当某个 IE 版本的使用率下降到某个阈值以下时，我们将不再为其提供 JavaScript，以便我们可以专注于支持更现代的浏览器。
提前取消对IE8~9的支持，可以让我们使用更多原生浏览器功能，而不用强制Polyfill。
作为构建 GitHub.com 后端新方法的一部分，我们尽可能使用基本 HTML 来实现功能，仅使用 JavaScript 进行增量改进。
这样，即使 JS 用于 Web 表单和其他 UI 元素，它们也可以在禁用 JavaScript 的浏览器中运行。 在某些情况下，我们可以删除整个旧行为，而不是使用原生 JS 重新绘制。
通过这种方式（以及多年来积累的其他方式），我们能够逐渐减少对 jQuery 的依赖，直到没有一行代码使用它。
自定义元素
近年来最受关注的技术之一是 Custom Elements，它是一个浏览器原生的组件库，这意味着用户不需要下载、解析或编译任何框架。
自 2014 年以来，我们已经构建了一些 v0 大小的自定义元素。但是，我们没有深入研究它，因为当时 Web 标准还不清楚。
直到 2017 年，Web Components v1 大小发布，并且得到了 Chrome 和 Safari 的支持，我们才开始大规模使用自定义元素。
在 jQuery 迁移过程中，我们寻找适合提取到自定义元素中的部分。 例如，我们将使用 Facebox 显示对话框的代码更改为元素。
渐进式改进的思想也适用于自定义元素。 也就是说，我们尽量保留标签的内容，只在标签无法实现的地方添加新的行为。
例如，默认显示原始时间戳并转换为本地时区的时间； 如果嵌入到元素中，即使没有 JavaScript，它本身也是交互式的，但通过增强可用性的功能进行了增强。
下面是实现自定义元素的反例。
// The local-time element displays time in the user's current timezone
// and locale.
//
// Example:
// Sep 6, 2018
//
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方法会对这些操作与Web组件无关的DOM的代码造成很大的性能损失，所以不适合在生产环境中使用。
聚合物填料
我们在转换为标准浏览器功能期间使用了以下polyfill。 我们尝试仅在绝对必要时才使用polyfills - 即需要与旧版浏览器兼容时。
原来的：
作者：mislav、koddsson、muan、keithamus
