Gran parte degli script in jQuery usano ancora un codice procedurale. Usare codice procedurale in un linguaggio basato sugli oggetti come JavaScript è un controsenso. In questo articolo vedremo come trasformare del codice jQuery procedurale in un codice orientato agli oggetti.
Namespace
La prima cosa da evitare è di usare jQuery in un contesto globale:
$(document).ready(function() {
//...
});
In questo modo potrebbero sorgere conflitti con altre librerie. Meglio utilizzare una sandbox creata attorno all'oggetto jQuery:
(function($) {
$(document).ready(function() {
//...
});
})(jQuery);
Variabili globali
Altra causa di conflitti sono le variabili globali, da evitare:
var slideshow = $('#slideshow'),
button = $('#btn');
$(document).ready(function() {
//...
});
Meglio utilizzare variabili locali o oggetti:
(function($) {
var Elements = {
slideshow: $('#slideshow'),
button: $('#btn')
};
$(document).ready(function() {
//...
});
})(jQuery);
Funzioni
Quando il vostro codice è costituito da decine e decine di funzioni è chiaro che state ragionando per azioni o routine separate senza avere davanti a voi un quadro più generale.
Provate a raggruppare le funzioni per scopo e finalità e quindi ripensate il vostro codice in modo OO utilizzando gli oggetti:
// Esempio errato
$(document).ready(function() {
funzione1();
funzione2();
funzioneN();
});
Ecco invece un esempio corretto:
(function($) {
var APP = {
Elements: {
// elementi DOM
},
Utils: {
// metodi helper o di utility
},
fn: {
// il core
},
init: function() {
// metodo di inizializzazione
}
};
$(document).ready(function() {
APP.init(); // esegue tutto
});
})(jQuery);
In questo modo non solo avete maggiore coerenza interna e una maggiore facilità di gestione, ma potete anche riutilizzare il vostro codice in altri progetti. Questi vantaggi sono tutti una conseguenza dell'OOP.