Publicado em 24 de fev.

[Resolvido] Javascript OO

Estou aprendendo orientação de objetos e por não ser nada convencional como no Java, estou tendo uns problemas aqui. Não estou sabendo lidar com eventos do tipo 'onclick', 'onkeypress', etc. Não sei se devo declarar os eventos dos meus objetos criados dentro do construtor do objeto; algo semelhante a isso:

function myObj(){
 var attr = document.getElementById("button");
 this.teste = function(){
 alert("teste");
 }
 attr.onclick = teste;
}

,ou devo declará-los externamente, assim:

function myObj(){
 this.attr = document.getElementById("button");
 this.teste = function(){
 alert("teste");
 }
}
var obj = new myObj();
obj.attr.onclick = obj.teste;

Talvez até o melhor seja simular Singleton ou usar a propriedade prototype do objeto (não sei se é possível)... enfim me seria muito se alguém pudesse me explicar como proceder com eventos em objetos. Seria-me muito útil na construção de objetos em galerias complexas ou slideshows com efeitos de mouse e teclado

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

João Batista Neto· 25 de fev.

Não estou sabendo lidar com eventos do tipo 'onclick', 'onkeypress', etc.

A primeira coisa que você precisa compreender é que orientação a objetos e orientação a eventos são coisas distintas. Depois disso, você precisa compreender que a interface de usuário (View) e a camada responsável pela manipulação das ações do usuários também são distintas.

<!DOCTYPE html>

<html>
<head>
	<title>Sample</title>
	<style type="text/css">
 #toggleButton {
 font-family: Helvetica;
 padding: 4px 6px;
 border-radius: 4px;
 text-decoration: none;
 }

 #toggleButton.Ativo {
 background-color: #FF2222;
 color: #FFFFFF;
 }
 #toggleButton.Inativo {
 background-color: #999999;
 color: #333333;
 }
	</style>
</head>
<body>
	<a id="toggleButton" href="#"> </a>
</body>
</html>

Supondo que sua View seja como listada acima, você pode escrever seu controlador de várias formas diferentes:

Método 1:

function ToggleButtonController( buttonId , activeState , inactiveState ) {
var self = this;

this.currentState = this.activeState = activeState;
this.inactiveState = inactiveState;
this.buttonElement = document.getElementById( buttonId );
this.buttonElement.firstChild.nodeValue = activeState;
this.buttonElement.addEventListener( "click" , function( e ) {
	e.preventDefault();
	self.setState( self.currentState == self.activeState ? self.inactiveState : self.activeState );
} , true );

this.setState( activeState );
}

ToggleButtonController.prototype.setState = function( newState ) {
this.buttonElement.firstChild.nodeValue = this.currentState = newState;
this.buttonElement.setAttribute( "class" , newState );
};

document.addEventListener( "DOMContentLoaded" , function() {
var toggleButtonController = new ToggleButtonController( "toggleButton" , "Ativo" , "Inativo" );
} );

Método 2:

var ToggleButtonController = (function() {
var activeState;
var inactiveState;
var currentState;
var buttonElement;
var setState = function( newState ) {
	currentState = newState;
	buttonElement.firstChild.nodeValue = newState;
	buttonElement.setAttribute( "class" , newState );
};

return {
	create : function( buttonId , activeText , inactiveText ) {
 currentState = activeState = activeText;
 inactiveState = inactiveText;
 buttonElement = document.getElementById( buttonId );
 buttonElement.addEventListener( "click" , function( e ) {
 e.preventDefault();
 setState( currentState == activeState ? inactiveState : activeState );
 } );

 setState( activeText );
	}
};
}());

document.addEventListener( "DOMContentLoaded" , function() {
ToggleButtonController.create( "toggleButton" , "Ativo" , "Inativo" );
} );

Talvez a grande vantagem do segundo método é a possibilidade de se adicionar visibilidade aos membros da classe, mas é tudo uma questão de estilo e você pode utilizar a forma que preferir.

Uma boa leitura: Google JavaScript Style Guide

T.Colucci· 25 de fev.

Muito boa a explicação!

Particularmente, prefiro usar o segundo método postado. Vejo nele mais organização e, como bem disse o João, você pode adicionar visibilidade aos membros.

:clap:

Kamon Florentino Mesquita· 25 de fev.

Obrigado João Batista Neto pela elucidação acerca do meu problema. Seu texto claro e objetivo me foi e ainda está sendo de grande valia. Também prefiro o segundo método, já que, a meu ver, apresenta uma estrutura mais organizada e de fácil compreensão.

João Batista Neto· 25 de fev.

>
Obrigado João Batista Neto pela elucidação acerca do meu problema. Seu texto claro e objetivo me foi e ainda está sendo de grande valia. Também prefiro o segundo método, já que, a meu ver, apresenta uma estrutura mais organizada e de fácil compreensão.

;)

>
Não sei se devo declarar os eventos dos meus objetos criados dentro do construtor do objeto, ou devo declará-los externamente

Bom, sobre sua pergunta original, escrevi esse texto aqui já faz um tempo: http://thegodclass.tumblr.com/post/9704477531/encapsulacao

Leia-o cuidadosamente e, talvez, você compreenda o motivo de não se declarar o evento fora da classe, acessando diretamente um membro dentro dela.

;)