💌 🍢 🦅 从jQuery到纯JavaScript的迁移选项 👩‍🎤 👩‍👦‍👦 🗽

JQuery库创建于2006年，以弥补缺少的Javascript功能。从那时起，后者在开发方面已经取得了足够的进步，因此开发人员可以不用jQuery，而jQuery的主要问题是性能。

在Habré上，有几篇文章客观地衡量了JQuery对选择器查询的“抑制”。

`// jQuery 2.0 var c = $("#comments .comment");`	4,649毫秒
`// jQuery 2.0 var c = $(".comment");`	3,437毫秒
`// native querySelectorAll var c = document.querySelectorAll("#comments .comment");`	1,362毫秒
`// native querySelectorAll var c = document.querySelectorAll(".comment");`	1,168毫秒
`// native getElementById / getElementsByClassName var n = document.getElementById("comments"); var c = n.getElementsByClassName("comment");`	107毫秒
`// native getElementsByClassName var c = document.getElementsByClassName("comment");`	75毫秒

（以10,000次循环运行）

网络上的纯Javascript-e上有很多关于jQuery函数类似物的很好的描述-例如，在这里。

但是jQuery的强大功能在于其表达的简洁性和美感。从心理上讲，要重写现有代码，将优雅的$（）更改为多行构造，甚至在心理上都是困难的。

让我们尝试尽可能保留JQuery语言，[部分]替换它本身。为此，我们只需要重新定义$（）函数，或用我们自己的函数替换（更好）-使其成为$ jqr（）。它还将返回一个对象，但已经是“本机”对象，并且不会负担我们不需要的jQuery函数。

代码示例：

 <html> <body> <p id="message"></p> </body> </html>

jQuery代码：

 $("#message").html("Hello world!");

更改为：

 $jqr("#message").html("Hello world!"); // JQuery Replacement function $jqr(sel) { return new JQR(sel); } class JQR { constructor(sel) { this.sel = sel; this.elements = document.querySelectorAll(sel); } html(str) { for (var i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = str; } } }

希望在类构造函数中解析sel，以便更有效地使用querySelectorAll（），getElementsByClassName（）和getElementById（）。

因此，我们可以仅在JQR类中实现所需的功能，而无需超出标准Javascript且无需过多地接触现有代码。

甚至没有必要完全摆脱jQuery，部分优化已经可以产生结果。

从jQuery到纯JavaScript的迁移选项

More articles: