JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Questo articolo è la continuazione di Tooltip con le classi di Prototype: la lettura del precedente articolo è consigliata, in quanto alcune nozioni di base sulla creazione delle classi Javascript sono date per assunte. Approfondiremo lo scripting object oriented consentito dall'utilizzo del framework Prototype attraverso la crezione di un esempio pratico: un News Scroller (verticale e orizzontale) non intrusivo, imitando il comportamento ottenuto con il tag <marquee>, un elemento deprecato che non è mai entrato negli standard del W3C. Interessantee al riguardo anche l'articolo "News scroller in Javascript non intrusivo" di Cesare Lamanna, il cui esempio (disponibile solo in versione verticale) non richiede alcuna libreria di supporto. Desidero menzionare anche il post originale sull'ereditarietà delle classi in Prototype, su Syntactic Sugar, che è senza dubbio un ottimo approfondimento sull'argomento della programmazione ad oggetti in Javascript.

Classes Inheritance con Prototype

Vediamo qualche esempio teorico su alcune delle funzionalità che utilizzeremo nel News Scroller. Con la versione di Prototype 1.6 si è aggiunta la possibilità di estendere le classi con facilità, da una classe principale a delle sottoclassi discendenti che ne ereditano i metodi, gli oggetti e le relative proprietà. Nel precedente articolo abbiamo conosciuto abbastanza approfonditamente la sintassi di Class.create() per la creazione di una classe e il suo metodo costruttore initialize(); diciamo ora che Class.create() accetta un numero arbitrario di argomenti. Se il primo è un'altra classe, la nuova classe eredita da essa e la estende. Tutti gli altri eventuali argomenti sono passati come metodi dell'istanza. Subito un po' di codice dove creiamo una classe base e una secondaria derivata da essa:

var baseClass = Class.create({
    initialize:function(){
		// Costruttore
	},

	somefunction : function(){
		$$('body')[0].insert("<p>Hai eseguito somefunction in una istanza di baseClass</p>");
	},

	anotherfunction : function(){
		$$('body')[0].insert("<p>Hai eseguito anotherfunction in una istanza di baseClass</p>");
	}
	
})

var BaseClassExtended = Class.create(baseClass, {
	initialize:function(){
	},

	somefunction : function(){		
		$$('body')[0].insert("<p>Hai eseguito somefunction in una istanza di BaseClassExtended</p>");
	},

	anotherfunction : function($super){
		$super();
		$$('body')[0].insert("<p>Hai eseguito anotherfunction in una istanza di BaseClassExtended</p>");
	}
})

Proviamo per prima cosa (esempio), il funzionamento della classe principale baseClass, istanziandola nella funzione startDemo() e invocando il metodo della classe somefunction():

	var startDemo = function() {
		var firstInstance = new baseClass();
		firstInstance.somefunction();
	}

	Event.observe (window, 'load', startDemo); 

Il risultato ottenuto non è niente di eccezionale, viene inserito nel documento un semplice paragrafo che ci conferma la nostra azione: "Hai eseguito somefunction in una istanza di baseClass". Continuiamo con un secondo esempio; stavolta prendiamo in esame la classe che estende la principale, BaseClassExtended, invocando il medesimo metodo somefunction(): per far questo bisogna modificare il contenuto della funzione starDemo() con una nuova istanza:

	var startDemo = function() {
		var secondInstance = new BaseClassExtended();
		secondInstance.somefunction();
	}

In questo caso, il paragrafo inserito dallo script ci notifica che la classe estesa ha sovrascritto il metodo somefunction() originario della classe base: "Hai eseguito somefunction in una istanza di BaseClassExtended".

Altri articoli

Altre guide

Altre newsletter