# 27: Creazione di un semplice plugin jQuery - Trucchi CSS

Ora che abbiamo esaminato l'utilizzo dei plug-in jQuery, vale assolutamente la pena capire come costruirli. Abbiamo già accennato brevemente al fatto che puoi estendere l'oggetto jQuery nativo se lo desideri. Proprio come:

$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();

Ma questo non è particolarmente utile di per sé. Per creare un nuovo metodo per jQuery che puoi chiamare su un insieme di elementi, dovrai farlo in questo modo:

$.fn.myMethod = function() ( // I'm a new method ));

Questa è esattamente la stessa cosa che usare .prototype su jQuery e, per i curiosi, puoi leggere di più a riguardo qui. Farlo in questo modo significa che saremo in grado di utilizzare quel nuovo metodo su un insieme di elementi. Piace:

$("li").myMethod();

Puoi fare quello che vuoi in questo metodo, ma per essere una specie di buon cittadino che costruisce plugin jQuery dovresti restituire lo stesso insieme di elementi dal plugin.

$.fn.myMethod = function() ( // Do some stuff return this; ));

In questo modo funzionerà con il concatenamento. Se non lo fai e qualcuno ha provato qualcosa del tipo:

$ ("Li"). MyMethod (). Show ();

Ciò fallirebbe, perché .show()sarebbe stato chiamato essenzialmente a nulla. Spesso i plugin jQuery sono progettati per eseguire il ciclo su ogni elemento in modo da avere accesso diretto a ogni singolo elemento nel set per fare ciò che è necessario.

Un'altra cosa da fare per un buon cittadino è racchiudere un plugin in un'espressione di funzione invocata immediatamente e passare jQuery come parametro ad essa. In questo modo puoi utilizzare $ all'interno del codice del plugin in modo più sicuro. Questo perché in alcune situazioni l'abbreviazione $ per jQuery non è disponibile (ad esempio, un utente ha utilizzato jQuery in "modalità compatibilità").

Con entrambe queste ultime due cose a posto, una struttura di plugin diventa:

(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)

Nello screencast abbiamo finito per creare un semplice plugin per aggiungere una freccia alla fine di qualsiasi elemento.

Guarda la penna rwasH di Chris Coyier (@chriscoyier) su CodePen

Naturalmente, può diventare più complesso man mano che aumenta la tua ambizione di fare di più.