Desenvolvimento

19 abr, 2010

Normas para criação de plugins para a biblioteca jQuery

Publicidade

Os plugins são uma forma de ampliar o poder da framework, criando novos métodos e funcionalidades ao objeto jQuery, proporcionando aos desenvolvedores novas funcionalidades para suas páginas.

Na hora de criar um plugin para a biblioteca jQuery é preciso se atentar para algumas normas que irão assegurar que ele funcionará como deve e poderá ser utilizado por qualquer desenvolvedor, em qualquer página web.

Veja abaixo algumas normas, que são muito importantes:

  • O arquivo que contém o código-fonte do plugin deve ter a seguinte nomenclatura: jquery.nome_do_plugin.js
  • Insira as funções como novos métodos através da propriedade fn do objeto jQuery, assim os métodos do seu plugin serão convertidos em métodos do próprio objeto jQuery.
  • Dentro dos métodos que insere como plugins, a palavra reservada “this” será uma referência ao objetpo jQuery que recebe o método. Portanto, pode-se utilizar “this” para acessar qualquer prorpriedade do elemento da página que está sendo utilizada.
  • Ao final de cada método do plugin deve ser colocado um “;” (ponto e vírgula), dessa forma o código-fonte pode comprimir e seguir funcionando corretamente.
  • O método deve retornar o próprio objeto jQuery sobre o qual foi solicitada a execução do plugin. Isso é feito usando a expressão “return this”, no final do código da função.
  • Deve ser utilizado “this.each” para iterar sobre todo o conjunto de elementos que pode ter sido selecionado. Lembre-se que os plugins são chamados sobre objetos que são obtidos através de seletores e da função jQuery, e podem haver selecionado vários elementos e não somente um. Assim, com “this.each” será feita uma iteração sobre cada um dos elementos selecionados.
  • Atribua o plugin sempre ao objeto jQuery, ao invés de fazer sobre o símbolo “#8221;, assim os usuários poderão usar alias personalisados para o plugin através do método noConflict(), descartando os problemas que podem haver si dois plugins tiverem o mesmo nome.

As regras acima são suficientes para o desenvolvimendo de plugins simples, embora talvez em cenários mais complexos seja necessário aplicar outras normas para garantir que tudo funcione corretamente.

Para matar a curiosidade de muitos, vamos ver um pequeno exemplo de como seria a montagem de um plugin.

Abra o seu editor de código e crie um arquivo chamado jquery.primeiroplugin.js. Em seguida digite o código abaixo:

jQuery.fn.ocultar = function(){
   this.each(function(){
     
jqElem = $(this);
      jqElem.hide();
   });
   return this;
};

Está pronto o plugin. Agora basta fazer a inclusão do plugin na página e chamá-lo da seguinte forma dentro do seu arquivo de funções javascript ou na própria página onde será utilizado:

$(document).ready(function(){
   $('#ocultar').click(function(){
    
$('.txtadicional').ocultar();
   });
})

Você pode fazer um plugin mais robusto, que controle operações importantes, desde formulários de dados até a visualização e manipulação de objetos do DOM.

Continuem acompanhando os artigos, muita coisa legal está por vir.

Até a próxima.