Home>Guide>Come creare un plugin per jQuery

Come creare un plugin per jQuery


Come creare un plugin per jQuery


Quante volte ti è capitato di dover scrivere una funzione o una serie di righe in javascript e avere la sensazione di averlo già fatto in qualche progetto precedente? Sicuramente sarà capitato di frequente, soprattutto se fai spesso uso di jQuery. Non sarebbe dunque una buona idea pacchettizzare il tuo codice creando un plugin riutilizzabile?

  • Leggi l'articolo, ti bastano solo 3 minuti, 39 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

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.




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Resettare il CSS predefinito dei browser

Resettare il CSS predefinito dei browser


Impariamo a rendere il foglio di stile del nostro sito cross-browser, impostando i valori di default degli elementi del markup. Eviteremo così risultati di visualizzazione diversi a seconda del browser utilizzato.

Aggiungere una colonna personalizzata in WordPress

Aggiungere una colonna personalizzata in WordPress


Ecco una guida utile per imparare ad aggiungere una colonna personalizzata alla lista degli articoli nel backend di WordPress, così da avere sempre a portata di mano le informazioni che ci occorrono.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)