Noto con sempre maggior stupore che gli autori di temi di Wordpress (soprattutto quelli di temi premium o professionali) creano codice jQuery assolutamente non strutturato e non semantico. Ma si può parlare di semantica in jQuery? Si, perchè il codice deve la sua esistenza alla struttura che lo racchiude. Se la struttura è assente (con buona pace di Umberto Eco), il codice perde coerenza e si riassume in funzioni e chiamate all'interno dell'evento ready(). Ma come si crea una struttura?
Namespace
Il codice dovrebbe avere un suo spazio dove vivere, ossia un namespace. Questo namespace si può creare usando un oggetto:
var MyApp = new function() {
}();
MyApp diventa così la struttura all'interno della quale vive il nostro codice. In Wordpress possiamo incapsulare ulteriormente il codice usando una funzione automatica:
(function($) {
var MyApp = new function() {
}();
})(jQuery);
Non c'è bisogno di usare .noConflict() perchè la funzione automatica crea una sorta di sandbox attorno al namespace di jQuery.
Eseguire il codice in automatico
Le routine jQuery si inseriscono nei metodi dell'oggetto. Possiamo evitare di eseguirle una per una usando invece un unico metodo per il loro caricamento:
(function($) {
var MyApp = new function() {
// metodi
this.autoload = function() {
for(var i in this) {
if(typeof this[i] === 'function' && this[i] !== arguments.callee) {
this[i]();
}
}
};
}();
$(function() {
MyApp.autoload();
});
})(jQuery);
Il metodo autoload() passa in rassegna tutte le proprietà dell'oggetto. Se la proprietà è una funzione (ossia un metodo), questo metodo la esegue, evitando al contempo di rieseguire se stesso usando la proprietà callee.
Widget
Se jQuery viene usato per creare strutture DOM in modo ripetuto, allora si può pensare di astrarre la routine di tale creazione in un widget. Un widget non è un plugin, ma un semplice oggetto che vive sempre all'interno del namespace dell'applicazione ma slegato da un oggetto jQuery specifico:
(function($) {
var MyApp = new function() {
var Widget = function(parameters) {
parameters = $.extend({
before: '<div class="widget">',
after: '</div>',
content: ''
}, parameters);
this.draw = function() {
return parameters.before +
parameters.content +
parameters.after;
}
};
this.test = function() {
var widget = new Widget({
content: 'Test'
});
$('#test').html(widget.draw());
};
}();
})(jQuery);
Il widget dovrebbe avere un solo metodo pubblico che serve alla sua visualizzazione. Seguendo una convenzione in uso su molte piattaforme, possiamo chiamare questo metodo draw(). Tale metodo si limita semplicemente ad assemblare una stringa che costituirà il contenuto HTML di un elemento.
Usare direttamente il metodo html() porterebbe il nostro codice a mischiare logica e presentazione, senza contare il fatto che sarebbe anche più difficile da gestire a livello visivo, specie quando le stringhe HTML sono molto lunghe.