JavaScript: jQuery sì o no?
Una delle funzionalità più apprezzate di JavaScript è senza dubbio la sua facile estendibilità: questo linguaggio di programmazione permette infatti di creare plugin e/o framework con grande semplicità. Fra questi c’è senz’altro jQuery.
La facilità di utilizzo di jQuery lo fa preferire sovente a JavaScript nativo, in quanto dispone di moltissimi metodi che spaziano in tutti gli ambiti: a partire da AJAX (come già spiegato in questo articolo), fino ad arrivare all’iterazione senza utilizzare cicli iterativi diretti quali for o while.
Tuttavia, l’utilizzo di jQuery non è sempre consigliato. Spesso ci sono funzioni che possiamo ugualmente ottenere senza ricorrere a plugin o framework, ma semplicemente con un’aggiunta di pochissimo olio di gomito, visto che su progetti di larghe dimensioni anche un piccolo script di 27kb potrebbe avere un pesante impatto sulle prestazioni generali.
A questo proposito, ti elencherò di seguito una serie di 5 piccoli tip che potrai utilizzare e riadattare per qualsiasi tuo lavoro, senza il bisogno di scomodare CDN vari. Naturalmente, i seguenti consigli valgono anche per qualsiasi altro framework o plugin.
1 – Il wrapper “$”
Capita alle volte di utilizzare jQuery esclusivamente per la comodità dei suoi selettori e, in particolare, del suo wrapper “$”. Una motivazione abbastanza debole, in quanto in JavaScript lo stesso effetto è facilmente ottenibile tramite il selettore querySelectorAll. Vediamone un breve esempio qui sotto.
var el = document.querySelectorAll(‘.the-div’);
Se questo procedimento ti sembra troppo lungo, puoi rimediare con la creazione di una semplice funzione che vada a sostituire il wrapper.
var S = function (el) {
return document.querySelectorAll(el);
}
Potrai poi utilizzarla nel seguente modo:
var theDiv = S(‘.the-div’);
Il metodo querySelectorAll necessita, tuttavia, di una successiva iterazione, in quanto il suo risultato è una lista di nodi (NodeList) — ovvero elementi — che bisogna processare per poter manipolare i singoli nodi contenuti all’interno. Se ti sembra complesso, non preoccuparti, vedrai come si può facilmente ovviare a ciò nel punto successivo.
2 – L’iterazione con le NodeList
jQuery è famoso per permettere una manipolazione estremamente malleabile dei suoi elementi tenendo gran parte dei processi nascosti allo sviluppatore. Ciò non è sempre un bene, in quanto non si ha mai l’esatto controllo del funzionamento dello script.
Capire le NodeList è davvero semplice: basti sapere che esse non sono nient’altro che array. Sarà spontaneo il ragionamento di iterare attraverso i diversi nodi tramite un semplice ciclo for.
for (var i = 0; i < theDiv.length; i++) {
theDiv[i].style.height = “200px”
}
Con questa semplicissima porzione di codice, per esempio potremo assegnare un’altezza di 200px a tutti gli elementi presenti nella NodeList.
3 – Gli eventi
Chiunque abbia provato jQuery avrà sicuramente provato anche i suoi fantastici eventi. O forse non sono così meravigliosi come sembrano? Scopriamolo nel codice appena sotto.
var theOtherDiv = document.querySelector(‘.the-other-div’);
theOtherDiv.onclick = function() {
alert(“Dai che non è così difficile!”);
}
Come puoi notare, stavolta non abbiamo utilizzato la funzione S precedentemente creata, ma abbiamo impiegato il selettore querySelector anziché querySelectorAll; questo perché non ci occorre selezionare più elementi, visto che in questo caso ce ne basta solo uno.
Se hai fatto attenzione, avrai sicuramente notato che non iteriamo l’elemento in un ciclo for, dato che il selettore querySelector restituisce un solo nodo al posto di una NodeList.
4 – La gestione delle classi
Un grande pregio di jQuery è quello di offrire ottimi metodi per la gestione on the fly delle classi. Tuttavia JavaScript offre dei metodi ugualmente potenti, seppur poco conosciuti:
for (i = 0; i < theDiv.length; i++) {
theDiv[i].classList.add(“classe-prova”);
theDiv[i].classList.remove(“classe-prova-2”);
theDiv[i].classList.toggle(“classe-prova-3”);
}
Hai capito bene: i metodi .add, .remove e .toggle sono proprio l’esatto equivalente di quelli che utilizzi con jQuery. Semplice, no?
5 – Le animazioni
Arriviamo ora al tasto dolente di jQuery. Purtroppo questo framework non offre un gran metodo per le animazioni, dato che non permette ancora di animare una proprietà quale transform.
In questo punto ti chiedo una particolare attenzione, visto che il codice non è esattamente breve, ma una volta appresi i concetti di base, potrai realizzare soluzioni ad alto impatto visivo. Ecco lo snippet qui di seguito:
var anotherDiv = document.querySelector(".another-div"),
endValue = 200;
function translateX() {
var current = 0;
function incrementTranslate() {
current++;
anotherDiv.style.webkitTransform = "translateX(" + current + "px)";
anotherDiv.style.mozTransform = "translateX(" + current + "px)";
anotherDiv.style.msTransform = "translateX(" + current + "px)";
anotherDiv.style.oTransform = "translateX(" + current + "px)";
anotherDiv.style.transform = "translateX(" + current + "px)";
if (current === endValue) {
clearInterval(callAnimation);
}
}
var callAnimation = setInterval(incrementTranslate, 1);
}
window.onload = translateX();
Innanzitutto assegniamo una variabile al nostro elemento another-div. Successivamente, stabiliamo il numero di pixel entro il quale la nostra animazione deve terminare e salviamo tale valore nella variabile endValue.
Fatto ciò, creiamo la funzione translateX() e assegniamo a una variabile il primo valore che dovrà avere la proprietà che andremo a modificare in seguito, che nel nostro caso sarà pari a zero. Successivamente definiamo un’altra funzione interna a quella attuale, incrementTranslate(), che verrà successivamente chiamata ogni ms grazie al setInterval definito poco dopo; così facendo si andrà a incrementare la variabile ogni qual volta la funzione verrà chiamata, attribuendo alle nostre proprietà di volta in volta il suddetto incremento.
Siamo quasi giunti al termine: quando la variabile current sarà uguale ad endValue, l’elemento avrà eseguito correttamente la nostra animazione, motivo per cui andremo a cancellare il setInterval settato in precedenza, mettendo fine così all’animazione in essere.
Infine, al caricamento degli elementi — window.onload è l’equivalente JavaScript di $(document).ready() — avvieremo semplicemente l’animazione dell’elemento.
Conclusioni
Anche oggi l’articolo termina qui. Se adesso stai per gettare nel cestino i tuoi script pieni di $ e .toggleClass(), non farlo: jQuery è uno dei framework JavaScript più validi in circolazione; offre tool comodissimi nello sviluppo di siti medio-grandi, senza contare la vastissima disponibilità di plugin aggiuntivi e il supporto che riceve da una massiccia comunità internazionale.
Lo scopo di questo articolo non è quello di convertirti alla dottrina del “Pure JavaScript“, ma vuole lasciarti con una domanda: “Ho sempre bisogno di ciò che utilizzo?”.
Se ti va, facci sapere cosa ne pensi a proposito; sono fermamente convinto che potrebbero nascere spunti più che interessanti. Per ora ti auguro come al solito una buona giornata e un buon coding!
L'autore
9 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Articolo molto interessante, jQuery è spesso sopravvalutato e anche se in alcuni casi è davvero molto comodo, in altri se ne potrebbe tranquillamente fare a meno.
Consiglio di dare un’occhiata a questo sito, che spiega come jQuery sia più o meno spesso facilmente sostituibile con del semplice javascript: http://youmightnotneedjquery.com/
Bell’articolo, ma la mia domanda è la seguente, se sto lavorando su un sito che usa un template dove JQuery comunque viene caricato in ogni pagina perché non dovrei usare la sua potenzialità abbinata alle funzioni javascript, chiaramente senza appesantire il tutto con plugin inutili?
Se jQuery aiuta in un particolare aspetto (meno codice, o più leggibile), a mio avviso vale la pena usarlo senza remore :)
Ma è comunque un layer aggiuntivo, quindi anche una cosa semplice come $(“.element”) richiede molta più elaborazione rispetto ad un (quasi altrettanto semplice) document.getElementsByClassName(“element”).
Se vuoi vedere quanto… prova a lanciare questo benchmark, la differenza è notevole :) http://jsperf.com/jq-vn-get-id/3
Su cose “piccole” la differenza non è molta e nella maggior parte dei casi è addirittura impercettibile, ma secondo me vale la pena conoscerlo.
Ciao ottimo articolo! Grazie per i preziosi consigli. Vorrei chiederti un consiglio: nel caso della ultracomoda funzione $.ajax() cosa è meglio fare ? E’ più performante tramite js crearsi l’oggetto XMLHttprequest?
Ciao Rinaldo,
l’articolo mi è sembrato un po’ di parte; come mai non menzioni mai il supporto cross browser delle soluzioni alternative che suggerisci? jQuery fa un gran lavoro soprattutto in questo… rende uniforme il comportamento dei browser per lo sviluppatore; magari oggi non è utile come qualche anno fa, ma è comunque un aspetto da tenere in considerazione in qualunque progetto che non sia un semplice passatempo.
Oltre questo devo dire che ho trovato alcune inesattezze che forse vale la pena correggere:
2 – L’iterazione con le NodeList
Le nodelist non sono Array contrariamente a quanto sostieni; è semplice rendersene conto:
document.querySelectorAll(“body”) instanceof Array // false
Questo è importante perchè significa che su una nodelist puoi eseguire alcuni dei metodi builtin tipici degli Array (forEach, map…). Cosa sono allora le nodelist? Le nodelist sono considerate degli oggetti arraylike… sono a tutti gli effetti degli oggetti hash, che come gli array hanno la proprietà “length” che ne indica la lunghezza.
Visto che normalmente è più utile lavorare con gli Array, suggerirei di modificare la funzione che suggerisci di usare in “1 – Il wrapper “$”” con la seguente, che restituisce sempre un vero Array:
var S = function (el) {
return Array.prototype.slice.call(document.querySelectorAll(el));
}
Questa è una di quelle cose che normalmente jQuery fa per noi.
3 – Gli eventi
Non consiglierei di utilizzare il metodo che utilizzi tu, piuttosto target.addEventListener(type, listener[, useCapture]);… i vantaggi di questo approccio sono numerosi, ed indicarli qui non è opportuno (se sei intererrato, ne ho scritto sul mio blog).
4 – La gestione delle classi
Ok, classlist è fico e tutto quello che hai detto è corretto… aggiungerei però che si può usare da IE10+ (e su IE10 ha ancora qualche mancanza)… sai in giro c’è ancora qualcuno che IE9 lo deve supportare…
5 – Le animazioni
Le animazioni il punto debole di jQuery? Sul serio??? Non ho capito bene il punto dell’animazione che provi a realizzare con quello script… la cosa comunque certa è che un intervallo di 1ms è esageratamente troppo frequente; normalmente non meno di (1000/60)ms per evitare di sforare i 60fps oltre i quali l’esperienza utente inizia a diventare scadente.
ps. Rileggendo il mio commento ho l’impressione di poter essere sembrato arrogante… non era mia intenzione…
questo credo sia uno dei siti maggiormente seguiti in italia (nel settore sviluppo web) e ritengo importante che le informazioni trasmesse siano corrette.
saluti
Il tuo commento e’ importantissimo per chi e’ alle prime armi e deve, secondo me, essere in qualche modo messo in evidenza nell’articolo.
Se proprio qualcuno non vuole utilizzare jQuery, ecco un sito con alternative (quasi cross-browser) ad alcune tra le funzionalita’ piu’ utilizzate: http://youmightnotneedjquery.com/
Ciao
Concordo con Octoblog, l’articolo non tiene conto del supporto cross browser, non tiene conto delle best practices (vedi addEventListener) e riporta pure delle inesattezze ( window.onload è l’equivalente JavaScript di $(window).load() e non di $(document).ready()…)
Devo dire che sono un fanatico di jQuery e che purtroppo lo conosco meglio di Javascript. O meglio, mi so muovere meglio con jQuery piuttosto che col suo vero “codice” in quanto ho imparato quello e permette di fare cose abbastanza elaborate con un codice più snello e pulito anche se è vero il fatto di non averne il pieno controllo.
Beh questo è anche normale in un framework altrimenti non avrebbe motivo di esistere, serve più che altro a semplificare le cose e per ottenere questo risultato c’è sempre un prezzo da pagare.
Nonostante tutto è un articolo interessante in quanto mi ha fatto riflettere sulla sintassi naturale del framework e che come quindi avendone la necessità possa ricreare perfettamente in puro javascript quello che finora ho sempre fatto con jQuery.
Grazie per l’articolo! :)
jQuery è veramente utile soprattutto in siti con frontend complessi ed interazione con l’utente, possono essere usati anche altri framework però si perde la grande flessibilità di jQuery.
Secondo me è apprezzabile la nuova v2 che aumenta le performance, sulle quali effettivamente c’erano dei problemi.