Posts tagged ‘reutilização de códigos’

13 de julho de 2010

Javascript Orientado a Objetos

por adlerparnas

Olá! Pessoal!

Meu nome é Adler Parnas, e hoje vou falar de uma técnica que utilizo para escrever o Javascript dos meus projetos. Imagino que todos já conheçam a biblioteca Javascript jQuery e entendam Programação Orientada a Objetos, pelo  menos um pouco.

Já vimos inúmeras demonstrações que a utilização de cache, quando se utiliza jQuery, é muito eficiente por diminuir a chamada da função seletora $(). Sim, fazer cache daquele campo no HTML onde você atualiza os twittes no seu blog é perfeito, afinal de contas, a cada 10, 20, 30 segundos você  altera o texto que está lá!

Agora me responda uma coisa! Do quê adianta eu fazer cache de elementos, se em tal página eles nem existem ou não são tão utilizados assim? Uma forma de tratar isso seria criar um arquivo Javascript apenas para essa página, ou até mesmo colocar o Javascript direto no HTML (haarrrr), podendo gerar muitas linhas de códigos repetidos. Uma forma que gosto de tratar isso é criando objetos para cada “página” do meu site/sistema, assim realizo cache e executo somente o que é necessário.

Vamos dizer que temos uma página de cadastro, onde o Javascript é necessário apenas para validação dos campos e talvez algumas requisições AJAX.  Da forma que eu utilizo seria algo parecido com isso:

var cadastro = {
    _$txt_email:null,
    _$txt_password:null,
    initialize:
       function(){
          /*
           * aqui vem o código que será executado no onload da página
           */
       } // fim da funcao initialize
} // fim do objeto cadastro

Para fazer com que cada função initialize seja executada no objeto correto, utilizo uma classe na tag body, que me ajuda no CSS e informa para o Javascript qual página está sendo renderizada.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Pàgina de Cadastro</title>
</head>
<body class="cadastro">
  <form action="">
     <fieldset>
         <label for="txt_name">Nome <em>*</em></label>
         <input type="text" name="txt_name" id="txt_name" />
     </fieldset>
     <fieldset>
         <label for="txt_email">Email <em>*</em></label>
         <input type="text" name="txt_email" id="txt_email" />
     </fieldset>
     <fieldset>
         <label for="txt_password">Senha <em>*</em></label>
         <input type="text" name="txt_password" id="txt_password" />
     </fieldset>
     <fieldset>
         <label for="txt_password_2">Confirmar senha <em>*</em></label>
         <input type="text" name="txt_password_2" id="txt_password_2" />
     </fieldset>
     <fieldset><input type="submit" value="Enviar" /></fieldset>
  </form>
  <!-- Javascript include -->
  <script type="text/javascript" src="script.js"></script>
  <!-- end Javascript include -->
</body>
</html>

Para que o objeto certo seja executado escrevo meu código Javascript dessa forma:

/**
 * Variável para fazer cache do elemento body
 */
var $_body;

var home = {
   initialize:
      function(){
          /*
           * Código executado no on-load da página
           */
      }
}

var cadastro = {
   _$txt_email:null,
   _$txt_password:null,
   initialize:
      function(){
          /*
          * Código executado no on-load da página
          */

          // realizando cache dos elementos importantes para essa página
          this._$txt_email = $("#txt_email");
          this._$txt_password = $("#txt_password");

          this._$txt_email.change(cadastro.valida_email);
      },
   valida_email:
      function (event){
         // validação de email
      },
}

var login = {
   initialize:
      function(){
           /*
            * Código executado no on-load da página
            */
            $('#txt_email').change(cadastro.valida_email);
      }
}

$(
   function(){
      try{
         // realizando cache do elemento body
         $_body = $('body');
         // recuperando o classe do elemento body e chamando o
         // método initialize do objeto responsável
         eval($_body.attr('class')+".initialize()");
      } catch(){
         // coloquei detro do tray-catch pq se o objeto não existir
         // o javascript não gerará um erro (padrão silenciator hehhe).
      }
   }
);

Não sei dizer ao certo, se essa é ou não a melhor forma de escrever o código Javascript, sei que dessa forma facilita muito a reutilização de código, na manutenção e na performance, pois não fico executando comandos de outras páginas.

É isso ai pessoal! Espero que esta dica seja útil para todos e caso tenha tido algo errado, favor me corrijam! Até o próximo post!