這里聲明一下，這不是反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/

參考

• https://hackernoon.com/you-tr...

• http://vanilla-js.com/

• https://jsperf.com/dm-jquery-...

總結

以上是生活随笔為你收集整理的解释一下为什么我很少jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。