Faça Sua Pesquisa.

domingo, 19 de fevereiro de 2012

Funções e variáveis dentro de plugins jQuery

Como em qualquer linguagem de programação, podemos utilizar funções para estruturar o código de nossos plugins. Do mesmo modo, nos plugins podemos ter variáveis, onde salvar dados ou objetos que tenham validade dentro do âmbito desse plugin. Tudo isso nos ajudará bastante a fazer um código mais claro,autônomo e compacto.
Neste artigo vamos mostrar como seria o esquema de programação de um plugin jQuery um pouco mais avançado, que inclui as mencionadas variáveis e funções "locais" (ou "privadas", como quisermos chamá-las). Veremos também como é possível acessar essas variáveis e funções desde qualquer parte do fluxo de código de um plugin, inclusive desde o código de outras funções, como os eventos.

Esquema de programação de um plugin

A seguir vamos mostrar o esquema de código de um plugin que inclui funções e variáveis. Este plugin não serve para nada, é apenas um teste que estou realizando para ver como posso criar essas variáveis, acessá-las e comprovar seu âmbito em distintos pontos do código do plugin.
jQuery.fn.meuPlugin = function() {
  
   //variáveis que são comuns a todos os elementos
   //que havia no objeto jQuery que recebe o método do plugin
   minhavariavelComum = "comum";
   alert("Nova invocação de plugin. Minha variável comum: " + minhavariavelComum)
  
   this.each(function(){
      //CÓDIGO DO PLUGIN
     
      //Elemento sobre o que itero e estou aplicando o plugin
      elem = $(this);     
      //elem é uma variavel que poderemos utilizar em todo o plugin

      //variáveis específicas para cada elemento
      var minhaVariavel = "x";
      //minhaVariavel poderá ser acessada dentro de todo o código que coloquemos aqui
     
      //funcao que será acessível desde qualquer parte do plugin
      function minhaFuncao(){
         //posso acessar variaveis do plugin
         minhaVariavel = elem.text();
        
         //Mostro o conteudo da variavel
         alert("minha variavel local e particular de cada plugin: " + minhaVariavel);
        
         //troco a variavel comum a todos os elementos deste plugin
         minhavariavelComum = "Outra coisa comum!"
      }
     
      //posso invocar as funcoes do plugin
      minhaFuncao();
     
      //evento, que tem uma funcao. Posso acessar variaveis e funcoes do plugin
      elem.click(function(){
         //posso acessar variaveis do plugin
         alert("Dentro do evento: " + minhaVariavel);
        
         //posso acessar funcoes
         minhaFuncao();
      });
     
   });
};
Para definir essas variáveis e funções locais ao plugin, de maneira que estejam acessíveis dentro do plugin e por sua vez tenham acesso a todos os dados do mesmo, devemos colocá-las dentro da iteração que se faz com this.each().
Como se pode entender do código do plugin anterior, todas essas variáveis e funções podem ser invocadas ou acessadas em qualquer parte, desde que estejamos dentro do this.each(), onde foram criadas.
Nota: Antes do this.each()também se podem colocar variáveis, mas há que ter em conta que existirá uma mesma cópia dessa variável para todos os elementos onde se está aplicando o plugin.Vejamos o seguinte HTML.
<div id="esteDiv">
   Este div
</div>
<span class="meusspan">span1</span>
<span class="meusspan">span2</span>
<span class="meusspan">span3</span>

Agora vejamos estas duas chamadas ao plugin anterior.
$("#esteDiv").meuPlugin();
$(".meusspan").mePlugin();

Como se pode ver, com a primeira chamada se executa o plugin sobre um elemento da página com id="esteDiv". É um único elemento da página, portanto o plugin só se aplica uma vez. No entanto, na segunda chamada, se executa o plugin sobre vários elementos com a class de CSS "meusspan". Neste segundo caso o plugin se executará sobre três elementos e então poderemos comprovar que as variáveis que se haviam definido fora do this.each() só existem uma vez e seu valor é comum para os três elementos sobre os que se aplicou o plugin na segunda chamada.
Certamente, talvez, tudo isto fique um pouco confuso, ou não se entenda muito bem para que podemos querer todas essas variáveis e funções locais ao plugin. Porém, à medida que vamos trabalhando e propondo-nos plugins mais complicados, veremos que são de muita utilidade para armazenar dados que queremos acessar mais tarde, ou para organizar o código de nosso plugin em diferentes funções, que podem ser chamadas repetidas vezes e desde vários lugares.
Para aqueles que conhecem um pouco de programação orientada a objetos, talvez lhes esclareça um pouco este similar: Se um plugin fosse como um objeto, as variáveis de dentro do bloco this.each() dos plugins seriam como as propriedades desse objeto e as funções seriam como métodos desse objeto. Embora tenha que se manter a distância, porque um plugin não segue exatamente o modelo que conhecemos nas classes de programação orientada a objetos.

0 comentários:

Postar um comentário

TecCodigos Copyright © 2011 | Template created by O Pregador | Powered by Blogger