为什么github放弃jQuery

web前端发展了这么多年，jQuery可以说起着承上启下的作用，它的历史地位毋庸置疑，可以说很多小伙伴都是从jQuery开始成长的。但是时代在进步，在辉煌的王朝也终究有谢幕的一天。当数据驱动的概念被引入之后，3大主流框架作为后起之秀率先打开了前端的新大门，2018年7月17日，GitHub改版并放弃了jQuery， jQuery似乎离我们越来越远，但是如果我们彻底放弃jQuery，这些你真的都知道吗？

jQuery极大的方便了我们操作DOM，但是我们来看看github放弃jQuery的几个主要原因：

$(selector) 可以简单地用querySelectorAll()替换；

使用jQuery，我们可以方便快捷的选取DOM元素，例如

<div class="box">
    <span>111</span>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    console.log($('.box'))  //即可以轻松选择到dom
</script>

通过querySelectorAll或者querySelector来获取元素

<div class="box">
    <span>111</span>
</div>
<div class="box">
    <span>222</span>
</div>
<script>
    console.log(document.querySelector('.box'))  //<div class="box">...</div>
    console.log(document.querySelectorAll('.box'))  //NodeList(2) [div.box, div.box]
</script>

• tips：传统的还有通过id(getElementById)、name(getElementsByName)、标签(getElementsByTagName)、class(getElementsByClassName)四种，不过用的少，哈哈！querySelector()方法括号中的值是元素的选择器，可以是id(#)或者class(.)，此方法直接返回DOM对象本身。如果有多个相同的class，则返回的是第一个。那么当存在多个相同的class我们怎么办？ querySelectorAll()方法可以获取到了所有形同class的元素集合。如果单独找其中某项，例如上述第二个box则document.querySelectorAll('.box')[1]单上索引即可。

CSS类名切换，可以通过Element.classList实现；

jQuery中为我们封装了很多好用的方法，如hasClass()、addClass()、removeClass()等，如果脱离了jQuery，我们如何来实现，这里就用到了classList。

• add( String [, String] ) ： 添加指定的类，如果该类已存在，则会被忽略，对标jQuery的addClass()功能

<div class="box">
    <span>111</span>
</div>
<script>
    document.querySelector(".box").classList.add('box1')
    console.log(document.querySelector(".box"))  //<div class="box box1">...</div>
</script>

• remove( String [,String] ) ： 删除指定的类，其中移除一个不存在的类，不会报错，对标jQuery的removeClass()功能，不过误删这个类也不会报错

<div class="box box1">
    <span>111</span>
</div>
<script>
    document.querySelector(".box").classList.remove('box1')
    console.log(document.querySelector(".box"))  //<div class="box">...</div>
</script>

• toggle ( String [, true | false] ) ： 当只有一个参数时，干掉这个参数；当携带不是当前类名的参数时，则添加该参数为类，用法比较绕，可以看如下代码：

<style type="text/css">
div {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.box {
    background: red;
}
.box1 {
    background: blue;
}
</style>
<div class="box">
    <span>111</span>
</div>
<button id="button" onclick="myFunction()">切换样式</button>
<script>
function myFunction () {
    document.querySelector(".box").classList.toggle('box')  // 此处移除类box
    // 此处增加box1的类名，并且样式改变为box1，再次点击即移除box1，无则添加有则删除
    document.querySelector(".box").classList.toggle('box1')  
}
</script>

• replace( oldClass, newClass )用一个新类替换已有类。

<div class="box box1">
    <span>111</span>
</div>
<script>
// 记得不要加点
document.querySelector(".box").classList.replace("box1","box2")
console.log(document.querySelector(".box"))  //<div class="box box2">...</div>
</script>

• item(index)返回类名在元素中的索引值，索引值从 0 开始。如果索引值在区间范围外则返回 null

<div class="box box1 box2">
    <span>111</span>
</div>
<script>
// 返回class中第1个class类名
console.log(document.querySelector(".box").classList.item(1))  // box1
console.log(document.querySelector(".box").classList.item(4))  // null
</script>

• contains(class)返回布尔值，判断指定的类名是否存在。对标jQuery的hasClass()功能

<div class="box box1">
    <span>111</span>
</div>
<script>
// 判断是否有类名box1
console.log(document.querySelector(".box").classList.contains('box1'))  // true
console.log(document.querySelector(".box").classList.contains('box4'))  // false
</script>

使用 fetch 来代替 ajax

原生ajax请求相信没多少前端小伙伴能手写出来，然后jQuery进行封装之后大家写ajax方便了很多，只用$.ajax({})在进行对应的参数配置即可。然和如今原生DOM就封装了fetch给我们使用，并且fetch方法还能很好的支持跨域问题，关于fetch的用法小伙伴们可以看看这边文章 fetch，终于认识你。

使用 DOM 标准化写了 polyfill

好吧，一脸懵逼，polyfill是什么鬼？没听过，来百度一下：

• Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异。比如，html5的storage(session,local), 不同浏览器，不同版本，有些支持，有些不支持。Polyfill（Polyfill有很多，在GitHub`上https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills），帮你把这些差异化抹平，不支持的变得支持了（典型做法是在IE浏览器中增加 window.XMLHttpRequest ，内部实现使用 ActiveXObject。）

感觉这个答案应该不是我们想要的，但是我们可以通过其推断出，polyfill在以前大家都会封装一个公用库，就是解决各个浏览器兼容问题，而github通过使用最新的DOM标准打造全新的polyfill库来解决在各大浏览器造成的兼容难题，也充分说明了最新的DOM标准对兼容的支持越来越高啦！

使用了自定义元素。

用过现在流行新框架的童鞋们应该都了解，我们可以自己写组件然后通过自己指定标签名进行调用，例如我们在vue中会封装loading为公用组件，其他页面调用只需要import之后注册一下就可以直接使用<loading></loading>来进行全局调用。

原来原生DOM也可以自定义元素了，好吧，孤陋寡闻了。原来阮一峰老师17年就出过类似的文章，不愧是it界最会搞金融的大牛，永远走在最前端！想了解的点击传送门-HTML 自定义元素教程。