mercoledì 30 aprile 2008

Javascript: Mootools e classi

Per chi non lo conoscesse Mootools è un framework Javascript creato per facilitare la scrittura di codice orientato agli oggetti garantendo altresì la compatibilità con i diversi browser.

Chi ha avuto la voglia (e la pazienza perché gli articoli erano piuttosto lunghi) di leggere quanto scritto un po' di tempo fa a proposito di programmazione a oggetti in Javascript (Javascript: Esempi di Programmazione a Oggetti, Javascript: Oggetto prototype ed ereditarietà) ricorderà come le differenze in questo campo tra Javascript e i più tradizionali linguaggi orientati agli oggetti siano notevoli.

Uno degli scopi di Mootools è proprio quello di facilitare la vita agli sviluppatori con esperienza in linguaggi quali C++, Java o PHP5 consentendo loro di programmare a oggetti in Javascript con una metodologia di lavoro ed una terminologia più familiare.

Detto così, il tutto può risultare abbastanza generico, per cui è bene passare ad un esempio concreto.

Ereditarietà in Javascript puro

Riciclo un esempio già visto nell'articolo su Javascript, prototype ed ereditarietà citato sopra

function Veicolo(passeggeri) {
 this.velocita = 0;
 this.passeggeri = 0;
 this.carica = function(passeggeri) {
   if(passeggeri > 0) {
     this.passeggeri += passeggeri;
   }
 }
 this.carica(passeggeri);
}
function Aereo(passeggeri) {
 this.carica(passeggeri);
 this.altitudine = 0;
 this.decolla = function() {
   this.velocita = 100;
   this.altitudine = 10;
 }
}
Aereo.prototype = new Veicolo();
Aereo.prototype.constructor = Aereo;

Ereditarietà con 'classi' Mootools

L'equivalente utilizzando le classi MooTools

var Veicolo = new Class({
 initialize: function(options) {
   this.options = options;
   this.passeggeri = 0;
   this.velocita = 0;
   if(this.options.passeggeri) {
     this.carica(this.options.passeggeri);
   }
 },
 carica: function(passeggeri) {
   if(passeggeri > 0) {
     this.passeggeri += passeggeri;
   }
 }
})

var Aereo = Veicolo.extend({
 initialize: function(options) {
   this.parent(options);
   this.altitudine = 0;
 },
 decolla: function() {
   this.velocita = 100;
   this.altitudine = 10;
 }
})
Fare click qui per eseguire l'esempio.

L'esempio non sfrutta che in minima parte le potenzialità del framework, però credo possa servire a vedere che aspetto ha una 'classe' Mootools.

Chiaramente si tratta di una sovrastruttura, 'sotto' c'è sempre l'ereditarietà prototipale di Javascript e non potrebbe essere diversamente. L'equivalente di ciò che in Javascript otteniamo riassegnando l'oggetto prototype, utilizzando MooTools lo si fa tramite l'oggetto Class e .extend.

Questo è solo un primo contatto avremo modo di parlare ancora di MooTools.

Nessun commento:

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.