Actualització a jQuery 3.0 | Tanta Comunicació, agència de màrqueting digital

Count post views

Fa uns dies ja vam veure en aquest bloc que jQuery actualitzava la versió i tot i que ja ens van avançar que no hi hauria molts problemes per retrocompatibilitat, posaven a la nostra disposició una guia d’actualització i un plugin per identificar problemes de compatibilitat en el nostre codi.

en Tanta ens hem decidit a provar-ho i per això anem a agafar un projecte amb un càrrega mitjana de codi jQuery, actualitzar la seva versió a la 3.0 i veure si trobem algun tipus de problema i solucionar-lo, si es dóna el cas.

Canviant la versió de jQuery

com veiem en la imatge, en aquest projecte s’està utilitzant la versió 1.9.1 de jQuery.

Actualització a jQuery 3: versió original de jQuery: 1.9.1

de moment sembla que el CDN de Google encara no allotja aquesta versió, per la qual cosa haurem de carregar des del propi CDN de jQuery (encara que sie mpre podem descarregar-la i afegir-la localment).
<script src="https://code.jquery.com/jquery-3.0.0.min.js></script>

Hi afegim a més el plugin de jQuery Migrate: a <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

Comprovar i arreglant els errors

Obrim l’HTML en el nostre navegador preferit i vam consultar la consola de les eines de desenvolupament. Veiem com jQuery Migrate ens notifica que estem utilitzant un mètode obsolet: jQuery.fn.load().

Errors trobats per jQuery Migrate.

Despleguem on posa console.trace() i vam trobar l’arxiu i línia de codi exactes en què s’està utilitzant el mètode obsolet. En aquest cas, és en la línia 1934 de l’Common.js

Arxiu i línia de codi on es troba la funció obsoleta

Vam consultar la guia d’actualització i ens diu que els mètodes .load(), .unload(), .error() han estat eliminats i que en el seu lloc utilitzem la funció .on() per a l’assignació de esdeveniments.
https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

Per tant, el que abans teníem com a
jQuery(window).load(function(){
...
});

ara hauria d’estar així: a
jQuery(window).on('load',function(){
...
});

Refresquem l’HTML que teníem obert en el navegador i en la consola han desaparegut els problemes detectats .

JQMIGRATE mostra que no hi ha errors potencials Xalet En resum, seguint unes bones pràctiques i mantenint un codi més o menys proper a les últimes versions de jQuery, el canvi de versió no és molt “traumàtic”. I gràcies a les dues eines que ens proporciona jQuery, podem analitzar d’un v istazo els potencials problemes i solucionar-los de forma més efectiva.

PD: Això no té en compte altres connectors o llibreries dependents de la versió de jQuery, per la qual cosa haurem assegurar-nos que estem utilitzant les últimes versions dels mateixos i / o que siguin compatibles amb jQuery 3.0 abans de decantar-nos per l’actualització.

Leave a Comment

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *