解释一下为什么我很少用jQuery
这里声明一下，这不是反jQuery的文章,这里我想告诉大家，我持有的观点是在中小型的项目中建议能不用jQuery就不用。
背景知识
在所有的现代浏览器(IE9+)里，它们所提供的原生DOM API都是比jQuery快很多。为什么？
有一个东西，叫Vanilla JS，是一个快速、轻量级、跨平台的JavaScript框架。几乎所有著名的互联网企业都使用它。
同时，它也是这个世界上最轻量级的javascript框架(没有之一),它有多快? 如下
我们在HTML里引入Vanilla JS：
<script src="path/to/vanilla.js"></script>比上面更快的方法是：
什么？没有代码？是的，就是没有代码，因为Vanilla JS实在太强了，以至于所有的浏览器在10年前内置了它。
所以，我们平时吹牛逼说的什么原生js的实现，用到什么原生API，都是来自于Vanilla JS
性能比较
在这里，我们用原生API和各种库进行性能对比，数据来源请看参考
框架 | 代码 |
|---|---|
Vanilla JS | document.getElementById('test-table'); |
Dojo | dojo.byId('test-table'); |
Prototype JS | $('test-table') |
Ext JS | delete Ext.elCache['test-table'];Ext.get('test-table'); 997,562 |
jQuery | $jq('#test-table'); |
MooTools | document.id('test-table'); |
常用对比
下面是一些常用的jQuery方法，以及它们在原生JavaScript中的对应方法。
Document Ready
// jQuery
$(document).ready(readyCb);
or
$(readyCb);
// VanillaJs
function docReady(cb) {
if (document.readyState != 'loading'){
cb();
} else {
document.addEventListener('DOMContentLoaded', cb);
}
}
docReady(readyCb);Selectors
更多Selector的性能表现请看这里：[][2]
或者你直接看下面的典型例子
Class Selector
// jQuery
const items = $('.item');
// VanillaJS
const items = document.getElementsByClassName('item');ID Selector
// jQuery
const item = $('#item');
// VanillaJS
const item = document.getElementById('item');Query Selector
// jQuery
const items = $('.list .item');
const lastItem = $('.item:last-item');
// VanillaJS
const items = document.querySelectorAll('.list .item');
const lastItem = document.querySelector('.item:last-item');Each or forEach
// jQuery
$('.item').each(function(index, element) {
console.log(element);
});
// VanillaJS
function each(nodeList, cb) {
for(var i = 0; i < nodeList.length;i++) {
cb(nodeList[i], i, nodeList);
}
}
each(document.getElementsByClassName('item'), function(node, i) {
console.log(node);
});
// Another Vanilla forEach
Array.prototype.forEach.call(document.querySelectorAll('.item'), function(node, i){
console.log(node);
});Adding/Removing Classes
// jQuery
const item = $('#item')
item.addClass('new-class');
item.removeClass('new-class');
// VanillaJS
const item = document.getElementById('item');
item.classList.add('new-class');
item.classList.remove('new-class');Show/Hide Elements
// jQuery
const item = $('#item');
item.hide();
item.show();
// VanillaJS
const item = document.getElementById('item');
item.style.display = 'none';
item.style.display = '';AJAX
代替$.ajax你有下面几种方法
XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
// response can be used here
});
xhr.open('GET', 'url');
xhr.send();其他
如果你需要查看更多例子，可以访问：here
结语
在浏览器野蛮生长的年代，jQuery作为一种工具在当时几乎是必需的。但随着浏览器们越来越标准化，浏览器之间的API差别也在减少，并且通过版本迭代也会更快地支持，我们可以更好地用原生API做更高效的事。这里不是说jQuery不好，只是我们做项目的时候，不应该把它作为默认。我们都有Vanilla JS了，已经是火箭炮了，还要啥自行车呢？
参考
- vanilla-js.com/
- hackernoon.com/you-truly-dont-need-jquery-5f2132b32dd1#.k94vnjo64
- jsperf.com/dm-jquery-vs-vanilla-selectors
Last modification：May 15th, 2018 at 06:12 pm
© The copyright belongs to the author
Support
If you think my article is useful to you, please feel free to appreciate
×Close
Appreciate the author
Sweeping payments
Pay by AliPay
Pay by WeChat
腾讯云开发者
