Come creare un plugin per jQuery

Perché creare un plugin

Lavorare con estensioni sotto forma di plugins è proprio alla base del funzionamento della libreria jQuery, che permette così di gestire più istanze di un oggetto contemporaneamente in maniera del tutto indipendente. Inoltre, così facendo, è possibile di volta in volta aggiungere funzionalità al tuo sito riutilizzando codice già scritto magari in precedenza risparmiando notevole quantità di tempo e risorse… in poche parole: “Write less, do more”.

Un esempio semplice

Ipotizza di voler creare una banalissima funzione che si occupa semplicemente di modificare il font di tutti i link del tuo sito, applicando un colore bianco su sfondo rosso. Niente di più facile, ti basterebbero poche righe di codice:

$( 'a' ).css( { 'background': '#ff0000', 'color' : '#fff' } );

Quest’azione, può essere pacchettizzata e trasformata in un plugin di jQuery, così da poterla includere in tutti i tuoi progetti ed utilizzarla quando è necessario.

Passiamo al codice

Per evitare che il plugin possa andare in conflitto con altre librerie di Javascript, visto che in molte di queste si fa uso della variabile $, incapsuliamo il nostro plugin in una IIFE (Immediately Invoked Function Expression):

( function( $ ) {
	// istruzioni
} )( jQuery );

che definisce lo scope, ovvero il contesto in cui opera il plugin evitando che venga sovrascritto per sbaglio.

In secondo luogo, dichiariamo il nome del plugin come funzione appartenente a jQuery facendo così in modo che venga trattata come tale:

$.fn.emphasize = function() {
	// istruzioni
} );

Poi ci occupiamo di scrivere il codice vero e proprio della funzione, cosa deve fare, ovvero applicare due regole CSS per colore e background:

this.css( { 'background': '#ff0000', 'color' : '#fff' } );

Infine, aggiungendo la riga finale:

return this;

facciamo si che la nostra funzione possa essere utilizzata con la tecnica del “chaining”, molto utilizzata in jQuery, che permette di concatenare in una sola riga molteplici azioni una dopo l’altra.

Ecco il codice finale del tuo primo plugin jQuery:

( function( $ ) {
	$.fn.emphasize = function() {
		this.css( { 'background': '#ff0000', 'color' : '#fff' } );
		return this;
	};
} )( jQuery );

Per utilizzare il tuo nuovo plugin, non ti resta che richiamarlo come fai con le funzioni di jQuery che utilizzi di solito:

$( 'a' ).emphasize();

I parametri

Ti starai chiedendo come fare nel caso avessi bisogno di utilizzare parametri utili a generalizzare il tuo plugin di jQuery. In effetti è possibile, vediamo come.

Per prima cosa, bisogna far capire a jQuery che la funzione appena creata accetta dei parametri, nel nostro caso options:

$.fn.emphasize = function( options ) {
	// istruzioni
} );

dove options sarà un array di opzioni racchiuse così in un singolo parametro.

È buona consuetudine, prevedere dei valori di default per le opzioni del tuo plugins:

$.fn.emphasize = function( options ) {
	var settings = $.extend( {
		background: '#ff0000',
		color: '#fff'
	}, options );
} );

ed ecco infine come utilizzarli nel plugin, modificando leggermente quanto fatto in precedenza:

$.fn.emphasize = function( options ) {
	var settings = $.extend( {
		background: '#ff0000',
		color: '#fff'
	}, options );
	return this.css( {
		background: settings.background,
		color : settings.color
	} );
} );

Ecco come si presenta il tuo plugin di jQuery, finito e pacchettizzato a dovere:

( function( $ ) {
	$.fn.emphasize = function( options ) {
		var settings = $.extend( {
			background: '#ff0000',
			color: '#fff'
		}, options );
		return this.css( {
			'background': settings.background,
			'color' : settings.color
		} );
	}
} )( jQuery );

Puoi utilizzarlo adesso semplicemente richiamandolo e passando le opzioni che preferisci:

$( 'a' ).emphasize( {
	background: '#ff0000',
	color: '#fff'
} );

Ovviamente, è sempre meglio precisare che quanto descritto finora necessita che la libreria di jQuery sia inclusa nella tua pagina, attraverso la modalità che più preferisci.