Eu e o @mauricio desenvolvemos uma extensão para o Google Chrome que encontra os melhores preços enquanto o usuário navega em sites de comércio eletrônico.

Após instalar a extensão “Melhor Preço“, um botão no navegador alerta o usuário para a possibilidade de encontrar preços menores do produto que está pesquisando. Ao clicar no botão são apresentadas as ofertas disponíveis em diversos sites de comércio eletrônico brasileiro.

A ferramenta que deve ajudar o internauta brasileiro a economizar nas compras deste Natal, pode ser instalada a partir da galeria oficial de extensões do Google: https://chrome.google.com/extensions.

Lançadas em fase beta no último dia 8, as extensões para o Google Chrome permitem que desenvolvedores aumentem as funcionalidades do navegador do Google.

Essa é uma tradução de “Improve your jQuery-fu, write plugins” de Tomáš Kramár Trnava.
Escolhi traduzir esse texto pois ele foi o tutorial mais simples que encontrei quando precisei escrever um plugin. No final dele você será capaz de entender como o jQuery trabalha com plugins e poderá escrever os seus próprios.

---

jQuery é um framework JavaScript simples e poderoso que mudou minha forma de programar JavaScript. Um novo JavaScript dizem alguns com certa razão. O código que você cria é pura elegância.

Você começa com 10 linhas de jQuery que poderiam ter sido 20 linhas do tedioso JavaScript manipulando DOM. No final você acaba ficando com duas ou três linhas.

E esse numero pode ficar ainda menor se você refatorar o código para um plugin do jQuery.

Quando o assunto é escrever plugins, pessoas (tipo eu) normalmente pulam fora com medo. Eu ouvi sobre plugins de jQuery a bastante tempo mas nunca havia tentado escrever um. Quando pensava no assunto algumas idéias vinham na minha cabeça:

• Deve ser difícil e por isso deixe isso somente para jedis
• Isso deve precisar de um conhecimento profundo do jQuery
• O que eu vou ganhar?

(Eu vim do mundo Java, imagine).

Nota do tradutor:
(Eu vim do mundo Ruby ;D).

Nada do que eu imaginava é verdade. Escrever um plugin é facil como escrever algo usando o jQuery. Não é necessario nenhum conhecimento especial. Tudo o que é preciso é extender um objeto jQuery. Algo como:

Lembra? Isso é JavaScript, não Java. O código acima é tudo que você precisa para criar um plugin. Dentro da função, $this é a referencia ao objeto jQuery de onde o plugin foi chamado.

No exemplo, $this é um objeto com os elementos

e você pode fazer de tudo com eles. Como o plugin retorna $this, você pode continuar executando metodos do jQuery usando “Method Chaining”.

De volta a minha última questão. O que você possivelmente vai ganhar criando um plugin?

Alto nivel de reusabilidade
Muitos pedaços de JavaScript são geralmente reaproveitáveis, mas criando um plugin você passa ele para outro nível.

Configuração
Isso é ligado ao ponto anterior. O cenário sem plugin é ter um pedaço de código que você copia e cola modificando para seu proposito. Isso pode ficar muito mais fácil com plugins. Você pode escrever o seu para, por exemplo, aceitar algumas opções. Veja como fica agora:

Elegância
O código acima parece melhor que um script inteiro, não parece?

Agora é a hora de mostrar um exemplo real. Vamos fazer um script para tornar clicável cada linha da tabela.

Sempre que eu queria fazer as linhas clicáveis eu copiava esse código e mudava a URL ou o nome do parâmetro.

Com o plugin fica assim:

settings = $.extend(defaults, settings); // escreve em cima das opções default com as opções enviadas
$this = $(this);

$(”tr”, $this).click(function() {
location.href = settings.href + ‘?’ + settings.paramName + ‘=’ + $(”td:first”, $(this)).html();
});

return $this;
}


E então:

Ou quando eu quiser outra configuração:

Para saber mais sobre o desenvolvimento de plugins para jQuery, leia o guia oficial de desenvolvimento ou esse excelente artigo de Mike Alsup.
Espero ter inspirado você.