Organizando seus Scripts: JavaScript - Orientado a Objeto
No artigo o autor apresenta conceitos de como trabalhar com javascript orientado a objeto e aplica conceitos na prática.
Olá seja bem vindo meu nome é Emerson Jose, e no artigo de hoje vou falar sobre Orientação a objeto com javascript.
Escrever códigos javascript nem sempre foi muito organizado quando você trabalha ou utiliza em projetos grandes, a melhor forma de separar ou organizar seu código e aplicar alguns conceitos. Alguns conceitos básicos de POO, poderão organizar e facilitar a leitura e manutenção de script. No artigo pretendo mostrar e construir exemplos práticos que possa fazer você pensar de maneira diferente de como é possível trabalhar com JavaScript Orientado a Objeto.
<script type="text/javascript">
var myClass = {
_Construtor: function () {
}
}
</script>
No exemplo acima criei um objeto que chamei de myClass que contem um construtor.
<script type="text/javascript">
var myClass = {
_Construtor: function () {
},
_ExibirMensagem: function (msg) {
alert(msg);
}
}
myClass._Construtor();
</script>
Dentro da nossa classe MyClass criei uma nova função abaixo do construtor, cada função dentro da nossa classe JS devem ser separadas por vírgula.
Para chamar os métodos da nossa classe eles podem ser invocados da seguinte forma.
MyClass.nomefuncao
O que você já deve ter percebido que não é nada complexo e difícil de aplicar continuando nossos exemplos vou mostrar o que pode ser feito no construtor da nossa classe.
<script type="text/javascript">
var myClass = {
_Construtor: function () {
myClass._ExibirMensagem("Sucesso");
},
_ExibirMensagem: function (msg) {
alert(msg);
}
}
myClass._Construtor();
</script>
Para invocar funções existentes dentro da nossa classe, devemos iniciar chamando nossa classe e depois as funções, não é possível internamente chamar as funções sem invocar a classe.
Podemos dentro do nosso construtor, aplicar regras de negocio que poderão invocar algo quando o construtor for inicializado.
<script type="text/javascript">
var myClass = {
_Construtor: function () {
try {
if (myClass._retornaValor(oaksoak) > 5) {
myClass._ExibirMensagem("O valor é maior que 5");
}
else {
myClass._ExibirMensagem("O valor é menor que 5");
}
} catch (e) {
myClass._ExibirMensagem(e);
}
},
_ExibirMensagem: function (msg) {
alert(msg);
}
,
_retornaValor: function (pValor) {
return (pValor / 2);
}
}
myClass._Construtor();
</script>
No último exemplo para finalizar o artigo estou reforçando os conceitos abordados, estou mostrando um construtor mais carregado e com regras de negocio.
Quando o script for inicializado o nosso construtor vai exibir uma mensagem se caso o condicional for verdadeiro ou falso e se caso ocorrer algum erro também vai exibir a mensagem através do nosso método ExibirMensagem.
No próximo artigo que vou publicar sobre jQuery vou aplicar os conceitos e exemplos mostrados nesse artigo espero que tenham gostado é não deixem de comentar.
Até mais
Emerson José.
Confira outros conteúdos:
Por
Emerson
Em 2010
Veja os resultado dos nossos alunos
Conquistas reais de quem está aplicando o método
<Perguntas frequentes>
Carreira
Metodologia
Assinatura e Pagamentos
Cadastro