解释一下为什么我很少jQuery

happyhuangjinjin 发布于2019-08-21 11:30 / 3380人阅读

摘要：为什么有一个东西，叫，它是一个快速轻量级跨平台的框架。同时，它也是这个世界上最轻量级的框架没有之一它有多快如下我们在里引入比上面更快的方法是什么没有代码是的，就是没有代码，因为实在太强了，以至于所有的浏览器在年前内置了它。

这里声明一下，这不是反jQuery的文章，jQuery作为一个js库给大家的项目开发带来很多便利，但有时候仔细想想，我们真的需要jQuery吗？一年前的lpisme的主题的一个特色是没有jQuery，还是现在的Pinghsu主题，也是不用jQuery的。这里我想告诉大家，我持有的观点是在中小型的项目中建议能不用jQuery就不用。

背景知识

在所有的现代浏览器(IE9+)里，它们所提供的原生DOM API都是比jQuery快很多。为什么？

有一个东西，叫Vanilla JS，它是一个快速、轻量级、跨平台的JavaScript框架。几乎所有著名的互联网企业都使用它。

同时，它也是这个世界上最轻量级的javascript框架(没有之一),它有多快? 如下

我们在HTML里引入Vanilla JS：

比上面更快的方法是：

・

什么？没有代码？是的，就是没有代码，因为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-...

云服务器 GPU云服务器我参考一下流程什么云服务器好百度一下问我为什么为什么我的rds慢了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86778.html

一次发现underscore源码bug的经历以及对学术界拿来主义的思考

摘要：事情是如何发生的最近干了件事情，发现了源码的一个。楼主找到的关于和区别的资料如下关于拿来主义为什么这么多文章里会出现泽卡斯的错误代码楼主想到了一个词，叫做拿来主义。的文章，就深刻抨击了拿来主义这一现象。事情是如何发生的最近干了件事情，发现了 underscore 源码的一个 bug。这件事本身并没有什么可说的，但是过程值得我们深思，记录如下，各位看官仁者见仁智者见智。平时有浏览别...

Lionad-Morotar 2019-08-19 17:59 评论0 收藏0
Web技术的前世今生（二）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》平静的生活已经有一段日子了。这一天，HTML大哥面露不悦地走过来问我： Js，你是打算和我们分家吗？大哥，您这说的哪里话，我什么地方做的不对么？我一脸茫然地回答道。哼，...

Stardustsky 2019-08-30 15:55 评论0 收藏0
Web技术的前世今生（二）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》平静的生活已经有一段日子了。这一天，HTML大哥面露不悦地走过来问我： Js，你是打算和我们分家吗？大哥，您这说的哪里话，我什么地方做的不对么？我一脸茫然地回答道。哼，...

hyuan 2019-08-02 13:59 评论0 收藏0
Web技术的前世今生（二）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》平静的生活已经有一段日子了。这一天，HTML大哥面露不悦地走过来问我： Js，你是打算和我们分家吗？大哥，您这说的哪里话，我什么地方做的不对么？我一脸茫然地回答道。哼，...

justjavac 2019-08-23 14:19 评论0 收藏0