Adéu jQuery?


Una mica d’història

  • Fins fa uns anys hi havia grans diferències entre navegadors:

    • Accedint a DOM
    • Gestionant esdeveniments
  • Van aparèixer llibreries per tractar aquest tipus de coses:

    • jQuery (2005)
    • Mootols (2007)
    • ….
  • Què ha passat des de, posem al 2010?
    • Microsoft s’ha anat apropant als estàndards des IE9 (2011)
    • l’ús de navegadors no compatibles ha anat decreixent.
    • Hi ha més possibilitats des estigui habilitat per a accés a DOM.
    • Frameworks com Angular (des del 2010) utilitzen jqLite, una versió molt reduïda de jQuery
  • Frameworks tipus React (2013) comencen a treballar amb DOM Virtual:
    • treballar amb el DOM és costós, millor treballar amb una versió “més lleugera”
    • Si es produeixen canvis en el DOM Virtual es traslladen a l’DO M real
    • jQuery treballa de forma directa amb el DOM, així que ens resta eficiència

¿Fem servir jQuery?

  • Resposta ràpida nO, excepte per temes de compatibidad
  • Resposta meditada:
    • Si fas una web (no una webapp) SI
      • Disposes de molts plugins i desenvolupaments ja fets
    • Si fas una webapp NO, utilitza algun framework de JS, però analitza:
      • SEO? ¿Temps de càrrega? ¿Renderització en servidor?
      • Components que necessites?

Selectors en JavaScript

  • Ens hem acostumat a fer servir tant jQuery que ara toca tornar a aprendre:
    • a fer les coses amb el JavaScript d’abans
    • a utilitzar noves funcionalitats de l’JavaScript d’ara
  • Si és el nostre cas, que venim d’un background amb jQuery, val la pena fer una ullada a alguna guia.

Selector de classe

// jQuery$('.myClass');// JavaScriptdocument.getElementsByClassName('myClass');

Selector de id

// jQuery$('#myID');// JavaScriptdocument.getElementById('myID');

Selector d’etiqueta

// jQuery$('div');// JavaScriptdocument.getElementsByTagName('div');

querySelector

// Grab the first .myClass class namedocument.querySelector('.myClass');// Return a NodeList of all instances of .myClassdocument.querySelectorAll('.myClass');// Grab the myID iddocument.querySelector('#myID');// Return a NodeList of all 'div' instancesdocument.querySelectorAll('div');// Grab the last list Node of .someList unordered listdocument.querySelector('ul.someList li:last-child');// Grab some data-* attributedocument.querySelectorAll('');

Esdeveniments a JavaScript

Esdeveniments

/* * Click */// jQuery$(elem).on('click', function () {...});// JavaScriptdocument.querySelector(elem).onclick = function () {...}

Encolar esdeveniments

document.addEventListener('click', function() { // ...}, false);

Esdeveniment de Dom Ready

  • El suporten la majoria de navegadors
    document.addEventListener('DOMContentLoaded', function() { // DOM ready, run it!}, false);

Leave a Comment

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