Qualche mese fa ho tradotto per PRO una serie di articoli di Peter-Paul Koch usciti originariamente su Digital Web Magazine. Uno di essi è dedicato ad un tema caro a PPK e ad altri sostenitori del cosiddetto Unobtrusive Javascript: la separazione del codice Javascript dalla struttura, ovvero dal codice HTML della pagina.
La tesi di fondo è questa: a che serve creare documenti standard compliant, validi, con codice pulito e ben strutturato se poi lo si riempie di istruzioni Javascript che potrebbero invece essere tenute separate?
Sia benvenuta allora Behaviour, una libreria creata da Ben Nolan che offre una soluzione semplice e indolore per ottenere la tanto agognata separazione.
Tutto è ottenuto grazie all'uso dei selettori CSS: vengono usati per specificare gli elementi a cui aggiungere gli eventi Javascript. Ecco l'esempio di codice proposto da Nolan:
<li>
<a onclick="this.parentNode.removeChild(this)" href="#">Click me to delete me</a>
</li>
Una semplice lista in cui cliccando sul li
onclick
a
Usando Behaviour, invece, potremmo mantenere il codice molto più pulito:
<ul id="example">
<li>
<a href="/someurl">Click me to delete me</a>
</li>
</ul>
OK, Javascript è scomparso, ma come richiamiamo la funzione? Basta creare un JS da collegare alla pagina in cui andremo a inserire una serie di regole, così:
var myrules = {
'#example li' : function(el){
el.onclick = function(){
this.parentNode.removeChild(this);
}
}
};
Behaviour.register(myrules);
Attenzione alla seconda riga. Mettendo all'inizio #example li
li
ul
id
Per altre demo si può vedere questa pagina
Segnalo anche un articolo