Opci贸n de migraci贸n de jQuery a javascript puro

La biblioteca JQuery fue creada en 2006 para compensar la falta de funcionalidad de Javascript. Desde entonces, este 煤ltimo ha avanzado lo suficiente en su desarrollo para que los desarrolladores puedan prescindir de jQuery, cuyo principal problema es el rendimiento.



En Habr茅 hab铆a varios art铆culos con mediciones objetivas de "inhibici贸n" de JQuery en consultas de selector.
// 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
(correr en un ciclo de 10,000 veces)

Hay bastantes buenas descripciones de an谩logos de funciones jQuery en Javascript-e puro en la red, por ejemplo, aqu铆 .

Pero el mismo poder de jQuery reside en la concisi贸n y belleza de sus expresiones. Incluso es psicol贸gicamente dif铆cil reescribir el c贸digo existente, cambiando elegantes $ () a construcciones de varias l铆neas.

Intentemos dejar el lenguaje JQuery lo m谩s lejos posible, [parcialmente] reemplaz谩ndolo por s铆 mismo. Para hacer esto, solo necesitamos redefinir la funci贸n $ (), o reemplazar (que es mejor) con la nuestra, que sea $ jqr (). Tambi茅n devolver谩 un objeto, pero ya "nativo" y no cargado con funciones jQuery que no necesitamos.

Ejemplo de c贸digo:

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

C贸digo JQuery:

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

Cambios a:

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

Es deseable analizar sel en el constructor de la clase para utilizar de manera m谩s eficiente querySelectorAll (), getElementsByClassName () y getElementById ().

Por lo tanto, podemos implementar en la clase JQR solo las funciones que necesitamos, sin ir m谩s all谩 del Javascript est谩ndar y sin tocar mucho el c贸digo existente.

Ni siquiera es necesario deshacerse por completo de jQuery: la optimizaci贸n parcial ya dar谩 un resultado.

Source: https://habr.com/ru/post/es419471/


All Articles