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?
- Si fas una web (no una webapp) SI
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);
0 Comments Leave a comment