解释一下为什么我很少用jQuery

in Notes with 8 comments

这里声明一下,这不是反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 JSdocument.getElementById('test-table');12,137,211
Dojodojo.byId('test-table');5,443,343
Prototype JS$('test-table')2,940,734
Ext JSdelete Ext.elCache['test-table'];Ext.get('test-table');997,562
jQuery$jq('#test-table');350,557
YUIYAHOO.util.Dom.get('test-table');326,534
MooToolsdocument.id('test-table');78,802

根据标签名获取DOM元素

框架代码次数/秒
Vanilla JSdocument.getElementsByTagName("span");8,280,893
Prototype JSPrototype.Selector.select('span', document);62,872
YUIYAHOO.util.Dom.getElementsBy(function(){return true;},'span');48,545
Ext JSExt.query('span');46,915
jQuery$jq('span');19,449
Dojodojo.query('span');10,335
MooToolsSlick.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

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了,已经是火箭炮了,还要啥自行车呢?

参考

Responses
  1. 支持,小项目引用jquery却可能只用了一下,没必要。
    不过getElementsByClassName的用法好像兼容性不好吧。

    Reply
    1. @瑾瑜

      确实,http://caniuse.com/#search=getElementsByClassName

      Reply
  2. Derobukal

    作为一个后端,还是觉得 jQuery 挺好用的 🙃

    Reply
    1. @Derobukal

      当然好啊,方便省事耐操😗

      Reply
  3. Jack Chen

    😄 看一下支不支持表情

    Reply
    1. @Jack Chen

      支持!😎 😎

      Reply
  4. Jack Chen

    这算不算新开了一条鄙视链?

    Reply
    1. Chakhsu
      @Jack Chen

      这应该不算,各有各好 :)

      Reply