为什么说jQuery即将被淘汰?

发表于:2017-09-09

jquery

jQuery已经统治了十多年了,由于它的特性使得众多开发者喜欢(链式调用、选择元素、操作DOM、动画、ajax)等。

时代的变迁,技术的频繁更新,MVVM的到来,浏览器的迭代更新,一些标准语法问世,让一堆JS库和插件逐渐被淘汰使用。

现在已经是2018年了,据我了解还在使用jquery的人已经不到30%了,原因是被主流框架取而代之(react、vue、angular)等。


更新:

2018年7月25日 GitHub宣布前端将jQuery彻底删除,将使用原生语法代替。


下面收集了部分资料,发现jquery真的走不远了。

replaceWith

// jQuery语法
$('#el').replaceWith('这里需要替换的内容');
$('<h1>replaceAll</h1>').replaceAll($('#el'));         // 顺便说一下这个语法其实跟上面的一样,就是顺序不一样。

// js语法
el.replaceWith('这里需要替换的内容')

remove

// jquery
$('#el').remove();

// js
el.remove();

prepend,在子元素最前面插入内容

// jQuery
$('#el').prepend('helloworld')

// js,
el.prepend('hello world')
// 如果想插入HTML 就需要创建DOM节点了。
var el = document.getElementById('el');
var h1 = document.createElement('h1');
h1.textContent = '我是h1';
el.prepend(h1)

before 在当前元素前面插入

// jQuery
$('#el').before('helloworld')

// js
el.before('我在你前面')

closest 找到最近匹配的元素

// jQuery
$('#el').closest('div').text('我是最近的');

// js
el.closest('div').textContent = '我是最近的';

只绑定一次事件

// jQuery
$('#el').one('click', () => {
    console.log('你只能点击我一次')
})

// JS, 传统JS需要removeEventListener,现在只需要这么做。
var el = document.getElementById('el');
el.addEventListener('click', () => {
    console.log('你只能点击我一次')
}, {
    once: true
})

ajax请求

// jQuery
$.ajax({
    url: '/user',
    data: {
        username: 'admin'
    },
    dataType: 'json',
    success: function () {

    }
})

// JS
fetch('/user')
.then(res => res.json())
.then(data => {

})

fadeIn、show、slideDown 这些完全可以用CSS来完成。

现在也可以完全使用这些技术,只是看场景而已, 除非不考虑兼容性问题。

JavaScript