0

Conoce las novedades en jQuery 3

1307Puntos

hace 5 años

El pasado 9 de junio de 2016 se anunció el lanzamiento oficial y estable de jQuery 3.0 (seguido hace unos días de jQuery 3.1.0). Esta versión se ha venido trabajando desde octubre del 2014 y sus desarrolladores encabezados por John Resig se enfocaron en hacerla más ligera y rápida. Cabe mencionar que a partir de ahora las versiones 1.12 y 2.2 de jQuery no recibirán nada más que parches críticos, y solo durante algún tiempo. Por lo tanto, jQuery 3 es el presente y futuro de la librería JavaScript más popular Si necesitas actualizar a 3.0 no dudes en consultar la guía oficial para hacerlo sin problemas; pero antes que nada, vamos a ver las novedades más destacadas de esta versión:

Adiós al redondeo de width() y height()

En versiones anteriores el cálculo que realizaba jQuery para dar un ancho o un alto no era muy preciso, porque siempre devolvía números enteros. Por ejemplo si dividíamos en 6 partes un contenedor que tenía 1000 px de ancho:

<div class="contenedor">
   <div class="col-1">Platzi es la mejor plataforma de educación en linea</div>
   <div class="col-2">Desarrollo Back-end</div>
   <div class="col-3">Desarrollo Front-end</div>
   <div class="col-4">Marketing Digital</div>
   <div class="col-5">SEO</div>
   <div class="col-6">Lean UX</div>
</div>

Luego obteníamos el ancho del contenedor con el método width() :

$('.contenedor div').width();

El resultado de más o menos 166.6666666666667 px de ancho se redondeaba a 167 px para cada columna, o un total de 1002 px. Esto se ha corregido obteniendo así una mejor precisión en el redondeo de los números decimales, y por lo tanto en el aspecto de nuestras páginas. Esta mejora también vale para el método height().

edit_a

Métodos descontinuados o removidos

En esta versión se decidió quitar o hacer obsoletos algunos métodos:

  • .load(), .unload() y .error()
  • .context() y .selector()
  • .bind(),.unbind(), .delegate() y .undelegate() - descontinuados, usar .on() y .off()
  • jQuery.swap, jQuery.buildFragment y jQuery.domManip
  • jQuery.parseJSON() - descontinuado, usar JSON.parse()
  • $(document).on("ready", fn) - usar $(fn);
  • .event.pageX y .event.pageY
  • .event.props y .event.fixHooks

Cabe resaltar que algunos métodos siguen funcionando en jQuery 3, pero se consideran obsoletos ("deprecated"). Se especula que probablemente en la versión 4 de jQuery se supriman del core de jQuery para quizás reemplazarlos por nuevos métodos si todavía no es el caso.

Cambio para los nombres en data()

Se trata de una estandardización interesante al nivel sintáctico, por ejemplo en versiones anteriores si teníamos la siguiente estructura:

<div id="contenedor"></div>

Luego escribíamos el siguiente código:

var $elem = $('#contenedor');

$elem.data({
   'mi-propiedad': 'hola Platzi'
});

console.log($elem.data());

Obteníamos la siguiente estructura:

{mi-propiedad: "hola Platzi"}

Ahora en jQuery 3 obtenemos lo siguiente:

{miPropiedad: "hola Platzi"}

Podemos ver que ahora nos muestra miPropiedad sin el guión en medio y con una estructura Camel Case, un formato más estándar,  lo que es más coherente y cómodo para nosotros desarrolladores.

Bucle FOR... of

Se introduce una manera más sencilla de mostrar datos con el bucle for... of, por ejemplo en versiones anteriores escribíamos:

var $postres = $('input');

for(var i = 0; i < $postres.length; i++) {
   $postres[i].id = 'input-' + i;
}

Ahora en jQuery 3 podemos escribir:

var $postres = $('input');
var i = 0; 
 
for(var input of $postres) {
   input.id = 'input-' + i++;
}

Esta forma de iterar mejora la forma de realizar operaciones mediante una colección en jQuery.

Métodos retirados de Ajax

Los siguientes métodos especiales para el trabajo con Ajax dentro de jQuery han sido eliminados y reemplazados:

  • jqXHR.success()
  • jqXHR.error()
  • jqXHR.complete()

En vez de ellos, ahora puedes usar:

  • jqXHR.done()
  • jqXHR.fail()
  • jqXHR.always()

Estos nuevos métodos han sido mejorados para obtener una respuesta más rápida a las peticiones y evitar conflictos con los navegadores, entre otras características.

Manipulación de archivos SVG

Los desarrolladores encargados del core de jQuery no habían dado importancia a los archivos SVG (Scalable Vector Graphics), pero actualmente se está comenzando a usar mucho este formato de archivos en muchas áreas. Es por eso que los métodos .addClass() y .hasClass() ahora tienen soporte para la manipulación de archivos SVG.

//addClass()
$("#mi_svg").addClass("selected highlight");

//hasClass()
$("#mi_svg").hasClass("active");

Con esta versión, jQuery pretende empezar a mejorar la interacción de JavaScript con los archivos SVG, aunque todavía no llega a soportarlos completamente. En próximas versiones podemos esperar que se incorporen nuevas características que cambiarán la forma de manipular este tipo de archivos.

Ejecución por default de "use strict"

En la actualidad la mayoría de navegadores soportan el modo estricto en JavaScript. En esta nueva versión de jQuery no es necesario especificar la linea "use strict" dentro del código, ya que el core de jQuery lo incorpora por defecto. Si quieres saber más sobre esta restricción puedes leer la documentación oficial de Mozilla Developers.

// Sintaxis del modo estricto
"use strict";
var postre = "Hola, soy un delicioso postre !";

Diferentes maneras de ejecutar .ready()

Debido a múltiples problemas de compatibilidad en los navegadores, existen diversas maneras de ejecutar una función cuando el documento se encuentra listo:

$(fn);
$().ready(fn);
$(document).ready(fn);
$("selector").ready(fn);
Desde esta nueva versión, la manera recomendada de hacerlo es la primera:
$(fn);

Selección de elementos con .escapeSelector()

El método .escapeSelector() ha sido incorporado en esta versión y soluciona un problema muy importante a la hora de usar algunos caracteres con significado especial para un ID o Clase de nuestro contenedor.

Por ejemplo si un elemento tiene un ID llamado $("#postre.agotado") podemos ver que si le queremos aplicar una funcionalidad a ese elemento solo nos va coger la primera parte del nombre postre mas no lo que sigue o sea el .agotado

$(document).ready(function() {
        $("#postre.agotado").click(function() {
               alert("Hola, soy un delicioso Postre, pero ya no estoy en stock !");
        });
});

Entonces podemos usar:

$(document).ready(function() {
        $("#" + $.escapeSelector("postre.agotado")).click(function() {
               alert("Hola, soy un delicioso Postre, pero ya no estoy en stock !");
        });
});

De esta manera estamos seleccionando el elemento con su nombre completo 'postre.agotado' y evitamos que el punto que separa el nombre afecte la interacción con el elemento.

Conclusión

jQuery 3 incorpora las nuevas buenas practicas de ECMAScript y soluciona muchos problemas de incompatibilidad, estabilidad y consumo de recursos.

Es muy importante que te adaptes y te actualices; no te atrases: la tecnología avanza muy rápido.

Estas son las novedades más destacadas en esta nueva versión de jQuery; si deseas leer más novedades o encuentras errores que no esperabas en tu consola, puedes referirte a la documentación oficial.

Para adquirir todas las bases que necesitas, te recomendamos el curso de JavaScript y jQuery de Platzi:

[maxbutton id="4" url="https://platzi.com/javascript/?utm_source=blog&utm_medium=cta_curso&utm_campaign=blog-jquery3#plan_form"]

Juan Ricardo
Juan Ricardo
pepoflex

1307Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2