JavaScript  »  Guide  »  Guida jQuery 

Nella lezione sulle Utility abbiamo visto come jQuery non offra un gran numero di metodi statici (o funzioni), confidando nella capacità dello sviluppatore di utilizzare i metodi nativi JavaScript. Vi sono alcuni casi, tuttavia, in cui utilizzare JavaScript nativo potrebbe rendere ripetitivo il nostro codice. Ecco che allora è possibile aggiungere nuovi metodi statici sfruttando il fatto che se a $.extend() viene passato un solo argomento ad essere esteso è l'oggetto jQuery stesso.

Come esempio prendiamo il caso di voler realizzare una funzione per rimuovere gli spazi in eccesso da una stringa, non solo all'inizio e alla fine (come fa $.trim(), ma anche fra parola e parola. Ecco il codice necessario:

$.extend({
	clean : function (stringa) {
		//sostituisce le porzioni di stringa con più di uno spazio
		//con un singolo spazio
		var str = stringa.replace(/\s+/g, ' '); 
		
		//quindi restituisce la stringa eleminando eventuali spazi iniziali e finali
		return $.trim(str);
	}
});

Per applicare la nuova funzione basterà passarle la stringa da processare:

var stringa = "  stringa   piena     di  spazi";
$.clean(stringa);
//stringa = "stringa piena di spazi"

Aggiungere un metodo

L'ultima possibilità di estensione prevista nativamente da jQuery è quella di aggiungere un metodo, realizzando un cosiddetto plugin. Il codice necessario a realizzare un'estensione di questio tipo può essere molto semplice come molto complesso, in base alle funzionalità che si vogliono realizzare. In generale il punto di partenza per la creazione di un plugin è la funzione $.fn.extend(). Ecco lo schema dal quale partire:

$.fn.extend({

  nomeplugin : function () {

	  return this.each(function () { 
	  		//this è l'elemento
	  });

	} 

});

Nell'esempio viene passato un oggetto a $.fn.extend contentente il metodo da aggiungere a jQuery. Al suo interno il return this... permette di restituire un riferimento all'oggetto jQuery, preservando l'eventuale concatenabilità del nuovo metodo, mentre ricorrendo a .each() si potrà ciclare fra i singoli elementi della collezione.
Da notare che se all'interno della funzione passata ad .each() verrà usato return, allora il plugin restituirà un valore, perdendo la concatenabilità.

Per chiarire questa procedura, ecco il codice necessario per realizzare un semplice plugin che imposti su giallo il colore di sfondo di tutti gli elementi della collezione:

$.fn.extend({
	
	evidenzia : function () {
		return this.each(function () { 
			$(this).css("backgroundColor","yellow");
		});
	}	

});

Per richiamare il plugin basterà scrivere:

$("p").evidenzia();

Ecco il plugin in funzione.

Grazie a questo approccio possono essere realizzati plugin molto complessi in grado di gestire, per esempio, gallerie di immagini e finestre modali. jQuery offre già un buon numero di plugin da scaricare per approfondire le possibilità di estensione del framework a questo indirizzo: http://plugins.jquery.com/.

Altri articoli

Altre guide

Altre newsletter