Criando plugins para a biblioteca jQuery - Normas Básicas

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

Por | @jonathanlamimkt Programação

Criando plugins para a biblioteca jQuery - Normas Básicas
Os plugins são uma forma de ampliar o poder da framework, criando assim 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 básicas, normas estas que irão assegurar que o plugin funcionará como deve e possa ser utilizado por qualquer desenvolvedor em qualquer página web.

Veja abaixo algumas normas, mas 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. Isto é 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 "$", 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 desenvolvimendot 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();
   });
})

Este exemplo foi o simples do simples, mas você pode fazer um plugin 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.

Mais sobre: jquery, plugins, desenvolvimento
Share Tweet
DESTAQUESMais compartilhados
Comentários
  • ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail

  • Preencha para confirmar