这里声明一下，这不是反jQuery的文章，jQuery作为一个js库给人人的项目开辟带来许多方便，但有时刻细致想一想，我们真的须要jQuery吗？一年前的lpisme的主题的一个特征是没有jQuery，照样如今的Pinghsu主题，也是不必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和种种库举行机能对照，数据泉源请看参考
依据ID猎取DOM元素
| 框架 | 代码 | 次数/秒 |
|---|---|---|
| Vanilla JS | document.getElementById(‘test-table’); | 12,137,211 |
| Dojo | dojo.byId(‘test-table’); | 5,443,343 |
| Prototype JS | $(‘test-table’) | 2,940,734 |
| Ext JS | delete Ext.elCache[‘test-table’];Ext.get(‘test-table’); | 997,562 |
| jQuery | $jq(‘#test-table’); | 350,557 |
| YUI | YAHOO.util.Dom.get(‘test-table’); | 326,534 |
| MooTools | document.id(‘test-table’); | 78,802 |
依据标署名猎取DOM元素
| 框架 | 代码 | 次数/秒 |
|---|---|---|
| Vanilla JS | document.getElementsByTagName(“span”); | 8,280,893 |
| Prototype JS | Prototype.Selector.select(‘span’, document); | 62,872 |
| YUI | YAHOO.util.Dom.getElementsBy(function(){return true;},’span’); | 48,545 |
| Ext JS | Ext.query(‘span’); | 46,915 |
| jQuery | $jq(‘span’); | 19,449 |
| Dojo | dojo.query(‘span’); | 10,335 |
| MooTools | Slick.search(document, ‘span’, new Elements); | 5,457 |
Done,Vanilla JS all win~
经常使用对照
下面是一些经常使用的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的机能表现请看这里：here
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(XHR)
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
// response can be used here
});
xhr.open('GET', 'url');
xhr.send();Fetch
大多数的主流浏览器都支撑Fetch要领，你能够用 polyfills 让更多浏览器支撑
你也能够在 CanIUse 里能够检察更多浏览器支撑状况
fetch(’url’)
.then(function (response) {})
.catch(function (error) {});假如你须要检察更多例子，能够接见here
结语
在浏览器蛮横发展的年代，jQuery作为一种东西在当时险些是必须的。但随着浏览器们愈来愈标准化，浏览器之间的API差异也在削减，而且经由过程版本迭代也会更快地支撑，我们能够更好地用原生API做更高效的事。这里不是说jQuery不好，只是我们做项目的时刻，不应该把它作为默许。我们都有Vanilla JS了，已经是火箭炮了，还要啥自行车呢？
感谢人人浏览，迎接接见我的博客：https://www.linpx.com/
