解釋一下爲何我不多jQuery

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