Criar um plugin para jQuery pode ser uma ótima forma de reaproveitar suas funções e torná-las acessíveis para qualquer elemento, em qualquer projeto. Neste tutorial, vou mostrar alguns conceitos sobre o desenvolvimento de plugins e ensinarei como fazer um plugin simples, que iguala alturas de divs tendo como parâmetro o tamanho da maior.

Plugins jQuery: funções vs. métodos

Os plugins jQuery podem pertencer a duas categorias: funções personalizadas e métodos personalizados. A diferença entre elas é simples: enquanto uma função personalizada é uma simples função anexada ao código, um método pode ser aplicado a diversos tipos de seletores e encadeados com outros métodos. Na prática:

$.fn.olaMundo = function() {
   return this.each(function(){
      this.append("<h1>Olá Mundo!</h1>>");
   });
});

Esse é um método personalizado. Ele pode ser aplicado a elementos da seguinte forma:

$("div").olaMundo();

Já este é o código de uma função personalizada:

$.olaMundo = function() {
$("body").append("<h1>Olá Mundo!</h1>")
};

Ela não pode ser aplicada a nenhum seletor específico e deve ser chamada diretamente para ser executada:

$.olaMundo();

A decisão de fazer um plugin em forma de função ou método fica por conta do freguês e de suas necessidades. Porém, um método possui muito mais possibilidades que uma função personalizada, e a maioria dos plugins jQuery é desenvolvida como método. Nesse tutorial, optei por desenvolver o plugin em forma de método para mostrar suas diferentes funcionalidades: encadeamento, configurações, aplicação em seletores, etc.

Desenvolvendo um método personalizado: a estrutura.

Antes de mais nada, é preciso criar um arquivo externo tipo Javascript para o plugin. A nomenclatura deve ter o seguinte padrão: jquery.nomedoplugin.js . Como mencionado anteriormente, o plugin igualará a altura de elementos de um mesmo seletor, então, o arquivo do plugin se chamará jquery.igualaraltura.js . Não se esqueça de chamar o arquivo do plugin no documento html em que ele será utilizado.

A estrutura básica de um plugin jQuery é bem simples:

jQuery.fn.nomedafuncao = function() {
     // código que executa a função
};

No exemplo acima, o habitual atalho “$” foi substituído pela nomenclatura “jQuery”, evitando assim conflitos com outras bibliotecas de Javascript que também usam o “$” como atalho para seletores. Porém, desenvolver um plugin inteiro utilizando “jQuery”, além de ser trabalhoso, vai contra os hábitos de muitos desenvolvedores já tão acostumados a chamar elementos via “$”. Para poder utilizar o símbolo “$” à vontade dentro do plugin sem entrar em conflito com outras bibliotecas, o segredo é encapsular essa função inicial dentro de outra função anônima, que permitirá ao atalho $ se restringir ao plugin. Com essa nova função, o código fica assim:

(function($) {
   $.fn.nomedafuncao = function() {
     // código que executa a função
    };
})(jQuery);

Antes de prosseguir, é importante relembrar os passos:

• Criar um arquivo externo jquery.nomedoplugin.js
• Linkar o arquivo externo ao documento via tag script.
• Inserir a função inicial $.fn.nomedafuncao, de preferência encapsulada na função anônima “($)” que permitirá que o símbolo “$” seja utilizado sem entrar em conflito com outras bibliotecas.

A função igualarAltura()

A atuação da função é bem simples: uma matriz é criada para armazenar a altura de todos os elementos do seletor. Em seguida, o loop .each iterará pelos elementos do seletor e, através do .push, armazenará os valores na matriz. Este é o código:

var Taltura = new Array();
        this.each(function() {
			altura = $(this).height();
			Taltura.push(altura);
				});

Aqui vale uma explicação muito importante sobre os seletores this/$(this). Dentro da função principal, tanto faz utilizar um ou outro, sendo que ambos se referem ao conjunto de elementos sobre o qual será aplicado o método que estamos criando com a função. Porém, na closure que puxa a altura de cada elemento, foi utilizado o seletor $(this) pelo seu valor contextual, que se refere a um único elemento dentro do loop que checa todos os elementos do conjunto sobre o qual o método está sendo aplicado.

Capturada a altura dos elementos, é hora de verificar qual a maior, e aplicá-la aos demais elementos. A comparação dos números da matriz que contém todas as alturas é feita com o método sort() e armazenada na variável “maior” – que por sua vez é definida como a altura dos seletores sobre os quais o método igualarAltura() está sendo aplicado. O código fica assim:

var Taltura = new Array();
        this.each(function() {
			altura = $(this).height();
			Taltura.push(altura);
				});

var maior = Taltura.sort(function(a,b){return a - b}).slice(-1);
 this.css({height: maior + "px"});

Se testado o código, ele já estará funcionando. Porém, para que essa função seja um plugin de fato, ela deve retornar os elementos sobre os quais o método é aplicado, ou seja, o this. Isso permite o encadeamento do método, ou seja, faz com que ele possa ser utilizado junto com outros métodos, como no exemplo a seguir:

$("div").igualarAltura().css({backgroundColor: "#F00"})

Este é o código completo do plugin:

(function($){
    $.fn.igualarAltura = function() {
		var Taltura = new Array();
                this.each(function() {
			altura = $(this).height();
			Taltura.push(altura);
				             });

                var maior = Taltura.sort(function(a,b){return a - b}).slice(-1);
	        this.css({height: maior + "px"});
		return this; 
                }
})(jQuery);

Definindo configurações para o plugin.

Através do método $.extend() é possível definir as configurações editáveis do plugin, bem como pré-definir seus valores. Isso faz com que o desenvolvedor não tenha que passar muitos argumentos ao chamar o plugin, já que seus valores são declarados no próprio código do plugin. Para definir esses valores, primeiro definimos como “options” o parâmetro da função igualarAltura, depois criamos a variável com as configurações que posteriormente seráo mescladas ao parâmetro options com o método extend(). Eis o código:

$.fn.igualarAltura = function(options) {


        config = $.extend({
        color : 'white',
        background : 'blue',
	paddingBottom: '20px'
        }, options);

E, para aplicar essas configurações nos seletores que recebem o método igualarAltura, basta chamá-las no mesmo código em que havíamos definido a altura dos elementos anteriormente:

this.css({
		 height: maior + "px",
                
		 color : config.color,
                 background: config.background,
		 paddingBottom: config.paddingBottom
                
		 });

Lembrando que essas configurações podem ser sobrescritas na hora de chamar o método:

    $("div").igualarAltura({
        color : 'red',
        background : '#0F0',
	paddingBottom: '50px'
});

Esses são os passos essenciais para a construção de um plugin jQuery. As possibilidades de um plugin, porém, são infinitamente maiores que as mostradas nesse post. Caso tenha interesse, vale a pena se aprofundar no assunto. O próprio site da jQuery oferece uma rica documentação sobre plugins, um ótimo ponto de partida para quem quer criar os próprios métodos e compartilhá-los com a comunidade de desenvolvedores.

Bibliografia:

jQuery Cookbook – O’Reilly/Novatec. Ver publicação.