jQuery: usare .data() con gli oggetti nello sviluppo di plugin

jQuery ci permette di associare qualsiasi tipo di dati agli elementi di un set. Tra i tipi di dati particolarmente utili nello sviluppo di plugin troviamo gli oggetti.

Nello specifico si tratta di delegare ad un oggetto la logica del plugin attribuendogli metodi e proprietà che in seguito possono essere usati tramite i metodi .data() o $.data().

(function( $ ) {
	$.fn.plugin = function( options ) {
		var defaults = {
			text: "Hello world!",
			color: "green"
		};
		$.fn.plugin.defaults = defaults;
		options = $.extend( $.fn.plugin.defaults, options );

		var Plugin = function( element ) {
			this.$element = element;
			this.init();
		};

		Plugin.prototype = {
			init: function() {
				this.$element.css( "color", options.color );
			},
			action: function() {
				this.$element.text( options.text );
			}
		};

		return this.each(function() {
			var $el = $( this );
			$el.data( "plugin", new Plugin( $el ) );
		});
	};
})( jQuery );

A questo punto con $( selettore ).data( "plugin" ) otterremo un'istanza dell'oggetto Plugin. Quindi:

$(function() {
	var $test = $( "#test" ).plugin();
	$test.data( "plugin" ).action();
});