O Prototype aplicado em JavaScript é um artifício muito interessante para auxiliar os desenvolvedores a construir sites mais interativos e mais inteligentes.
Esta notação é aplicada sob objetos/estruturas definidas em JavaScript com o objetivo de atribuir métodos de execução a esses objetos. Os objetos citados para utilização do prototype podem ser criados a partir das notações JSON (Java Script Object Notation) citadas em um de meus artigos anteriores:
Relacionado: Guia do programador Front-End
A abordagem de utilização do prototype é tão simples quanto a sua utilização.
Vamos a princípio tentar abstrair o conceito de utilização do prototype associando-o à programação orientada a objetos (POO). Podemos caracterizar, desta forma, o prototype como sendo um método ou um construtor de classes (em nosso caso Objetos JavaScript “JSON”) para executar códigos ou até mesmo criar novos objetos.
A partir do prototype podemos atribuir funções e executar procedimentos aninhados ou não a partir de um objeto criado ao qual conterá as informações que poderemos utilizar durante o código.
Parece complicado? Vamos acompanhar abaixo o código que simplificará as coisas.
<HTML>
<HEAD>
<script type="text/javascript">
var objBase;
function ConstrutorJSON()
{
this.nome = "Fernando";
this.idade = 25;
this.profissao = "Analista de Sistemas";
this.endereco = "Minha casa";
this.numero = 199;
}
ConstrutorJSON.prototype.Pessoa = function(){
return this.nome + " - " + this.profissao + " Idade: "
+ this.idade.toString();
}
ConstrutorJSON.prototype.EnderecoCompleto = function(){
return this.endereco + ", " + this.numero;
}
function ExecucaoCriacaoObjeto()
{
objBase = new ConstrutorJSON();
}
function ExecutaTesteObtencaoDados()
{
if(objBase == null)
ExecucaoCriacaoObjeto();
alert(objBase.Pessoa());
alert(objBase.EnderecoCompleto());
}
function DisparaPrimeiroTeste()
{
ExecucaoCriacaoObjeto();
alert("Dados Criados: " + objBase.nome + "\r\n"
+ objBase.idade + "\r\n" + objBase.profissao + "\r\n"
+ objBase.endereco + "\r\n" + objBase.numero);
}
function DisparaSegundoTeste()
{
alert("Dados obtidos das funções: \r\nPessoa: "
+ objBase.Pessoa() + "\r\nEnderecoCompleto: "
+ objBase.EnderecoCompleto());
}
</script>
</HEAD>
<BODY>
<button id="btnTeste1" onclick="DisparaPrimeiroTeste();">Teste 1
- Criar os Objeto JSON</button>
<br>
<button id="btnTeste2" onclick="DisparaSegundoTeste();">Teste 2
- Executar as Funções </button>
</BODY>
</HTML>
No código da Listagem 1 apresento uma exemplificação básica de utilização de prototype para apresentação de dados obtidos do objeto JSON criado.
Observamos que esta é uma página HTML básica contendo seu corpo de tags e com qualquer outra página comum.
Dentro das tags encontramos as funções que serão executadas para criação do objeto JSON e atribuição do método prototype a ele.
No corpo da página inseri dois botões para separar o nosso teste em dois momentos.
- Primeiro: Criação do objeto JSON.
- Segundo: Execução dos métodos prototype atribuídos a ele.
Executando sua aplicação prototype em Javascript
No primeiro botão com a chamada da função “DisparaPrimeiroTeste();” temos o início do objeto denominado como “objBase”. Este objeto é uma variável de âmbito global no código definida logo abaixo da primeira tag , isto define que todos os método executados dentro de nosso JavaScript terão acesso a este objeto.
Obs: eu poderia ter definido esta variável dentro de alguma função, porém ela teria restrição de acesso apenas e esta função trabalhando como escopo interno então isso me forçaria a trafegá-la como parâmetro na necessidade de obter seu valor em outra função.
Dentro do corpo da função “DisparaPrimeiroTeste();” repare que executo uma chamada à próxima função denominada “ExecucaoCriacaoObjeto();”. Esta função tem por objetivo criar a instância do objeto “objBase” ao qual será nossa base para execução dos métodos definidos ao construtor dele (“ExecucaoCriacaoObjeto();”) anteriormente.
A geração do prototype é exatamente esta definição que citei acima relacionando métodos de execução ou dizendo de outra forma, funções, ao construtor do objeto JSON conforme faço abaixo da função “ExecucaoCriacaoObjeto();”.
No momento que executo as linhas abaixo o objeto instanciado deste construtor terá associado a ele estas funções.
ConstrutorJSON.prototype.Pessoa = function(){
return this.nome + " - " + this.profissao + " Idade: " + this.idade.toString();
}
ConstrutorJSON.prototype.EnderecoCompleto = function(){
return this.endereco + ", " + this.numero;
}A partir deste momento podemos esclarecer o que será executado no teste 2.
Neste momento eu apenas executo a chamada aos métodos prototype definidos anteriormente obtendo seus valores que já existem no objeto conforme atribuídos em sua criação.
Esta é a base de utilização do Prototype. Existem inúmeras formas de se trabalhar com o prototype.
É muito comum a sua utilização para execução de chamadas assíncronas em ajax ao qual são atribuídos aos objetos base do XMLHttpRequest os métodos que farão o controle dos estados da execução assíncrona, porém este assunto engloba um contexto maior que não será abordado neste artigo.
Outras utilizações seria aplicar o JSON com prototype como alimentador de objetos , , etc. Você pode criar um atributo do objeto como sendo um array e em seu método alimentar um componente ou retornar esse array para alimentar um componente externo.
Bom, agora é a criatividade quem toma conta da codificação de seu sistema. Com a estrutura acima apresentada você poderá criar estruturas complexas (JSON) recebendo parâmetros externos através de seu método construtor (no exemplo definido como “ConstrutorJSON”) e utilizar os métodos “prototype” atribuídos a ele para executar as tarefas necessárias de sua aplicação.
Espero que seja útil para suas fronteiras do dia a dia.
Saiba mais: Depurando Javascript no Mozilla Firefox
Links Úteis
- Download do Google Chrome: Faça o download do Google Chrome
- Javascript: Site oficial do JavaScript
- Site Oficial do PHP: O PHP (um acrônimo recursivo para PHP: Hypertext Preprocessor) é uma linguagem de script open source de uso geral, muito utilizada, e especialmente adequada para o desenvolvimento web e que pode ser embutida dentro do HTML.
Saiba mais sobre Mobile ;)
- JavaScript Tutorial: Neste artigo veremos como utilizar o código javascript em nossas aplicações web e websites. Teremos uma introdução à essa maravilhosa linguagem que cada vez mais cresce no desenvolvimento web.
- Preparando o ambiente para programar em PHP: Neste curso vamos aprender a preparar um ambiente de programação para PHP. Para isso, instalaremos um servidor web (Apache), o interpretador PHP e banco de dados MariaDB (MySQL). Todos esses componentes serão instalados em conjunto através do XAMPP.
- Debugando seu código com Google Chrome: Veja nesse artigo como usar a ferramenta de Debug do Google Chrome a seu favor.
