Hace unos días ya vimos en este blog que jQuery actualizaba la versión y aunque ya nos avanzaron que no habría muchos problemas por retrocompatibilidad, ponían a nuestra disposición una guía de actualización y un plugin para identificar problemas de compatibilidad en nuestro código.

En Tanta nos hemos decidido a probarlo y para ello vamos a coger un proyecto con un carga media de código jQuery, actualizar su versión a la 3.0 y ver si encontramos algún tipo de problema y solucionarlo, si se da el caso.

 

Cambiando la versión de jQuery

Como vemos en la imagen, en este proyecto se está utilizando la versión 1.9.1 de jQuery.

Actualizando a jQuery 3: Version original de jQuery: 1.9.1

De momento parece que el CDN de Google todavía no aloja esta versión, por lo que tendremos que cargarlo desde el propio CDN de jQuery (aunque siempre podemos descargarla y añadirla localmente).
<script src="https://code.jquery.com/jquery-3.0.0.min.js></script>

Añadimos además el plugin de jQuery Migrate:
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

Comprobando y arreglando los errores

Abrimos el HTML en nuestro navegador preferido y consultamos la consola de las herramientas de desarrollo. Vemos como jQuery Migrate nos notifica que estamos utilizando un método obsoleto: jQuery.fn.load().

Errores encontrados por jQuery Migrate.

Desplegamos donde pone console.trace() y encontramos el archivo y línea de código exactos en el que se está utilizando el método obsoleto. En este caso, es en la línea 1934 del common.js

Archivo y línea de código donde se encuentra la función obsoleta

Consultamos la guía de actualización y nos dice que los métodos .load(), .unload(), .error() han sido eliminados y que en su lugar utilicemos la función .on() para la asignación de eventos.
https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

Por tanto, lo que antes teníamos como

jQuery(window).load(function(){
...
});

ahora debería de estar así:

jQuery(window).on('load',function(){
...
});

Refrescamos el HTML que teníamos abierto en el navegador y en la consola han desaparecido los problemas detectados.

JQMIGRATE muestra que no hay errores potenciales
En resumen, siguiendo unas buenas prácticas y manteniendo un código más o menos cercano a las últimas versiones de jQuery, el cambio de versión no es muy “traumático”. Y gracias a las dos herramientas que nos proporciona jQuery, podemos analizar de un vistazo los potenciales problemas y solucionarlos de forma más efectiva.

PD: Esto no tiene en cuenta otros plugins o librerías dependientes de la versión de jQuery, por lo que deberemos cerciorarnos que estamos utilizando las últimas versiones de los mismos y/o que sean compatibles con jQuery 3.0 antes de decantarnos por la actualización.