Criando classes em Javascript usando Prototype

Muitos programadores tem aversão ao Javascript pelo fato de não poder organizar o código para uma fácil manutenção ou desenvolvimento, existe um framework chamado Prototype, que apartir da versão 1.6.0, nos permite formatar o códio em formato de classe e usar suas propriedades como Herança.

Para maiores informações http://prototypejs.org/learn e para executar o download do prototype.js

<html>
<body>
<script type="text/javascript" src="prototype.js"></script>

<script>
var Byiorio = Class.create();

//Nossa classe
Byiorio.prototype = {
  //Simula um construtor da classe, recebendo de parametro uma String 
  //que sera nossa mensagem em um alert
  initialize: function(msg) {
    this.msg = msg;
  },
  
  //criando nosso metodo, que irá mostrar a mensagem passada de parametro 
  //no construtor
  showAlert: function() {
    alert(this.msg);
  }
};

//Testando nossa classe, vamos passar de parametro 'Ola nova mensagem'
var guy = new Byiorio('Ola nova mensagem'); // hora que chama o construtor
//Mostrando a mensagem 'Ola nova mensagem'
guy.showAlert();


//Criando uma nova classe para estender a classe criada anteriormente
var ByiorioExtend = Class.create();
ByiorioExtend.prototype = Object.extend(new Byiorio(), {

 //vamos redefinir o método da classe estendida colocando ALTERADO na frente da mensagem
  showAlert: function() {
    alert('ALTERADO ' + this.msg);
  }
});

//Executando a nova classe
var guyExtended = new ByiorioExtend('Ola nova mensagem');
guyExtended.showAlert();



//Adicionando funcionalidade ao método da classe estendida
var ByiorioChanged = Class.create(Byiorio, {
  //Vamos alterar o metodo adicionando  ALTERADO V2 depois da variavel que 
  //foi passada no construtor
  showAlert: function($super) {
	this.msg = this.msg + ' ALTERADO V2';
    $super();
  }
});

var guyChanged = new ByiorioChanged('Ola nova mensagem');
guyChanged.showAlert();
</script>

</body>
</html>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Blue Captcha Image
Atualizar

*

Facebook

Get the Facebook Likebox Slider Pro for WordPress
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera