jQuery: come definire i metodi privati dei plugin

jQuery: come definire i metodi privati dei plugin

Nella terminologia OOP, un metodo privato è una funzione che opera all'interno dell'oggetto senza poter essere accessibile dall'esterno dell'oggetto. I plugin jQuery sono oggetti e come tali possono avere metodi privati che operano sui dati.

Immaginiamo un plugin che ridimensioni le immagini in modo proporzionale in base alla larghezza e altezza fornite dall'utente nelle sue opzioni. Questo plugin avrà un metodo privato, che è poi una funzione, che opererà sulle immagini eseguendo i calcoli necessari al loro ridimensionamento.

Il metodo andrà definito prima della funzione di return ma eseguito all'interno del ciclo .each() contenuto in tale funzione in modo da legarsi a tutte le istanze delle immagini selezionate e non solo alla prima immagine del set:


(function($) {
	$.fn.imageResize = function(options) {
		if (!this.is('img')) {
			return;
		}
		var defaults = {
			width: 150,
			height: 150
		};
		options = $.extend(defaults, options);
		var _resize = function(img) {
				var maxWidth = options.width;
				var maxHeight = options.height;
				var ratio = 0;
				var width = $(img).width();
				var height = $(img).height();
				if (width > maxWidth) {
					ratio = maxWidth / width;
					$(img).css('width', maxWidth);
					$(img).css('height', height * ratio);
				}
				if (height > maxHeight) {
					ratio = maxHeight / height;
					$(img).css('height', maxHeight);
					$(img).css('width', width * ratio);
				}
			};
		return this.each(function() {
			_resize(this);
		});
	};
})(jQuery);

Esempio d'uso:


$('#resize').click(function() {

    $('img', '#gallery').imageResize({
        width: 100,
        height: 100
    });

});​

I metodi privati vengono contrassegnati con un underscore. Ciò facilita la loro individuazione all'interno del codice. Nel nostro esempio il metodo accetta un oggetto this come parametro. Tale parola chiave si riferisce a ciascuna immagine nel set selezionato. Essendo invocato alla fine, il metodo opera su tutte le immagini del set jQuery.

Torna su