Intense Minimalism

jQuery 0: internals

Partendo da una sorta di auto-riflessione nata da un post di Napolux mi è venuto in mente che possa essere utile se iniziassi una sorta di rassegna sulla libreria jQuery. Non sapete cos’è? Allora vuol dire che l’idea non era sbagliata. Inizio giusto ora.

Storia

Breve excursus storico: più o meno in modo coincidente all’onda Ajax sono nate alcune librerie javascript di automazione per lo sviluppo web. Lo scopo era rendere a tutti la vita più semplice. Nacque così la prima famosa libreria di questo tipo, chiamata Prototype. Questa però non è tutt’oggi molto più che una libreria di funzioni: una serie di strumenti utili per semplificarsi la vita ma non molto oltre questo. La documentazione inoltre è sempre stata piuttosto scarsa.
Qualche tempo dopo ha visto la luce jQuery, che si pone quasi in contrasto con Prototype. Vuole infatti porre non una serie di strumenti ma principalmente un modello uniforme estensibile e su questo costruire. La libreria risulta anche molto leggera.

Ma una cosa che è sempre mancata in Prototype era la documentazione. Pare che jQuery sia meglio, ma vediamo se riesco a fornire anche qualche strumento in italiano per iniziare a sviluppare con questa libreria.

Architettura

Ma cosa è quindi jQuery? jQuery è uno strumento per rendere la manipolazione delle pagine (X)HTML uniforme e immediato, con il minor numero possibile di problemi fra un browser e l’altro.

La libreria jQuery si basa su alcuni punti cardine:

1. Il risultato di una chiamata jQuery è un altro oggetto jQuery.
2. Gli oggetti jQuery sono insiemi di elementi.
3. La chiave di tutto è la funzione $().
4. Separazione della logica funzionale dalla logica strutturale (interazione vs presentazione).

Esempio

Ma allora, come si usa esattamente? Il suo funzionamento è quasi magico. Partiamo dall’esempio sulla homepage della libreria:

$("p.surprise").addClass("ohmy").show("slow");

E scomponiamolo:

• $() utilizza un selettore CSS (non c’è niente di nuovo da imparare quindi) e restituisce una collezione di oggetti jQuery che rappresentano tutti i tag che il selettore ha identificato. Può essere uno solo, o tutti quelli sulla pagina.
• A tutti i tag viene quindi aggiunta la classe “ohmy”.
• A tutti i tag viene applicata la funzione show(), ovvero vengono visualizzati.

Si vede in modo chiaro come sia contemporaneamente semplice e potente. La combinazione della funziona $() con la possibilità di concatenare operazioni raggiunge una notevole potenza espressiva con pochissimo codice.

Analisi

Vediamo come è fatto internamente. Faccio notare che non riproporrò praticamente mai il codice completo, che è piuttosto complesso, quanto alcuni estratti utili ai fini logici e di comprensione di javascript.

var jQuery = function(a, c) { ... }
var $ = jQuery;

La costruzione è semplice, anche se implica forse alcuni passaggi caratteristici di javascript:

1. Viene creato un oggetto jQuery (var jQuery) e gli viene assegnato un oggetto funzione (function() {}) tramite una lambda function.
2. Viene creato un oggetto $ al quale viene assegnato l’oggetto jQuery. jQuery era una funzione, quindi anche $ sarà una funzione.
   Notate come in var $ = jQuery; jQuery sia passato senza le tonde finali delle funzioni. Scrivere “jQuery” significa utilizzare l’oggetto funzione passato per riferimento. Scrivere “jQuery()” significa chiamare la funzione associata all’oggeto jQuery.

Direi che ho messo abbastanza carne al fuoco… non so quando sarà il prossimo approfondimento, ma ci sarà. Se avete domande fate pure.