Esiste un'alternativa alla sintassi tradizionale dei plugin jQuery? Siamo sempre stati abituati ad includere tutta la logica dei plugin all'interno di una funzione inline che prende il nome del plugin stesso. Tuttavia, se pensiamo che in JavaScript le funzioni sono oggetti, non è assurdo pensare di poter utilizzare degli oggetti personalizzati e custom per estendere le funzionalità di jQuery ed aggiungere metodi e proprietà agli elementi selezionati. Vediamo insieme i dettagli.
Partiamo da questo oggetto letterale:
var App = {
test: function(element) {
var question = confirm('Change the background color?');
if(question) {
this.change(element);
} else {
return;
}
},
change: function(element) {
$(element).css('background', 'yellow');
}
};
Usando l'oggetto fn di jQuery possiamo definire un alias che punti al nostro oggetto:
(function($) {
$.fn.app = App;
})(jQuery);
Ora tutta la logica del codice si è spostata nel nostro oggetto. Un esempio:
$(function() {
$('#test').click(function() {
$(this).app.test(this);
});
});
Potete visionare l'esempio finale in questa pagina.