Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Diseño web | Promoción web | Ganar dinero
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Extend: extendiendo clases en Mootools


Las clases en Mootools se pueden extender, mediante extend, para añadir nuevas funcionalidades o crear otras clases más complejas.


19/5/08 - Una de las ventajas de la programación orientada a objetos es la creación de clases extendiendo las clases que ya tenemos. Por ese método podemos crear clases que heredan las propiedades y métodos (es decir, los atributos y funcionalidades) de otras clases. Todo esto tiene como ventaja que podremos reutilizar código y hacer cosas más complejas basándonos en trabajos realizados anteriormente, por nosotros o por otros programadores.

En este artículo del manual de Mootools vamos a ver cómo extender clases, utilizando extend.

Qué es la extensión de clases

Para comprender los mecanismos o las ventajas de la extensión de clases podemos verlo con un ejemplo típico. Por ejemplo, pensemos en los animales. Si tuviéramos que modelizar en programación orientada a objetos la clase animal, le asignaríamos unas propiedades y métodos cualesquiera que necesitásemos.

Otro día podríamos querer definir la clase mamífero (es un animal que tiene unas características específicas). Entonces tendríamos la posibilidad de reescribir todo el comportamiento definido para los animales y añadirle todo el comportamiento o características de los mamíferos. Pero eso no sería totalmente óptimo, porque con ello estaríamos reescribiendo el mismo código que se había programado ya para los animales. Estaríamos haciendo el trabajo dos veces y eso es algo que la programación orientada a objetos trata de evitar.

La programación orientada a objetos permite la herencia o extensión de clases que en estos casos nos viene como anillo al dedo. Debido a que un mamífero es un animal que tiene unas particularidades especiales, lo interesante es definir los mamíferos como una extensión de los animales. Es decir, hacer una clase mamífero que herede las propiedades y métodos de los animales. Con ello sólo tendríamos que definir los comportamientos y características propias de los mamíferos, apoyándonos en el trabajo realizado anteriormente para la modelización de los animales.

Así mismo, si definiésemos la clase reptil, pues también podríamos ayudarnos extendiendo la clase animal. Es decir, modelizaríamos el reptil a partir del animal (extendiendo la clase animal) y añadiendo los métodos y propiedades de los reptiles.

El esquema de herencia se puede llevar hasta donde sea necesario. Si algún día necesitamos definir la clase perro, pues podríamos hacerlo extendiendo la clase mamífero. O si definimos la clase Dogo Alemán podríamos hacerlo a través de extender la clase perro. Etc etc…

Esto tiene varias ventajas. Una es la reutilización de código, como ya hemos dicho. Otra ventaja sería la encapsulación. Dado que sabemos que la clase perro funciona tal cual queremos, pues podemos crear todas clases con distintas las razas de perros sin preocuparnos de cómo funcionan los perros, ni como funcionan los mamíferos, ni los animales, porque todas esas clases fueron creadas como un paquete que se comprobó que funcionaba correctamente. Pero si algún día detectamos que una de nuestras clases funciona mal, o se le desea añadir una funcionalidad, simplemente tenemos que editarla y automáticamente ese cambio se trasladará a todas las clases que la extiendan.

Con la herencia, como se puede entender, ganamos en reusabilidad, facilidad de mantenimiento y creación del código.

Como se realiza un extend en Mootools

En Mootools existe la instrucción extend, que se aplica sobre clases para extender o generar una clase a partir de otra.

Para la clase que comentábamos antes de los animales, podríamos tener:

var Animal = new Class({
   //propiedades y métodos de los animales
});

Ahora los mamíferos se crearían así:

var Mamifero = Animal.extend({
   //propiedades y métodos de los mamíeros
});

Después de este código, el mamífero sería la suma de las propiedades y métodos de los animales (esas propiedades y métodos estarían heredadas de los animales) y las propiedades y métodos propios de los mamíferos.

Ejemplo completo de herencia o extensión de clases en Mootools

Vamos a hacer un ejemplo sencillo de herencia en Mootools. En el ejemplo vamos a tener una clase que servirá de punto de partida, llamada InstrumentoMusical, que modeliza cualquier instrumento musical. Luego tendremos varios instrumentos musicales que crearemos extendiendo la clase InstrumentoMusical.

Haríamos la clase InstrumentoMusical de la siguiente forma:

var InstrumentoMusical = new Class({
   initialize: function(tipo){
      this.tipo = tipo;
   }
});

Como vemos simplemente hemos creado un constructor, que recibe el tipo de instrumento (si es de cuerda, percusión, viento, etc) y lo introduce en una propiedad del objeto llamada tipo.

Luego podríamos crear la clase guitarra de esta manera:

var Guitarra = InstrumentoMusical.extend({
   
   initialize: function(cuerdas){
      this.parent("instrumento de cuerda");
      this.numCuerdas = cuerdas;
   },
   
   sonar: function(){
      alert("tran tran tran");
   }
});

Como se puede ver, la clase guitarra está extendiendo la clase InstrumentoMusical.

A la clase guitarra le hemos incorporado un constructor que recibe un parámetro que es el número de cuerdas que va a tener la guitarra. En dicho constructor estamos haciendo una línea que cabría explicar:

this.parent("instrumento de cuerda");

Con esta línea estamos llamando al método initialize de la clase padre que se está extendiendo (el constructor de la clase InstrumentoMusical) pasándole "instrumento de cuerda" como parámetro. Luego las guitarras creadas tendrán como siempre tipo de instrumento el valor "instrumento de cuerda".

Además hemos hecho un métido llamado sonar en la clase guitarra que hace que la guitarra suene.

Posteriormente podríamos crear la clase batería, que es otro instrumento musical compuesto por varios elementos de percusión.

var Bateria = InstrumentoMusical.extend({

   initialize: function(numeroElementos){
      this.parent("instrumento de percusion");
      this.numeroElementos = numeroElementos;
   },
   
   sonar: function(){
      for (i=1; i<=this.numeroElementos; i++){
         alert ("Sonando elemento " + i);
      }
   }
});

La batería tiene sus propias particularidades, pero se basa en la clase InstrumentoMusical para funcionar. Igual que ocurría con la guitarra, extiende la clase InstrumentoMusical.

Luego la batería tiene un método sonar, que hace ruido, pero este es diferente del de la guitarra.

Para utilizar estas dos clases podríamos hacer algo como esto:

var miGuitarra = new Guitarra(6);
alert(miGuitarra.tipo);
miGuitarra.sonar();

var miBateria = new Bateria(3);
alert(miBateria.tipo);
miBateria.sonar();

Podemos ver el ejemplo en marcha en una página aparte.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 2 categorias relacionadas

 Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Manual de Mootools

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Javascript
+ Entrar en Frameworks Javascript


 Comentarios de los visitantes
Aun no hemos recibido comentarios de este artículo.
Puedes ser el primero en enviar tu comentario.



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Manual de Mootools
Categorías
+Javascript
+Frameworks Javascript

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia