Linee guida per la creazione di plugin jQuery

Linee guida per la creazione di plugin jQuery

La percentuale di plugin jQuery realmente utile è straordinariamente bassa. Volendo stimare il loro numero, dobbiamo purtroppo dire che i plugin usati più di una volta nel nostro lavoro si contano sulle dita di una mano. Nel mio caso sono Cycle, FancyBox e Colorbox. Tre. La mia opinione è però condizionata dal fatto che in genere mi piace più risolvere i problemi in modo autonomo che affidarmi ai plugin. L'unica eccezione sono gli slideshow con effetti particolari. Per quelli in genere uso plugin, specie quando le deadline non mi consentono di trovare una soluzione personalizzata. Anche in quel caso ho però notato una certa omologazione nel modo di scrivere plugin: infatti, svolgono quasi tutti gli stessi compiti con gli stessi effetti. Ma l'aspetto più negativo da me notato è la scarsa usabilità, flessibilità e adattabilità della stragrande maggioranza dei plugin. In questo articolo vorrei dare delle indicazioni per scrivere plugin che effettivamente risolvano dei problemi piuttosto che crearne di nuovi.

Specificità

Sforzatevi di scrivere plugin che svolgano un solo compito specifico ma lo svolgano bene. Chiedetevi sempre: qual'è un problema ricorrente nell'implementazione front-end di un sito che necessiterebbe di un plugin jQuery? Esempio: clear automatico degli elementi flottati senza dover aggiungere manualmente classi CSS.

Soluzione:


(function($) {

	$.fn.clearFloats = function(options) {
	
		var that = this;
		options = $.extend({
			mode: 'overflow'
		}, options);
		
		return that.each(function() {
		
			var parent = that.parent();
			
			if(that.css('float') !== 'none') {
			
				switch(options.mode) {
				
					case 'overflow':
						parent.css('overflow', 'hidden');
						break;
					case 'height':
						parent.height(that.height());
						break;
					case 'float':
						parent.css('float', that.css('float'));
						break;
					default:
						parent.css('overflow', 'hidden');
						break;
				
				}
			
			
			} else {
			
				return;
			
			}
		
		});
	
	};



})(jQuery);

Un solo compito, ma svolto nel migliore dei modi possibili. Evitate di scrivere plugin che vogliano fare tutto il possibile e l'immaginabile. Concentratevi su quello di cui c'è veramente bisogno.

Usabilità

I vostri plugin dovrebbero essere semplici da usare. Se per capire come funziona il vostro plugin ci vogliono ore di tentativi, allora sicuramente c'è qualcosa che non funziona a livello di usabilità.

Per prima cosa, usate il giusto numero di opzioni. Ricordate che potete sempre creare in futuro nuove versioni del vostro plugin, quindi non c'è bisogno che esauriate da subito tutte le opzioni possibili. Non esagerate con le opzioni: un utente in genere ne userà veramente poche, ossia quelle che gli servono per far funzionare bene il plugin, ma nulla più.

Un altro aspetto fondamentale sono la documentazione e gli esempi: dovete fornire una documentazione dettagliata, descrivendo tutte le opzioni e gli usi del vostro plugin. Inoltre dovete fornire degli esempi "live", liberamente consultabili.

Includete nel file del download tutti gli esempi e la documentazione, più tutte le dipendenze necessarie (immagini, CSS, eccetera). Includete anche una copia di jQuery, in modo che l'utente possa usare gli esempi offline. Infine, ricordatevi di includere una copia minificata del vostro plugin nel download (chiamatela jquery.plugin.min.js).

Metadati nel codice

Commentate accuratamente il vostro codice, specie per quegli utenti avanzati che potrebbero voler modificare il vostro plugin. Inserite dei metadati all'inizio del plugin, specificando una descrizione del plugin, la versione di jQuery richiesta (fondamentale) e la licenza d'uso:


/**
  * Plugin: Descrizione
  *
  * @author Gabriele Romanato
  * @version 1.0
  * @require jQuery 1.5+
  * @license GPL
                            */

Nel codice, cercate di spiegare quei passaggi chiave fondamentali per il funzionamento del plugin. Esempio:


var parent = that.parent(); // Il clear va applicato al diretto genitore del float

L'ideale sarebbe usare JSDoc, ma anche dei commenti semplici ma efficaci possono servire allo scopo.

Torna su