Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kamon Florentino Mesquita

[Resolvido] Javascript OO

Por , em Javascript

Recommended Posts

Kamon Florentino Mesquita    0

Kamon Florentino Mesquita
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Batista Neto    448

João Batista Neto
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

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:

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Batista Neto    448

João Batista Neto
Postado

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.

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito