Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Programmazione Javascript

Pagine:

RSS

7 tecniche Javascript da usare oggi

di: Dustin Diaz 23 Luglio 2007

Tre: creare ponti

Siate gentili con le vostre API! Un ponte (bridge) è un modello di progettazione usato nell'ingegneria del software che viene creato per "separare un astrazione dalla sua implementazione in modo tale che le due possanno variare indipendentemente" (fonte: Wikipedia). I ponti possono esserci d'aiuto nella programmazione guidata da eventi. Se state appena muovendo i primi passi nel mondo dello sviluppo di API -si tratti di un servizio web o di qualcosa tipo getSomething e setSomething- creare dei ponti vi aiuterà a manentre il codice delle API più pulito.

Uno dei tipici casi di applicazione pratica per un ponte è per i callback di listener di eventi. Poniamo che abbiate una funzione chiamata getUserNameById. Vogliamo che questa informazione sia rintracciata attraverso un evento click. Ovviamente, l'id dell'elemento su cui si clicca contiene l'informazione che cerchiamo. Bene, ecco il modo in cui non va fatto:

addListener(element, 'click', getUserNameById);
function getUserNameById(e) {
var id = this.id;
// do stuff with 'id'
}

Come si vede, abbiamo creato un'API tuttaltro che perfetta. Possiamo operare solo nell'ambito del callback per catturare l'id dall'oggetto this. Invece, proviamo a fare così. Si inizia con la funzione dell'API:

function getUserNameById(id) {
// do stuff with 'id'
}

Sembra già una cosa più pratica! Ora possiamo programmare su un'interfaccia e non su un'implementazione. Tenendo questo in mente, ora possiamo creare un ponte per collegare le due funzioni:

addListener(element, 'click', getUserNameByIdBridge);
function getUserNameByIdBridge (e) {
getUserNameById(this.id);
}

Quattro: provare la delegazione degli eventi (event delegation)

La parola chiave in questo caso è try. Non si dimostra pratica in tutte le occasioni, ma vale la pena provare. Ho imparato questa cosa chattando un po' con i ragazzi del team di Yahoo! e vedendola in azione sul widget per menu su cui stavano lavorando. Il blogger e sviluppatore di Yahoo! Christian Heilmann ha affrontato il tema in un articolo intitolato Event Delegation.

La delegazione degli eventi è un modo semplice per abbreviare la gestione degli eventi. Funziona aggiungendo un listener ad un elemento contenitore e recuperando il target che ha attivato l'evento invece che assegnando diversi listener agli elementi figli e accedendo all'oggetto attraverso this. Per fare un esempio, se abbiamo una lista non ordinata (ul) con cinque item (li) e vogliamo gestire l'evento click su tali elementi, è più efficiente assegnare un evento click all'intera lista (ul) e quindi gestire il target. Ecco il codice, partendo dalla parte HTML:

<ul id="example">
<li>foo</li>
<li>bar</li>
<li>baz</li>
<li>thunk</li>
</ul>

Ed ecco il Javascript:

var element = document.getElementById('example');
addListener(element, 'click', handleClick);
function handleClick(e) {
var element = e.target || e.srcElement;
// do stuff with 'element'
}

Nell'esempio, quando l'utente clicca su un elemento li è come se cliccasse sull'elemento ul. Possiamo catturare il target originario ispezionando l'oggetto dell'evento che è stato passato in maniera invisibile al metodo di callback -nel nostro caso e (e è diventato il modo convenzionale per indicare una variabile usata per event). e contiene una proprietà chiamata target (che è l'elemento target). In Internet Explorer la proprietà è chiamata srcElement. Usiamo semplicemente un operatore logico OR per determinare se la proprietà target è disponibile, altrimenti il default diventa srcElement.