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

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ê.

Twitter

• 

Arquivos Recentes

• fevereiro 2010
• janeiro 2010
• dezembro 2009
• outubro 2009
• setembro 2009
• agosto 2009
• julho 2009

Você deveria ler

• Pedro Menezes
• Fragmental
• Arthur Geek
• Cê Inove Já!
• Simon Willison’s Weblog
• startupi
• George Guimaraes
• leonardofaria.net
• SinglePeer

ENTRIES RSS | XHTML | CSS | THX ELEGANCE