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.
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().
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
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.
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.