Extends: Estendendo classes com Mootools

Veremos como realizar herança de classes (programação orientada a objetos) em Mootools. Como estender classes, utilizando Extends.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 21/1/09
Valorize este artigo:
Uma das vantagens da programação orientada a objetos é a criação de classes estendendo as classes que já temos. Por esse método podemos criar classes que herdam as propriedades e métodos (ou seja, os atributos e funcionalidades) de outras classes. Tudo isto tem como vantagem que poderemos reutilizar código e fazer coisas mais complexas baseando-nos em trabalhos realizados anteriormente, por nós ou por outros programadores.

Neste artigo do manual de Mootools de CriarWeb.com veremos como estender classes, utilizando Extends.

O que é a extensão de classes

Para compreender os mecanismos ou as vantagens da extensão de classes podemos vê-lo com um exemplo típico. Por exemplo, pensemos nos animais. Se tivéssemos que modelar em programação orientada a objetos a classe animal, lhe atribuiríamos umas propriedades e métodos quaisquer que necessitássemos.

Outro dia poderíamos querer definir a classe mamífero (é um animal que tem umas características específicas). Então, teríamos a possibilidade de reescrever todo o comportamento definido para os animais e adicionar todo o comportamento ou características dos mamíferos. Porém, isso não seria totalmente bom, porque com isso estaríamos reescrevendo o mesmo código que já se havia programado para os animais. Estaríamos fazendo o trabalho duas vezes e isso é algo que a programação orientada a objetos trata de evitar.

A programação orientada a objetos permite a herança ou extensão de classes que nestes casos nos beneficia muito. Devido a que um mamífero é um animal que tem umas particularidades especiais, o interessante é definir os mamíferos como uma extensão dos animais. Ou seja, fazer com que uma classe mamífero herde as propriedades e métodos dos animais. Com isso só teríamos que definir os comportamentos e características próprias dos mamíferos, apoiando-nos no trabalho realizado anteriormente para a modelação dos animais.

Ainda assim, se definíssemos a classe réptil, pois também poderia nos ajudar estendendo a classe animal. Ou seja, modelaríamos o réptil a partir do animal (estendendo a classe animal) e adicionando os métodos e propriedades dos répteis.

O esquema de herança se pode levar até onde for necessário. Se algum dia necessitarmos definir a classe cachorro, pois poderíamos fazer estendendo a classe mamífero. Ou se definimos a classe Dog Alemão poderíamos fazer estendendo a classe cachorro. Etc etc…

Isto tem várias vantagens. Uma é a reutilização de código, como já dissemos. Outra vantagem seria a encapsulação. Visto que sabemos que a classe cachorro funciona tal como queremos, pois podemos criar todas as classes com distintas raças de cachorros sem nos preocuparmos de como funcionam os cachorros, nem como funcionam os mamíferos, nem os animais, porque todas essas classes foram criadas como um pacote que se comprovou que funcionava corretamente. Porém, se algum dia detectarmos que uma de nossas classes funciona mal, ou se deseja adicionar uma funcionalidade, simplesmente temos que editá-la e automaticamente essa mudança se transferirá a todas as classes que a estenderem.

Com a herança, como se pode entender, ganhamos em re-usabilidade, facilidade de manutenção e criação do código. Agora que já temos umas idéias básicas sobre a herança, vamos continuar este artigo de criarweb .com, com umas explicações para aprender a implementá-la em Mootools.

Extends em Mootools 1.2

A versão de Mootools 1.2 tem uma maneira nova de realizar a extensão de classes, ou seja, classes que herdam propriedades e métodos de outras classes.

Temos que criar a classe que vai herdar como qualquer outra classe (com a correspondente new Class), e dentro da própria classe especificaremos que se deseja estender outra classe com a palavra Extends: e o nome da classe da qual pretendemos herdar.

Por exemplo, temos aqui uma classe "Animal" de exemplo:

var Animal = new Class({
   initialize: function(nome){
      this.nome = nome;
   },
   terFilho: function(){
      alert("Produz-se um novo " + this.nome);
   }
});

E agora vamos fazer uma classe chamada "Mamifero" que herda de "Animal".

var Mamifero = new Class({
   Extends: Animal,
      initialize: function(nome, sexo, semanas_gestacao){
         this.parent(nome);
         this.sexo = sexo;
         this.semanasGestacao = semanas_gestacao;
      },
   terFilho: function(){
      if (this.sexo = "femea"){
         alert("Passam " + this.semanasGestacao + " semanas de gestação... e chega o parto");
         this.parent();
      }
   },
});

Como se pode ver, criamos a classe como qualquer outra, com a palavra new Class

var Mamifero = new Class({
   ....
});

Agora temos que prestar atenção ao uso da palavra Extends: para indicar a classe da que queremos herdar.

Extends: Animal,

Isso quer dizer que vamos estender a classe Animal, definida anteriormente. Leva uma vírgula no final porque vamos continuar definindo métodos e/ou propriedades específicas dos mamíferos, que são as que vão estender a classe "Animal" para criar a classe estendida "Mamífero".

Agora neste exemplo vamos redefinir o construtor. A classe "Animal" já tinha seu próprio construtor, porém como os mamíferos são mais complexos que os animais, temos que redefinir o construtor para realizar a iniciação completa dos mamíferos.

Não obstante, no construtor se pode aproveitar o construtor da classe da qual se herda. Ou seja, no construtor do mamífero podemos fazer uso do construtor do animal, para iniciar as características dos animais. Para isso, utilizamos esta linha de código:

this.parent(nome); Este parent é uma chamada ao construtor da classe pai, ou seja, da classe que estamos herdando. Com isso, podemos fazer uso do construtor definido anteriormente para a classe "Animal", de modo que essa parte do código não tem por que ser escrita de novo.

Cabe dizer que o mencionado parent se pode utilizar em qualquer método que tiver reescrito na classe que se herda. Por exemplo, a classe "Mamífero" neste exemplo redefine o método "terFilho" e dentro do código deste método, como se pode ver, também se faz uso de parent para chamar ao método "terFilho", porém da classe que se herda ("Animal").

Para utilizar esta classe "Mamífero" poderíamos utilizar este código:

var meuMamifero = new Mamifero("cachorro", "femea", 9);
meuMamifero.terFilho();

Este exemplo se pode ver em funcionamento.

Com isto já sabemos estender classes em Mootools, porém para completar este artigo de criarweb.com, vamos apresentar outro exemplo de herança, que será bom para continuar aprendendo sobre programação orientada a objetos.

Como se realiza um extend em Mootools 1.1

Agora veremos umas anotações sobre extend em Mootools 1.1, já que a herança se implementa de uma maneira distinta nesta versão do framework Javascript. No entanto, inclusive utilizando Mootools 1.2 será bom dar uma olhada neste exemplo para dar um impulso aos nossos conhecimentos para dominar a programação orientada a objetos.

Em Mootools existe a sentença extend, que se aplica sobre classes para estender ou gerar uma classe a partir de outra.

Para a classe que comentávamos antes dos animais, poderíamos ter:

var Animal = new Class({
   //propriedades e métodos dos animais
});

Agora os mamíferos se criariam assim:

var Mamifero = Animal.extend({
   //propriedades e métodos dos mamíferos
});

Depois deste código, o mamífero seria a soma das propriedades e métodos dos animais (essas propriedades e métodos estariam herdadas dos animais) e as propriedades e métodos próprios dos mamíferos.

Exemplo completo de herança ou extensão de classes em Mootools

Vamos fazer um exemplo simples de herança em Mootools. No exemplo vamos ter uma classe que servirá de ponto de partida, chamada InstrumentoMusical, que modela qualquer instrumento musical. Logo, teremos vários instrumentos musicais que criaremos estendendo a classe InstrumentoMusical.

Faríamos a classe InstrumentoMusical da seguinte forma:

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

Como vemos simplesmente criamos um construtor, que recebe o tipo de instrumento (se é de corda, percussão, sopro, etc) e o introduz em uma propriedade do objeto chamada tipo.

Logo, poderíamos criar a classe guitarra desta maneira:

var Guitarra = InstrumentoMusical.extend({
   
   initialize: function(cordas){
      this.parent("instrumento de corda");
      this.numCordas = cordas;
   },
   
   soar: function(){
      alert("tran tran tran");
   }
});

Como se pode ver, a classe guitarra está estendendo a classe InstrumentoMusical.

Incorporamos à classe guitarra um construtor que recebe um parâmetro que é o número de cordas que terá a guitarra. Em tal construtor estamos fazendo uma linha que caberia explicar:

this.parent("instrumento de corda");

Com esta linha estamos chamando ao método initialize da classe pai que se está estendendo (o construtor da classe InstrumentoMusical) passando-lhe "instrumento de corda" como parâmetro. Logo, as guitarras criadas terão como sempre tipo de instrumento o valor "instrumento de corda".

Ademais, fizemos um chamado soar na classe guitarra que faz com que a guitarra soe.

Posteriormente poderíamos criar a classe bateria, que é outro instrumento musical composto por vários elementos de percussão.

var Bateria = InstrumentoMusical.extend({

   initialize: function(numeroElementos){
      this.parent("instrumento de percussão");
      this.numeroElementos = numeroElementos;
   },
   
   soar: function(){
      for (i=1; i<=this.numeroElementos; i++){
         alert ("Soando elemento " + i);
      }
   }
});

A bateria tem suas próprias particularidades, porém se baseia na classe InstrumentoMusical para funcionar. Assim como ocorreria com a guitarra, estende a classe InstrumentoMusical.

Logo, a bateria tem um método soar, que faz ruído, porém este é diferente do da guitarra.

Para utilizar estas duas classes poderíamos fazer algo como isto:

var minhaGuitarra = new Guitarra(6);
alert(minhaGuitarra.tipo);
minhaGuitarra.soar();

var minhaBateria = new Bateria(3);
alert(minhaBateria.tipo);
minhaBateria.soar();

Podemos ver o exemplo em funcionamento em uma página à parte.






Usuários :    login / registro
Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato