Ci sono dei favolosi plugin per jQuery. I migliori sono quelli adottati da migliaia di sviluppatori web in tutto il mondo. Fortunatamente, i peggiori falliscono e scompaiono nell’oscurità. Ecco alcuni suggerimenti per garantire ai tuoi plugin di raggiungere la loro piena potenzialità…
10 suggerimenti

1. Non spezzare la catena
A meno che il tuo plugin restituisca un valore, l’ultima riga della funzione plug-in deve essere:
/* */
return this;
/* */
questo assicura la concatenazione tra le chiamate ai metodi, ad esempio:
/* */
$("div#mioId").tuoPlugin().suoPlugin().altroPlugin();
/* */
2. Renderlo facile da usare
Nella maggior parte dei casi, il plugin dovrebbero semplicemente funzionare senza che lo sviluppatore debba guardare anche la documentazione, impostare le opzioni o modificare il codice del plugin.
Se si tratta di un widget visuale, lo sviluppatore non dovrebbe avere bisogno di modificare il codice JavaScript. Si può semplicemente fornire dell’HTML con una classe o id che lancerà automaticamente il codice, ad esempio:
/* */
<section class="mioWidget">
Mio contenuto
</section>
/* */
Il plugin che può inizializzarsi da sé, ad esempio:
/* */
$(function() {
   $("section.mioWidget").mioWidget();
});
/* */
3. Utilizzare un adeguato Naming e i numeri di controllo della versione
Ci sono un sacco di plugin in jQuery. Se stai pensando di dare un nome alla “scheda” per gestirla con un plugin, c’è una forte possibilità che sia già stato usato. Questo potrebbe non sempre importare, ma evitare l’uso di nomi che sono ambigui o suscettibili di scontri.
La numerazione della versione è anche utile. è diventata particolarmente importante quando gli sviluppatori vogliono segnalare dei problemi.
4. Utilizzare le chiusure
Non dipendere mai dal riferimento ‘$’ di jQuery. Se lo sviluppatore ha un’altra libreria installata, può fare presa su questa prima che jQuery che sia stata caricata. Il modo più semplice per risolvere il problema è quello di passare ‘$’ come argomento il in una funzione anonima di auto-avviamento di jQuery, ad esempio:
/* */
(function($) {
	// qui il codice può utilizzare $ 
	// come riferimento a jQuery
})(jQuery);
/* */
5. Impostare i parametri predefiniti
La maggior parte dei plugins impostano i parametri utilizzando la notazione json (acronimo di JavaScript Object Notation), ad esempio:
/* */
$("#select").mioPlugin({opt1: 1, opt2: 2, opt3: "tre"});
/* */
Questo ha diversi vantaggi: i parametri sono facili da leggere, possono essere ordinati in qualunque maniera od omessi completamente.
Tuttavia, è necessario impostare i valori predefiniti all’interno del codice del plugin ed eseguire l’override di conseguenza, ad esempio:
/* */
$.fn.mioPlugin = function(opts) {
	// configurazione di default
	var config = $.extend({}, {
		opt1: 1,
		opt2: 2,
		opt3: 3,
		opt4: 4,
		opt5: 5
	}, opts);
/* */
Il tuo plugin può quindi fare riferimento a parametri utilizzando un codice come config.opt1.
6. Supporto di parametri HTML
Idealmente, i widgets HTML dovrebbero essere in grado di impostare i parametri senza che lo sviluppatore debba modificare il codice JavaScript Si potrebbe prendere in considerazione gli attributi di dati HTML5, per esempio:
/* */
<section class="mioWidget" data-opt1="1" data-opt2="two">
Mio contenuto
</section>
/* */
Questi possono essere accessibili tramite metodo data di jQuery: .data("opt1").
7. Documentare il codice
Aggiungere commenti concisi nella parte superiore del vostro plugin che descrivono:

  • il nome del plugin e la sua versione;
  • cosa fa il plugin;
  • esempi d’uso;
  • i parametri;
  • collegamenti per contatto e supporto.

S’è particolarmente complesso, si consideri un file readme separato.

8. Testare il plugin accuratamente
Provatelo. Poi provatelo di nuovo in tutti i browser.
Ci possono essere dei problemi che non siete disposti a risolvere, ad esempio i problemi di compatibilità con IE6. Va bene, ma assicuratevi che sia menzionato nella documentazione.
9. Utilizzare un buon modello
Ecco il codice del modello che uso quando creo un nuovo plugin:
/*!
 * jQuery plugin
 * Che cosa fa
 */
(function($) {
	$.fn.NomePlugIn = function(opts) {
		// configurazione di default
		var config = $.extend({}, {
			opt1: null
		}, opts);
		// funzione principale
		function faQualcosa(e) {
		}
		// inizializza ogni elemento
		this.each(function() {
			faQualcosa($(this));
		});
		return this;
	};
	// partenza
	$(function() {
		$("#select").NomePlugIn();
	});
})(jQuery);
/* */
Questo modello fornisce un buon punto di partenza per:

  • avvolgere il plugin in una chiusura;
  • definire le opzioni di default che saranno sovrascitte dai parametri del plugin;
  • passare ogni elemento selezionato alla funzione faQualcosa come oggetto jQuery;
  • restituire this;
  • e il codice per l’auto-avvio ch’è fornito alla fine.
10. Prendi la parola
Se desideri che gli sviluppatori utilizzino il tuo plugin, caricarlo nei repositori come GitHub, Google Code e nella directory dei plugin di jQuery. Creare pagine per la dimostrazione, pubblicizzalo in articoli e tweettalo incessantemente.
Quindi essere pronti a sostenere il plugin e aggiornarlo quando è necessario. Riceverai domande stupide e bizzarre richieste di nuove funzioni, ma tutto questo fa parte per essere un autore di plugin di successo.
Similari
Il framework jQuery e jQuery-plugins
12% Plugins
jQuery è una ben nota libreria Javascript Web 2.0 light-weight cross-browser, sviluppato da un team guidato da John Resig. jQuery è costruito sulla cima di Sizzle, che è un motore per i selettori CSS scritto in Javascript …
Oggetti Letterali con jQuery
7% JQuery
Si tratta di una traduzione di un articolo molto interessante originariamente apparso nel numero di marzo 2009 su JSMag, che descrive i passi a seguire per creare un Oggetto Letterale. [expand expanded=”true” title=”Usando…
Gruppi di 50 e passa esempi in Ajax
7% Ajax
Le applicazioni web hanno fatto passi da gigante nel miglioramento della user experience, grazie anche alla tecnologia Ajax. Quando si combinano le funzionalità di PHP con la bravura di javascript si possono produrre risul…
Disabilitare il tasto destro del mouse facilmente utilizzando jQuery
6% JQuery
Ho letto diversi messaggi sui forum con richieste su come disabilitare l’evento del tasto destro del mouse in JavaScript. Beh, la soluzione è piuttosto semplice se si usa jQuery! Il trucco è quello di legare (to bind) l’ev…
Cos’è this?
6% JQuery
Uno degli aspetti più confusi di jQuery è come assegna l’ambito durante il callback. Deve essere parecchio confuso perché l’argomento genera un sacco di domande sulla mailing list di jQuery. Peccato, davvero, perché jQuery…