jQuery: prevenire il problema delle istanze multiple dei plugin

Le istanze multiple di un plugin jQuery possono causare svariati problemi. Tuttavia esiste una soluzione.

Consideriamo il caso in cui un plugin viene invocato dinamicamente:

$( "#action" ).on( "click", function( e ) {
	e.preventDefault();
	$( "#slides" ).slideshow();
});

Al primo click il plugin funziona correttamente ma al secondo click il nostro slideshow si comporta in modo errato. Questo avviene perché al secondo click viene creata una seconda istanza del plugin sulla prima.

Occorre utilizzare uno specifico pattern:

(function( $ ) {
	$.fn.slideshow = function( options ) {
		//...
		
		var Slideshow = function( element ) {
			// Codice del plugin
			
			this.init(); // Inizializza il codice
		};
		
		Slideshow.prototype = {
			init: function() {
				// Usa gli altri metodi e definisce le proprietà
			},
			// Altri eventuali metodi
		};
		
		return this.each(function() {
			var $element = $( this );
			
			// Verifichiamo la presenza dell'istanza del plugin
			
			if( !$element.data( "slideshow" ) ) {
				var slideshowInstance = new Slideshow( $element );
				$element.data( "slideshow", slideshowInstance );
			}
		});
	};
	
})( jQuery );