JavaScript  »  Articoli  »  MooTools 

MooTools: usare Events e Options

di: Riccardo Degni     05 Novembre 2007

Meccanismo di ereditarietà

Ora che abbiamo visto come funziona il meccanismo di creazione e di gestione degli oggetti di tipo Class, vediamo come estendere l'oggetto precedentemente creato, Car, con funzionalità nuove rappresentate da un nuovo oggetto chiamato SuperCar:

var Car = new Class({

options: {
numeroPorte: 4,
alimentazione: 'diesel',
onStart: function() {
alert('Macchina accesa');
},
onFinish: function() {
alert('Macchina spenta');
}
},

initialize: function(name, options) {
this.name = name;
this.setOptions(options);
},

avvio: function() {
this.fireEvent('onStart');
},

spegnimento: function() {
this.fireEvent('onFinish');
}
});

Car.implement(new Events, new Options);

var SuperCar = Car.extend({

options: {
numeroMarce: 6,
velMax: 320,
onChange: function(num) {
alert('Marcia aumentata: sei in ' + num);
},
onError: function(num) {
alert('Non puoi inserire più di ' + num + ' marce');
}
},

initialize: function(name, options) {
this.parent(name, options);
this.marcia = 0;
},

aumenta: function() {
if(this.marcia < this.options.numeroMarce) {
this.marcia ++;
this.fireEvent('onChange', this.marcia);
}
else this.fireEvent('onError', this.options.numeroMarce);

}

});

L'oggetto SuperCar eredita tutti i metodi e le opzioni dell'oggetto Car, in più, definisce tre nuove opzioni:

  • l'evento onChange che scatta quando aumentiamo la marcia;
  • l'evento onError che dice che non è possibile inserire un numero di marce superiore a quelle dichiarate nell'opzione numeroMarce;
  • la velocità massima.

Ho creato questo esempio per mostrare tutta la potenza e la flessibilità degli oggetti Class. Ovviamente questo non è tutto quello che è possibile fare, basta dare un'occhiata ai meccanismi degli effetti Fx per comprenderne le infinite potenzialità.

Guide JavaScript

Guida Node.js

Il framework che permette di per usare V8, l'interprete JavaScript...

Canvas, guida ai framework

Canvas, tra gli elementi di HTML5 è forse quello di maggior impatto....

Guida jQuery UI

Creare siti ricchi e dinamici con jQuery UI, il progetto ufficiale...

Altre guide

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso JQuery e Ajax per Webmaster

03 Luglio 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti