jQuery: introduzione agli oggetti JavaScript per autori di plugin

jQuery: introduzione agli oggetti JavaScript per autori di plugin

Alcuni fra i miei "venticinque lettori" scrivono regolarmente su jQuery e spesso pubblicano plugin di loro creazione (come News Spot Slider di Davide De Maestri). Ogni tanto consiglio loro di usare gli oggetti nei loro plugin, ma spesso mi rendo conto che oltre a consigliare occorre anche spiegare come funzionano gli oggetti JavaScript nel contesto di jQuery. Ecco il perchè di questo articolo.

Cos'è un oggetto?

In JavaScript un oggetto è semplicemente una collezione di proprietà che contengono dei valori. Quando questi valori sono delle funzioni, allora si usa il termine metodo per designare una proprietà.

Gli oggetti si dividono in due grandi categorie: quelli che possono essere instanziati tramite l'operatore new e quelli che non possono esserlo. Al primo gruppo appartengono le funzioni, al secondo gli oggetti letterali. Esempio:


function Plugin() {}

var myPlugin = new Plugin();

var Plugin = { };

Gli oggetti vanno scritti con le iniziali in maiuscolo per distinguerli dal resto del codice. I due oggetti appena visti sono privi di proprietà, ma sono oggetti a tutti gli effetti.

myPlugin si dice che è un'istanza dell'oggetto Plugin. Noi non possiamo usare questo tipo di oggetti direttamente, ma dobbiamo instanziarli. Al contrario, il secondo oggetto è un oggetto letterale e non ha bisogno di essere istanziato, ossia possiamo usarlo direttamente.

Aggiungere proprietà agli oggetti

Costruttori

Se usiamo una funzione come costruttore di un oggetto, possiamo aggiungere proprietà usando la parola chiave this. A cosa fa riferimento? Essa fa riferimento all'oggetto corrente. Nel caso di Plugin fa riferimento a Plugin:


function Plugin() {

	this.element = $('#test');

}

Ora l'oggetto ha una proprietà che contiene un riferimento ad un elemento jQuery. Possiamo accedere a questa proprietà dall'esterno dell'oggetto:


var myPlugin = new Plugin();
var myElement = myPlugin.element;

myElement.addClass('test');

Istanziato l'oggetto, accediamo alla sua proprietà con la notazione puntata (oggetto.proprietà). Possiamo accedere al suo valore anche dall'interno dell'oggetto usando this:


function Plugin() {

	this.element = $('#test');
	this.method = function() {
	
		this.element.addClass('test');
	
	};

}

Qui abbiamo definito un metodo specificando una funzione. Come prima possiamo accedere a questo metodo molto facilmente:


var myPlugin = new Plugin();
myPlugin.method();

E ovviamente lo stesso vale anche dall'interno dell'oggetto:


function Plugin() {

	this.element = $('#test');
	this.method = function() {
	
		this.element.addClass('test');
	
	};
	
	this.run = function() {
	
		this.method();
	
	};


}

Lo svantaggio di questo tipo di oggetti è che occorre usare sempre l'operatore new. Possiamo usare tuttavia le caratteristiche viste sinora utilizzando il seguente pattern che ci evita di dover instanziare l'oggetto:


var Plugin = new function() {

	this.element = $('#test');
	this.method = function() {
	
		this.element.addClass('test');
	
	};
	
	this.run = function() {
	
		this.method();
	
	};



}();

Questo tipo di funzione crea automaticamente un'istanza dell'oggetto Plugin. Quindi possiamo scrivere direttamente:


Plugin.run();

Oggetti letterali

Gli oggetti letterali non hanno bisogno della parola chiave this per aggiungere le proprietà. Infatti è sufficiente definire il nome della proprietà seguito dai due punti e dal suo valore. Le coppie proprietà/valore vengono separate da una virgola, eccetto l'ultima:


var Plugin = {

	element: '#test',
	
	method: function() {
	
		$(Plugin.element).addClass('test');
	
	},
	
	run: function() {
	
		this.method();
	
	}


};

this e jQuery

Attenzione: se si usa this all'interno del wrapper $(), questa parola chiave punterà sempre all'oggetto corrente, ma in questo caso non sarà più Plugin ma jQuery! Il browser restituirà un errore perchè la proprietà element non esiste nell'oggetto jQuery, ossia è undefined.

Possiamo accedere alle proprietà di un oggetto letterale in modo diretto:


Plugin.run();

Nei plugin gli oggetti letterali vengono di norma usati per definire le opzioni del plugin.

Gestire this

this può riservare brutte sorprese con jQuery. Di norma all'interno di un oggetto questa parola chiave indica anche il contesto di esecuzione corrente. Dato che jQuery può creare diversi contesti annidati, this può non risultare sempre accessibile. Per questo motivo si consiglia di memorizzarlo subito in una variabile:


function Plugin() {

	var that = this;
	
	// ...

}

In questo modo il this che vogliamo sarà sempre disponibile.

Visibilità delle proprietà e dei metodi

Quasi tutte le proprietà e i metodi visti sinora possono essere definite pubblici perchè sono accessibili anche al di fuori dell'oggetto in cui sono state definite. L'unica eccezione è that, che può essere definita privata perchè accessibile solo all'interno dell'oggetto. In JavaScript, infatti, le variabili definite in un determinato contesto sono accessibili solo dal codice presente in quel contesto.

Esempio:


var Plugin = new function() {

	var element = $('#test'); // privata
	var method = function() { // privata
	
		element.addClass('test');
	
	};
	
	this.run = function() { // pubblica
	
		method();
	
	};


}();

Plugin.method(); // errore, è privata
Plugin.run();  // funziona, è pubblica

Potete usare queste variabili interne per definire quelle proprietà e quei metodi ad uso esclusivamente interno del vostro oggetto.

Torna su