Melhore seu jQuery-fu, escreva plugins

Posted by Dirceu | Filed under jquery, plugin, javascript, traducao, tutorial, uncategorized

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:

[sourcecode lang="js" gist="106252"]
$.fn.meuPlugin = function() {
$this = $(this);
// código do plugin
return $this;
}
[/sourcecode]

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.

[sourcecode lang="js" gist="106253"]
$("table").meuPlugin().addClass("surpresa");
[/sourcecode]

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:

[sourcecode lang="js" gist="106254"]
$(table).meuPlugin({url: 'editar.html', param: 'id'});
[/sourcecode]

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.

[sourcecode lang="js" gist="106255"]
$("table tr").click(function() {
location.href = 'editar.html?id=' + $("td:first a", $(this)).html();
});
[/sourcecode]

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:

[sourcecode lang="js" gist="106256"]
$.fn.clicavel = function(settings) {
var defaults = {
href: 'editar.html',
paramName: 'id'
}

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;
}
[/sourcecode]

E então:

[sourcecode lang="js" gist="106257"]
$("table").clicavel();
[/sourcecode]

Ou quando eu quiser outra configuração:

[sourcecode lang="js" gist="106258"]
$("table").clicavel({href: 'mudar.html'});
[/sourcecode]

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

03 May, 2009

Comments

blog comments powered by Disqus

About Me