Buona parte della cattiva fama di JavaScript proviene dal pregiudizio che chiunque, data la semplicità del linguaggio, potrebbe improvvisarsi programmatore per creare nel migliore dei casi qualche effetto speciale di dubbio gusto o, nel peggiore dei casi, applicazioni web disastrose da diversi punti di vista. Data la velocissima evoluzione di questo linguaggio di scripting, e considerati i problemi che occorre affrontare per la moderna gestione degli eventi e manipolazione del DOM, dubitiamo che questa accusa di eccessiva semplicità possa reggere ancora.
Rimane il fatto che la nascita di librerie come Prototype, MooTools e jQuery hanno reso indubbiamente meno complesso ottenere da subito risultati efficaci, ma tutta questa euforia può andare facilmente a discapito della qualità del codice e dell'efficienza dell'applicazione.
Lasciando stare per ora il primo problema, molto più sfaccettato, non è poi così raro farsi abbagliare dalla chiara sintassi di questi strumenti dimenticandosi "momentaneamente" che si tratta di librerie che generano inevitabilmente un overhead, che può diventare più che sensibile in applicazioni di una certa portata.
Conoscere almeno a grandi linee il funzionamento interno della libreria che si sta usando è allora indispensabile per cercare di ridurre al minimo i tempi di esecuzione. Per quanto riguarda jQuery, attualmente la più usata, potremmo almeno ricordarci che ogni esecuzione della funzione $ restituisce un oggetto jQuery, che è passibile di ulteriori metodi, ed è per questo che molto più efficiente creare delle catene di metodi sullo stesso oggetto, rispetto a dichiarazioni successive:
$("#object").addClass("active").css("color", "#f0f").height(300);
Neppure va dimenticata la possibilità di creare una piccola cache personale degli oggetti creati (includendoli in una variabile), in modo da poterli utilizzare nel resto del codice.
Fondamentale poi, per lo meno a partire dalla versione 1.7 di jQuery, usare la delegazione di eventi. Supponiamo di voler allegare un event listener ad una lunga collezione di oggetti, come ad esempio dei tag li in un elenco, o dei td in una tabella; in questo modo
$('ul').find('li').click(function() {
$(this).azione();
});
attiveremo tanti event listener quanti sono gli elementi, sprecando molte risorse. Utilizzando invece una sintassi come questa
$('ul').on('click','li',function() {
$(this).azione();
});
ne attiveremo uno solo, e sfrutteremo la "risalita" dell'evento dal figlio al genitore.