♨️ ⛹🏻 🗻 Opção de migração do jQuery para o javascript puro 🌡️ 🏴 🌻

A biblioteca JQuery foi criada em 2006 para compensar a funcionalidade Javascript ausente. Desde então, o último avançou o suficiente em seu desenvolvimento para que os desenvolvedores possam ficar sem o jQuery, cujo principal problema é o desempenho.

Em Habré, havia vários artigos com medidas objetivas de "inibição" do JQuery em consultas de seletor.

`// jQuery 2.0 var c = $("#comments .comment");`	4.649 ms
`// jQuery 2.0 var c = $(".comment");`	3.437 ms
`// native querySelectorAll var c = document.querySelectorAll("#comments .comment");`	1.362 ms
`// native querySelectorAll var c = document.querySelectorAll(".comment");`	1.168 ms
`// native getElementById / getElementsByClassName var n = document.getElementById("comments"); var c = n.getElementsByClassName("comment");`	107 ms
`// native getElementsByClassName var c = document.getElementsByClassName("comment");`	75 ms

(executado em um ciclo de 10.000 vezes)

Existem muitas descrições boas de análogos de funções jQuery em Javascript-e puro na rede - por exemplo, aqui .

Mas o próprio poder do jQuery está na concisão e na beleza de suas expressões. É até psicologicamente difícil reescrever o código existente, alterando $ () elegante para construções de várias linhas.

Vamos tentar deixar a linguagem JQuery o mais longe possível, substituindo-a parcialmente. Para fazer isso, precisamos apenas redefinir a função $ () ou substituir (o que é melhor) pela nossa - seja $ jqr (). Ele também retornará um objeto, mas já "nativo" e não sobrecarregado com funções jQuery que não precisamos.

Exemplo de código:

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

Código JQuery:

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

Alterações para:

 $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; } } }

É desejável analisar sel no construtor da classe para usar com mais eficiência o querySelectorAll (), getElementsByClassName () e getElementById ().

Assim, podemos implementar na classe JQR apenas as funções que precisamos, sem ir além do Javascript padrão e sem tocar muito no código existente.

Nem é necessário se livrar completamente do jQuery - a otimização parcial já produzirá um resultado.

Opção de migração do jQuery para o javascript puro

More articles: