Otimizar códigos jQuery em um site significa aumentar sua performance. E, como qualquer desenvolvedor web deveria saber, os componentes e recursos do front-end são responsáveis por, pelo menos, 80% da performance de páginas web!

O jQuery, em relação a JavaScript “puro”, já é bem simples de se aprender e possui uma gama de recursos incrível! Entretanto, principalmente quem está começando e/ou ainda não entendeu bem a dinâmica da biblioteca, desconhece alguma dicas simples que, se aplicadas, garantem que o desempenho seja aumentado escrevendo menos código! É isso que vamos ver neste artigo e aprender como melhorar códigos jQuery para conseguir um desempenho melhor.

Otimização de seletores

Para começar, vejamos como é possível otimizar os seletores no jQuery, otimizando as consultas realizadas e aumentando a performance do código.

Velocidade de seletores

Muito do poder do jQuery vem de sua capacidade de selecionar elementos DOM e agir/interagir com eles através de seus selectors e, através deles, o jQuery provê uma tonelada de maneiras de escolher qual(is) elemento(s) em uma página se quer trabalhar. No entanto, um número surpreendente de desenvolvedores web não sabe que os seletores não são todos iguais e que é incrível a diferença de desempenho entre 2 seletores que, à primeira vista, parecem quase idênticos.

Como exemplo, vejamos 2 maneiras de selecionar todas as tags de parágrafo dentro de uma div com id específico:

$('#id p');

$('#id').find('p');

É surpreendente o fato de que a segunda maneira pode ser 2 vezes mais rápida!

Há muitas maneiras diferentes de selecionar elementos usando jQuery; estas podem ser (virtualmente) divididas em 5 diferentes métodos. Em ordem, do mais rápido para o mais lento, são:

• $('#id'). Sem dúvidas, este é o selector mais rápido, já que mapeia diretamente o document.getElementbyId() nativo do JavaScript. Sempre que possível, os seletores descendentes devem ser feitos com um seletor de ID conjuntamente ao método .find(), que limita o escopo do que está sendo pesquisado (tal como no exemplo $('#id').find('p') anterior).
• $('p'), $('input'), $('form'), [...]. Selecionar elementos pelo nome da tag também é rápido, já que mapeia diretamente para o método nativo document.getElementsByTagname().
• $(".class"). Selecionar por nome de classes é um pouco mais custoso. Enquanto isso é executado muito bem por navegadores modernos, pode ser que uma lentidão seja causada em versões do IE baixo da 9. Por quê? Porque o IE9 foi a primeira versão do Internet Explorer a dar suporte para a função document.getElementsByClassName(), nativa do JavaScript. Para interpretar isso, browsers mais antigos têm de recorrer ao usos de artifícios bem mais custosos, que realmente afetam o desempenho do seletor.
• $('[attribute="value"]'). Não há nenhum método JavaScript nativo para este tipo seletor, então, a única maneira que pode realizar essa busca, é procurar por todo o DOM em busca de combinações que satisfaçam à condição do seletor. Navegadores modernos que suportam o método querySelectorAll() terão um desempenho melhor em certos casos, mas, em geral, este tipo de seletor é bastante lento.
• $(':hidden'). Assim como o caso anterior, não existe um método JavaScript nativo para usar este tipo de seletor. Pseudo-seletores podem ser extremamente lentos, já que a consulta tem que ser executada em cada elemento da página. Novamente, navegadores modernos que suportam o método querySelectorAll() se saem ligeiramente melhores, mas tente evitar este tipo de seleção. Se realmente for necessário, é possível amenizar um pouco usando o .find(), como visto anteriormente. Por exemplo: $('#list').find(':hidden').

Encadeamento

Quase todos os métodos jQuery retornam um objeto jQuery. Isto significa que, quando um método é executado, seus resultados são retornados e é possível continuar a implementação de mais métodos em sequência, o que é conhecido como encadeamento ou chaining. Ao invés de escrever o mesmo seletor várias vezes, esta característica da biblioteca permite que várias ações possam ser executadas de uma vez.

Sem encadeamento:

$('#object').addClass('active');
$('#object').css('color','#F0F');
$('#object').height(300);

Com encadeamento:

$('#object').addClass('active').css('color','#F0F').height(300);

Isto tem um duplo efeito ao tornar seu código mais curto e mais rápido. Métodos encadeados são executados mais rapidamente do que vários métodos de um seletor em cache e, de ambos os jeitos, são muito mais rápidos que vários métodos através de seletores sem cache. Mas, esperem… “Seletor em cache”? O que é isso?

Seletores em cache

Outra maneira fácil de melhorar a performance do código jQuery – e que parece ser um mistério para a maioria dos desenvolvedores – é a ideia de fazer cache de seletores. Pense em quantas vezes você acaba escrevendo o mesmo seletor em seus códigos. Cada $('.element') tem que varrer todo o DOM procurando por combinações o tempo todo, independentemente se este seletor tenha sido executado antes. Executando a seleção uma vez e depois guardando o(s) resultado(s) em uma variável, significa que a busca no DOM tem que ser feita apenas uma única vez. Uma vez que os resultados de um seletor tem sido armazenada em cache, é possível fazer qualquer coisa com eles.

Primeiro, executa-se o seletor desejado (como exemplo, pegar todos os li dentro de uma ul de id “blocks”):

var blocks = $('#blocks').find('li');

Agora, é possível usar a variável blocks em qualquer lugar que se queira, sem ter que percorrer todo o DOM novamente em cada vez:

$('#hideBlocks').click(function(){
    blocks.fadeOut();
});
$('#showBlocks').click(function(){
    blocks.fadeIn();
});

Portanto, fica essa preciosa dica: qualquer seletor que é executado mais de uma vez deve ser armazenado em cache! Veja este teste no jsperf que mostra o quão mais rápido e eficiente é um seletor cacheado em detrimento a um não cacheado.

Delegação de Evento ou Event Delegation

Event listeners consomem memória. Em sites e aplicações complexos não é incomum ter um monte de event listeners implementados e, felizmente, jQuery fornece métodos realmente fáceis para umaa gestão eficiente event listeners através da delegação.

Num exemplo extremo, imagine uma situação em que uma tabela 10×10 precisa ter um event listener em cada uma de suas células para que, quando ocorrer um clique em alguma delas, seja adiciona ou removida uma classe que define a cor de fundo da respectiva célula. Uma maneira comum de implementar isso (e algo bastante comum de ser visto em códigos jQuery) é:

$('table').find('td').click(function() {
    $(this).toggleClass('active');
});

O jQuery, a partir de sua versão 1.7, passou a oferecer um novo método de escuta de eventos: .on(). Ele age como um utilitário que envolve todos os event listeners anteriores do jQuery em um único e conveniente método e a forma que ele é implementado determina como ele se comporta. Ao reescrever o exemplo acima usando .on(), tem-se o seguinte:

$('table').find('td').on('click',function() {
    $(this).toggleClass('active');
});

Bastante simples, certo? Mas o problema aqui é que, mesmo com a mudança, o código ainda conta com um event listener para cada célula da tabela… Uma maneira muito melhor de fazer isso funcionar é criar um único event listener para monitorar os eventos na própria tabela! Uma vez que a maioria dos eventos faz bubbling (vai percorrendo seus ancestrais em sequência) na árvore do DOM, é possível vincular um único listener para um elemento (neste caso, table) e esperar eventos serem disparados a partir de seus descendentes. A melhor maneira de fazer isso usando o .on() é:

$('table').on('click', 'td', function() {
    $(this).toggleClass('active');
});

Com essa mudança simples, o número de event listeners passou de 100 (10×10 células da tabela) para 1! Acredite: a diferença de performance entre os 2 exemplos acima é impressionante!

Se você está usando alguma versão do jQuery abaixo da 1.7, é possível fazer a mesma coisa usando .delegate(). A sintaxe é diferente, mas uma consulta à documentação vai esclarecer as coisas.

Manipulação de DOM

Com jQuery é fácil de manipular o DOM. É trivial criar novos nós, inserir, retirar outros, mudar as coisas ao redor e assim por diante. o código para fazer isso é simples de escrever, mas, toda vez que o DOM é manipulado, o navegador tem que revisar o DOM, o que pode ser muito custoso e impactar a performance do front-end. Um exemplo evidente em que isso acontece é em um loop longo, seja através de um loop for(), while() ou $.each().

Como exemplo, vamos supor que existe um array cheio de URLs de imagens de um banco de dados ou alguma chamada em AJAX e, o que se pretende, é colocar todas essas imagens numa lista não ordenada. Comumente, o código que se encontra para isso é:

var arr = [reallyLongArrayOfImageURLs];
 
$.each(arr, function(count, item) {
    var newImg = '<li><img src="' + item + '"></li>';
    $('#imgList').append(newImg);
});

Existem alguns problemas com isso. Para começar, há a seleção de $('#ImgList') em cada iteração do loop – e, como vimos anteriormente, isso não é nada bom para a performance. O outro problema é que, a cada vez que o loop repete, é adicionado um novo li ao DOM. Cada uma dessas inserções consome recursos e, se o array é muito grande, isso poderia levar a uma grande perda de performance ou, até mesmo, ao temido alerta “Um script desta página está tornando a página lenta”…

Uma outra maneira de implementar a solução é:

var arr = [reallyLongArrayOfImageURLs],
    tmp = '';
 
$.each(arr, function(count, item) {
    tmp += '<li><img src="' + item + '"></li>';
});
 
$('#imgList').append(tmp);

O que foi feito, aqui, foi a criação de uma variável tmp para receber cada li criado. Quando o loop termina, a variável contém todos os itens de lista na memória e estes podem ser anexados ao ul todos de uma vez! Como navegadores trabalham melhor com operações de objetos na memória ao invés de diretamente atualizando o DOM a cada vez, este código é bem mais rápido e eficiente!

Conclusão

Logicamente, estas dicas de como otimizar códigos jQuery para aumentar a performance do front-end não são as únicas existentes, mas, certamente, estão dentre as mais simples de implementar. Embora algumas das mudanças, individualmente, façam apenas alguns milésimos de segundo de diferença, ao somar isso, dependendo de sua aplicação, é possível ter um aumento de performance de quase 70%!

Estudos mostram que o olho humano é capaz de discernir delays de 100ms (!), portanto, fazer algumas mudanças no código pode, facilmente, ter um efeito notável sobre o modo (e a percepção) de quão bem um seu site ou aplicativo é executado.

E você, tem alguma outra dica de otimização de código jQuery para compartilhar? Comente!

Artigos Relacionados

• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber
• Ferramentas e recursos para desenvolvimento web
• 8 dicas para fazer códigos melhores com jQuery
• Truques de configuração do WordPress
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Dicas para otimizar códigos PHP
• Wireframes para web: guia completo de desenvolvimento

Quando o assunto é desenvolvimento web, os visitantes de sites não têm muita paciência para esperar… Estudos mostram que se o site não apresentar algum feedback (mostrar alguns elementos/conteúdos) em poucos segundos, a pessoa desiste de esperar e abandona o site – com grandes probabilidades de não mais retornar.

Uma das funções mais interessantes é apresentar um loading (vulgo “carregamento”) indicando quantos por cento (%) do site estão carregados e o que ainda falta, mostrando para o visitante este feedback que ele precisa para ter certeza de que “coisas” estão acontecendo.

Depois do advento do AJAX, nos anos 90 do século passado, e surgimento de muitos bons frameworks para front-end depois disso, tais como jQuery, os programadores contamos com excelentes ferramentas e recursos para acelerar o carregamento e melhorar a performance de sites, sendo possível realizar funções, efeitos e interações que, pouco tempo atrás, não eram sequer imaginadas.

Uma das interações é fazer loading em conteúdos do site, ou, mesmo, em páginas inteiras do site, e uma das maneias de se fazer isso é usando o plugin para jQuery jLoader.

jLoader: dinâmica

É possível ver no site oficial do jLoad que está licenciado sob a GNU GPL v3, então seu uso é grátis e pode ser feito sem maiores complicações.

O que o plugin permite é mostrar uma barra de carregamento para elementos específicos da página (lembrando que “body” também é um elemento da página). Quer dizer, é possível tanto carregar elementos específicos da página (e o jLoader permite fazer múltiplos carregamentos simultâneos), quanto carregar a página inteira, colocando o loader no documento inteiro.

Algumas das características do jLoader são:

• Múltiplos loadings simultâneos na mesma página
• Acompanha redimensionamento da janela
• Se o elemento-alvo tiver imagem de background ou for uma imagem, isso é levado em consideração
• Função para interromper loadings em triggers de eventos
• Dentre outros

jLoader: funcionamento

O plugin é leve (8KB) e conta com somente 1 arquivo (nada de CSS externo). Como citado, é possível fazer carregamento para vários elementos da página ao mesmo tempo; para cada um deles, o método construtor pode receber argumentos de personalização:

• overlayColor. Hexadecimal da cor de background do loading (padrão “#000″).
• userCallback. Função para quando o carregamento termina (padrão “null”).
• showProgress. Se a barra de loading vai ou não aparecer (padrão “false”).
• showProgressText. Se o número da porcentagem vai ou não aparecer (padrão “false”).
• progressColor. Hexadecimal para a cor da barra de progresso (padrão “#FFF”).
• textColor. Hexadecimal para a cor dos números da porcentagem (padrão “#FFF”).
• textSize. Tamanho do texto para os números da porcentagem (padrão “15″).
• loaderPosition. Reposiciona o loader no overlay; por padrão é centalizado (usa-se “loaderPosition:{top:y,left:x}”).

Não são tantas opções, assim, mas já dá para fazer um nível de personalização bem interessante. Vamos ver em alguns exemplos.

jLoader: exemplo 1

Como primeiro exemplo, vamos imaginar que queremos fazer loading em um elemento de id “escopo”, mostrando a barra de progresso e o texto da porcentagem de carregamento com texto 20 e, após o fim do carregamento, dar o trigger para a função showContent().

1
2
3
4
5
6
7
8
9
10
11
12

jQuery(document).ready(function($){
    var loader = new Loader('#escopo',
        {
	    showProgress:true,
	    showProgressText:true,
	    textSize:20,
	    userCallback:showContent
	}
    );
 
    loader.Start();
});

jLoader: exemplo 2

Loadin no elemento de id “noticias”, com fundo “#0B274C” e cor da barra de carregamento “#F6911E”.

1
2
3
4
5
6
7
8
9
10
11
12

jQuery(document).ready(function($){
    var loader = new Loader('#noticias',
	{
	    showProgress:true,
	    showProgressText:true,
	    overlayColor:'#0B274C',
	    progressColor:'#F6911E'
	}
    );
 
    loader.Start();
});

jLoader: exemplo 3

Loading o site inteiro, com todas as configurações padrão, exceto o tamanho do texto, que será “10″.

1
2
3
4
5
6
7
8
9

jQuery(document).ready(function($){
    var loader = new Loader('body',
	{
	    textSize:10
	}
    );
 
    loader.Start();
});

Outras customizações

Estamos falando de arquivos javascript, meus amigos, e, mesmo que não haja uma função pré-definida e/ou você queira fazer ajustes mais “pesados”, diretamente no core do plugin, basta abrir o arquivo que você baixou e realizar as mudanças que quiser…

Por exemplo, se quiser aumentar a espessura da barra de loading (que, por padrão, é de 1px), simplesmente abro o arquivo, procura o trecho de código que especifica essa características (na atual versão do jLoader, a 1.1.1, esta característica está na linha 139 do arquivo jLoader.js).

Assim como foi explicado no artigo sobre criação de URLs amigáveis com slugs, o mesmo vale para qualquer script pronto: basta abrir, estudar e fazer as modificações que cabem ao projeto/resultado pretendido.

Conclusão

Certamente, uma das maiores questões de muitos desenvolvedores é como fazer loading no site. Usando o jLoader, isto está resolvido.

Mas, atenção: não é só porque existe o recurso de carregamento, que este deve ser usado em todo e qualquer elemento de todos os sites do mundo… Há que se levar em consideração o escopo do projeto e se, realmente, existe a necessidade e/ou conveniência em usar o recurso.

Se realmente for necessário, use o jLoader para fazer loadings de elementos no site (ou páginas completas) e desfrute das facilidades de fazer isso de forma tão simples, aumentando a boa experiência que os visitantes terão!

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• 5 dicas para temas WordPress melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• 25 extensões para o Firefox para aumentar a produtividade no dia-a-dia na web
• Wireframes para web: guia completo de desenvolvimento
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber
• 8 maneiras de melhorar a performance de um site
• Melhores editores WYSIWYG para seu projeto

Melhorar a interação do campo de busca de um site permite que as pessoas que usam tal formulário para buscar tenham uma melhor experiência de uso (leia-se: usabilidade). Com pequenos detalhes, um pouquinho de bom-senso e algumas poucas linhas de jQuery, é possível promover efeitos interessante no campo de busca.

Para ficar claro, será abordada a seguinte interação:

• Campo de busca é “populado” com um termo pré-definido;
• Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende;
• Quando o campo perde o foco, se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece;
• Quando o botão é pressionado, caso o valor seja termo pré-definido ou esteja em branco, o form não submete e o foco passa ao campo apropriado.

O formulário de busca

Um exemplo de um formulário simples de busca, que pode ser usado em “sites reais”, profissionalmente, pode ser do tipo:

<form method="get" action="script.php" name="form" id="form">
    <input type="text" id="form-input" name="form-input" value="Snippets ou Scripts" />
    <input type="submit" id="form-submit" name="form-submit" value="Buscar" />
</form>

Termo pré-definido

A expressão “termo pré-definido” é mais adequada, já que cada site pede um “label” de indicação diferente, conforme as especificações e necessidades deste. Algumas pessoas preferem o termo “Buscar” ou “Procurar” com um botão de label “OK” ou “Vai”; já alguns sites preferem explicitar a função da busca com algo do tipo “Produtos ou Serviços”, acompanhado de um botão com o label “Buscar” (o que é uma abordagem bem interessante).

De uma maneira ou de outra, é preciso definir que termo será esse. Para nosso exemplo, vamos supor que seja um site voltado a desenvolvimento web e o termo pré-definido será “Snippets ou Scripts“. Vamos criar uma expressão regular simples com uma parte do termo pré definido:

patt = new RegExp('Snippets ou');

E por que não colocar a expressão inteira? Também poderia ser feito, mas o “esforço” para identificar o padrão aumenta em relação ao tamanho/complexidade da mesma. Sinta-se à vontade para fazer vários testes.

Melhorando a interação do formulário de busca

A melhora da interação se de duas formas:

• Interção com o campo;
• Interação com o botão;

Interação com o campo

Segundo o planejamento, o que se pretende é “Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende”. A lógica é testar a expressão regular: caso o teste seja positivo, o campo é limpo e recebe o foco para a pessoa escrever. Ao perder o foco, “se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece”.

$('#form-input')
.focus(function(){
    if (patt.test($(this).val()))
    {
        $(this).val('');
    }
})
.blur(function(){
    if ($(this).val() == '')
    {
        $(this).val('Snippets ou Scripts');
    }
});

Interação com o botão

A interação com o botão também é importante – e, infelizmente, é um ponto esquecido por muitos desenvolvedores. A ideia é, ao se clicar no botão, testar se a expressão “bate” ou o campo está em branco e, caso seja um desses casos, dar o foco no campo.

$('#form-submit').click(function(){
    if ((patt.test($('#form-input').val())) || ($('#form-input').val() == ''))
    {
        $('#busca-bottom').focus();
        return false; // Impede que o form seja submetido
    }
});

Não é necessário dar a instrução de limpar o campo no foco porque a peça de script anterior, sobre a interação com o campo, já faz isso.

JavaScript final

Juntando os pedaços de códigos, já devidamente explicados, tem-se o seguinte:

$('#form-input')
.focus(function(){
    if (patt.test($(this).val()))
    {
        $(this).val('');
    }
})
.blur(function(){
    if ($(this).val() == '')
    {
        $(this).val('Snippets ou Scripts');
    }
});
 
$('#form-submit').click(function(){
    if ((patt.test($('#form-input').val())) || ($('#form-input').val() == ''))
    {
        $('#busca-bottom').focus();
        return false; // Impede que o form seja submetido
    }
});

Conclusão sobre a melhora da interação em formulários de busca

Certamente essas não são as únicas melhorias cabíveis para a melhoria de usabilidade e interação de um formulário de busca simples, mas, certamente, são 2 medidas muito bem-vindas para que a experiência e “agradabilidade” sejam melhoradas.

Poderia haver, por exemplo, uma tooltip com o que se pode encontrar no site e/ou fornecendo algum exemplo de termo; implementar uma solução de autocomplete; ou, ao invés de limpar o campo, apenas selecionar todo o termo para, já digitação, substituí-lo pelo o que está sendo digitado. Depende da necessidade do projeto.

E você, tem alguma dica ou solução interessante para melhorar a interação em formulários de busca?

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• Textarea: dicas e truques que você sempre quis saber
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Wireframes para web: guia completo de desenvolvimento
• JSON – JavaScript Object Notation
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• URLs amigáveis (slug) à WordPress
• Melhores editores WYSIWYG para seu projeto
• 15 fantásticos comandos SQL para WordPress

jQuery é um framework javascript que está se tornando se tornou incrivelmente popular. É rápido, fácil de usar e criar plugins personalizados e componentes são feitos rapidamente. Atualmente, todo mundo é um desenvolvedor jQuery e o repositório de plugins está praticamente explodindo com a adições praticamente diárias.

À luz de tudo isto, aqui estão 8 excelentes dicas para fazer códigos melhores com jQuery e se tornar um melhor programador em jQuery que você deve considerar antes de começar seu próximo projeto.

Mantenha a acessibilidade através da degradação

Com jQuery ser popular é assim, mais e mais pessoas estão escrevendo plugins e criando pacotes de componentes que estão prontos para uso. Mas alguns desenvolvedores tem em mente que projetos online também devem funcionar sem javascript ativado. Essa é uma das principais razões para fazer javascript não obstrusivo. Como exemplo, vejam:

CSS

.animate {
color:red;
display:none
}

jQuery

$('.animate').fadeIn();

Usaria jQuery para dar um fadeIn() com a classe “animate”. Mas se o javascript estiver desativado, o navegador ainda analisa a CSS e, naturalmente, os elementos nunca serão mostrados!

Ao invés disso, tenha sempre o hábito de separar “javascript CSS” e “CSS puro”. Tente isto:

CSS

.animate {
color:red
}
 
.animate_js {
display:none
}

jQuery

$('.animate').addClass('animate_js').fadeIn();

Dessa forma, você pode estilizar os elementos para cada situação e manter a degradação de uma forma sensata. Como sempre, sem testar seu código javascript ativado antes da implementação.

Mover efeitos visuais para a camada de apresentação

Quando for escrever javascript, mantenha sempre o foco nos comportamentos. jQuery não é CSS, então esteja atento as diferenças fundamentais entre a apresentação e comportamento.

Por exemplo, quase sempre é uma boa ideia adicionar classes ao invés de trabalhar com somente propriedades CSS. Evite fades e “glamour” nas funções. Guarde os efeitos para uma fantástica apresentação, mas cuidado no uso em funções javascript - nem todos compartilham seu gosto visual!

Usar Firebug e console.log

Firebug é seu amigo quando está desenvolvendo com jQuery – na verdade, no desenvolvimento web, geral. E assim é o comando console.log, que graciosamente substitui o alert() chato.

Basta digitar console.log() para debugar sempre que você precisar no seu código. Mas lembre-se de remover essas instruções antes da produção, uma vez que muitos navegadores terão conflitos, incluindo o IE (claro!).

E, para outras funcionalidades do Firebug, confira a Console API.

Definir padrões sensatos e utilizar uma quantidade limitada de parâmetros

Quando você é mordido pelo inseto jQuery e começa a criar plugins, frequentemente tenta maximizar o número de parâmetros para tornar o desenvolvimento o mais flexível possível.

Isso tudo é muito nobre, mas que fique claro e que tente não confundir o desenvolvedor web com parâmetros minúsculos que quase não fazem diferença (como fades, velocidades, etc.). Ao invés disso, passe paràmetro de objeto e defina padrões sensíveis. Seu código não precisa fazer literalmente tudo!

Encapsular seu próprio alias

jQuery não é o único framework que usa a abreviação de dólar ($). Vários plugins JQuery e trechos de código também o utilizam para definir onDomReady callbacks e funções de seletores CSS, mas você pode acabar (e evitar) com esse conflitos.

Você pode usar seu próprio alias (que pode continuar sendo o “$”) desse jeito:

jQuery(function($) {
    // código usando alias próprio
});

O exemplo acima usa tanto o atalho para $(document).ready(), quanto o argumento para escrever código jQuery em failsafe usando o alias $, sem contar com o alias global. Você pode e deve, igualmente, integrar o $ quando for criar plugins:

(function($) {
    // código do plugin, usando $ quantas vezes quiser
})(jQuery);

Definir callbacks próprios

Quando estiver criando plugins para jQuery, é uma boa idéia deixar o desenvolvedor atribuir callbacks próprios como como parâmetros de funções, tornando possível personalizar ainda mais o plugin. Então, ao invés de forçar os efeitos de callback dentro do plugin, engatilhe funções de eventos e defina os efeitos livremente.

Aqui está um exemplo em que passamos a função onFade para o plugin, escrito como um simples plugin fadeIn:

/*
This plugin fades an element and triggers the onFade when completed
 
EXAMPLE USAGE:
  $('.fademe').customFade({
    fadeSpeed: 50,
    onFade: function(elem) {
      console.log(elem+' has faded!')
    }
  });
*/
 
jQuery.fn.customFade($params) {
  var $defaults = {
    fadeSpeed: 1000,
    onFade: function(element){}
  };
  var $p = $.extend($defaults, $params);
  $(this).fadeIn($p.fadeSpeed,$p.onFade($(this)));
}

Ficar atento com as diferenças entre navegadores

jQuery é bastante propenso a ser crossbrowser. Mas ainda existem falhas, especialmente com os navegadores como o Safari, que tem um trigger diferente para onLoad, e IE, evidentemente. Sempre teste em vários navegadores e preste muita atenção em quando e onde as falhas ocorrem.

Não ser excessivo e definir seu propósito

Certifique-se de que não está usando jQuery apenas porque você pode. Sempre analise suas necessidades e tenha uma ideia clara do que você quer alcançar antes mesmo de escrever a primeira linha. Faça sketches de seu código e discuta suas ideias com seus pares antes da codificação (se não estiver trabalhando sozinho, claro).

Não reinvente a roda a menos que você esteja fazendo isso para aprender e/ou se educar, analise o código de plugins de qualidade para inspirar-se e ver o que tem sido feito por bons programadores.

Bons códigos!

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• 5 dicas para temas WordPress melhores
• Ferramentas e recursos para desenvolvimento web
• Truques de configuração do WordPress
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Dicas para otimizar códigos PHP
• Como fazer loading em conteúdos do site
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber
• URLs amigáveis (slug) à WordPress

É fato que o plugin NextGEN Gallery do WordPress é o melhor quando o assunto é gerenciamento de galerias de imagens. Com NextGEN Gallery é possível criar galerias facilmente, acrescentar/retirar imagens em modo batch (é possível enviar um arquivo .zip e ele “abre” as imagens numa galeria), dá pra criar álbuns, copiar/transferir imagens entre galerias, inserir marca d’água automaticamente, enfim, o NextGEN Gallery é bem conhecido na comunidade WordPress e certamente está no “Top 5″ de plugins!

Existe, também, apesar não ser tão conhecido, um script à “lightbox” muito bonito e interessante: SexyLightBox. Como é possível ver em sua página, o efeito que ele oferece é bem interessante e, de certa maneira, diferenciado dos outros lightboxes que encontramos por aí (ênfase ao fato de as imagens serem apresentadas em tamanho completo respeitando a resolução do navegador do visitante).

Aproveitando que o NextGEN Gallery oferece a possibilidade de se utilizar script de terceiros para a exibição de suas galerias e somado ao fato de que o SexyLightBox é realmente interessante… NextGEN Gallery + SexyLightBox = Galerias de Imagens Sexy!

Baixando, instalando e configurando NextGEN Gallery

O primeiro passo é baixar e instalar NextGEN Gallery no seu WordPress. Devido ao fato de eles serem de “naturezas” diferentes (o primeiro é um plugin do WordPress; o segundo é um script que pode ser usado em qualquer tipo de site), a maneira de instalar e usar cada um deles é diferente.

Para o NextGEN Gallery, devido ao fato de ser um plugin do WordPress, a instalação é aquela, mesma, que já estamos acostumados:

• Baixar o NextGEN Gallery;
• Descompactar em sua pasta wp-content/plugins;
• Habilitar o plugin.

Depois, perceba que aparece em seus menus um novo módulo, “Gallery”, com subopções para controle do NextGen.

É possível traduzir as opções para vários idiomas, inclusive Língua Portuguesa. Baixe o pacote Portuguese / Brazilian Português [pt_BR] nas traduções oficiais e faça upload do arquivo .mo para wp-content/plugins/nextgen-gallery/lang e, automaticamente, os menus serão traduzidos.

Painel NextGen Gallery em Língua Portuguesa

Para já preparar o NextGen para trabalhar com o SexyLightBox, acesse em seu painel WordPress Galeria > Opções > Efeitos e altere as opções para:

• Efeito Javascript para miniaturas: Personalizado;
• Linha de código do link: rel=”sexylightbox”.

Baixando, instalando e configurando SexyLighbox

Vá até o site oficial do SexyLighbox para fazer download do SexyLightbox. Depois, é preciso subir a pasta descompactada para o servidor.

Não sei você, mas eu costumo criar uma pasta “js” dentro do meu tema para tudo ficar organizado e eu poder usar as funções de caminho relativo do WordPress tranquilamente. Então, uma estrutura que eu usaria para o caso seria wp-content/themes/MEU-TEMA/js/sexy-lightbox-2.3 (essa é a versão mais atual no dia de publicação deste artigo).

Agora é o momento de chamar o SexyLightbox para que funcione em seu tema. Há muitas maneiras diferentes de mexer com chamadas a scripts no WordPress; no caso, vou mostrar uma delas e, em artigos futuros, vou comentando sobre as outras (essa é a deixa para você assinar o feed do desenvolvimento para web).

Uma coisa importante é que o SexyLighbox não é feito para ser usado em standalone, ele deve estar associado a jQuery ou Mootools. Obviamente vamos usar jQuery para o serviço!  ;-)

Então, o código com as respectivas chamadas a scripts e folhas de estilo fica assim:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.js"></script>
<link rel="stylesheet" href="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
    SexyLightbox.initialize({color:'white', imagesdir: '<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexyimages'});
});
</script>

Perceba que alguns parâmetros foram passados na inicialização do script do SexyLightbox. O grande “trunfo” é usar o parâmetro imagesdir, porque na documentação está errado!

Personalizando seu SexyLighbox

Uma coisa muito boa é que há uma pasta “PSDs” no SexyLighbox para que cada um posso personalizar a aparência como quiser. Então, você pode alterar a cor de fundo, texto, alterar os elementos (setinhas, etc) e usar da forma que você quiser. Então quando você alterar a cor de fundo para o SexyLighbox ficar com a identidade visual de seu site, você vai perceber que a parte do meio da moldura ainda permanece intacta. No caso, você deve fazer um pequeno acréscimo de CSS em seu arquivo padrão (pode ser ao final):

#SLB-Contenido {
border-color:#HEXADECIMAL !important;
}

Agora você tem galerias Sexy!

Com isso, agora você galerias de imagens automatizadas e sexy! Para tirar melhor proveito disso, estude a documentação do NextGen Gallery (além dos fóruns, os tutoriais sobre NextGen de David Potter devem ajudar) e do SexyLightbox para incrementar/customizar ainda mais as galerias de imagens de seu site para que fiquem práticas, bonitas e com excelente performance.

E capriche nas imagens! ;-)

Artigos Relacionados

• 10 erros básicos de web design
• Cores na web: guia completo
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Ferramentas para criação de wireframes
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin

Agora imagine como seria bom se houvesse uma maneira de criar sumários dinamicamente para as páginas de seu site! “Seria”, não; é! É possível criar sumários de forma dinâmica através do plugin TOC (Table of Contents) jQuery plugin (jquery.toc) para jQuery!

Sobre o TOC jQuery Plugin

Na página oficial do TOC jQuery Plugin é possível encontrar informações importantes sobre o funcionamento do plugin, histórico de atualizações, exemplo de funcionamento, dentre outros. Mas, para você que está lendo este artigo diretamente no desenvolvimento para web, é possível ver em todos os artigos o plugin em ação, já que implementei a criação dinâmica de sumários oficialmente aqui no blog! Desabilite o javascript que você vai ver, ou melhor, não vai ver o Sumário! ;-)

O funcionamento do plugin é em cima das tags de títulos e subtítulos presentes nas páginas do site. Através da análise destes o plugin:

• Gera um Sumário (“Table of Contents”) dinamicamente (através de tags de lista);
• Adiciona automaticamente numeração ao Sumário e aos correspondentes títulos e subtítulos da página.

E, seguindo a “filosofia” do jQuery, tudo é feito de forma bastante automática e simplificada, bastando somente algumas pouquíssimas linhas de código para colocar a extensão em funcionamento!

Funcionamento do jquery.toc

A primeira coisa a se fazer, logicamente, é baixar o query.toc.  Lembrando que é sempre aconselhável baixar a última versão disponível – na data de publicação deste artigo é a v1.0.2. Em relação a seu tamanho, também não há nada com o que se preocupar: sua versão “normal” tem 5.3KB e a versão compactada tem 2.4KB. Depois disso, basta fazer a “chamada” do script (abaixo da chamada ao jQuery, claro) e começar a codificar.

Lembrando que é conveniente fazer a chamada de todos javascripts e codificar na linguagem ao final do documento, preferencialmente antes de “</body>”.

Codificando

Primeiro é importante escolher em qual lugar vai aparecer o sumário dinâmico. É bom dedicar uma DIV especialmente para isso para evitar erros/conflitos. Para facilitar, neste exemplo a DIV terá o ID “toc”.

1

<div id="toc"></div> <!-- sim, é uma DIV vazia... -->

Uma das condições para o correto funcionamento do TOC jQuery Plugin é que cada título/subtítulo que se queira incluir no sumário tenha o atributo id para ser referenciado e que será usado nos links de âncora do Sumário criado. Falando claramente: todos seus títulos/subtítulos têm que ter id.

Logicamente que criar manualmente um id para cada título/subtítulo a fim de gerar dinamicamente o Sumário seria um trabalho extra e, diga-se de passagem, desnecessário, já que é possível fazer isso via javascript/jQuery. Vamos por partes.

O primeiro objetivo é “pegar” todos título/subtítulos da página (no trecho em que se queira incluir no Sumário dinâmico) e acrescentar um id para cada um. O id pode ser qualquer nome que seja diferente para cada título/subtítulo; afinal, trata-se de um id (mais informações a respeito, leia o artigo sobre diferenças entre IDs e Classes):

1
2
3
4
5

(function ($) {
    $("#content :header").each(function(){ // http://tinyurl.com/celarh
        // fazer qualquer coisa com cada título/subtítulo dentro de #content (nome-alvo fictício)
    });
})(jQuery);

No caso da geração automática de Sumário de conteúdos com o plugin TOC jQuery, nosso objetivo, como já explicado, é dar um id para cada título/subtítulo. Poderíamos criar um nome genérico e fazer um contador para marcar com números (o resultaria seria “#id1″, “#id2″, “#id3″…); mas acho mais “elegante” manter o texto do título e, para enfeitar mais um pouco, inserir “_” no lugar de cada espaço (dado que nomes de IDs não podem conter white spaces).

Vamos gerar um ID para cada título/subtítulo baseados nas seguintes premissas:

• Nome será o texto do título/subtítulo;
• Todos caracteres minúsculos;
• Eliminação de qualquer caractere que não seja letra ou número (incluindo caracteres especiais);
• Substituição de espaços por underscore (“_”).

Então, estamos assim, por enquanto:

1
2
3
4
5
6

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_'); // http://tinyurl.com/dl9z35
        $(this).attr('id', id); //  http://tinyurl.com/68cxmw
    });
})(jQuery);

Depois disso, já temos todos os títulos e subtítulos “alvo” com um ID. Agora é o momento de mandar o jquery.toc entrar em ação:

1
2
3
4
5
6
7
8

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_');
        $(this).attr('id', id);
    });
 
    $('#toc').toc(); // #toc é o "container" do Sumário, definido anteriormente
})(jQuery);

O “grosso” da coisa é isso! Pode fazer seus testes e ver que o Sumário foi criado automaticamente e está funcional, com todas as âncoras apontando para seus respectivos títulos/subtítulos.

“Refinando” o Sumário dinâmico

Para obter um resultado mais “fino” ainda falta codificar alguns detalhes.

Por exemplo: vamos supor que, por algum motivo, você queira que alguns títulos/subtítulos não entrem na listagem do Sumário. Consultando a documentação oficial do TOC jQuery Plugin é possível identificar que isso é possível através da opção exclude. Vamos supor que não queremos que os títulos primários e o título secundário de id “apresentacao” entrem na listagem; então o trecho ficaria:

1

$('#toc').toc({exclude: 'h1, h2#apresentacao'});

Em conversa com o desenvolvedor do plugin, fiquei sabendo que existe uma limitação quanto ao número de elementos possíveis no exclude. Então, caso tenha bastantes elementos que não gostaria que estivesse listados no Sumário, uma boa dica é criar uma classe qualquer (por exemplo “toc-exclude”) e marcar os elementos indesejáveis com ela. Então, ficaria algo como:

1

$('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'});

Aproveitando que estamos querendo fazer um trabalho bem-feito e que jQuery nos permite isso com muita facilidade, não nos custa indicar ao visitante que aquela listagem é um Sumário, inserindo, via jQuery, um subtítulo antes da DIV “toc”:

1

$('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'}).prepend('<h2>Sum&aacute;rio</h2>'); // http://tinyurl.com/bjlr42

O script final de nosso exemplo – que serve de “base” para a implementação do jquery.toc em qualquer site – fica assim:

1
2
3
4
5
6
7
8

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_');
        $(this).attr('id', id);
    });
 
    $('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'}).prepend('<h2>Sum&aacute;rio</h2>');
})(jQuery);

Conclusões sobre o Table of Contents jQuery plugin

Como foi demonstrado, criar um sumário automático-dinâmico com jQuery utilizando o plugin jquery.toc é algo bastante simples. E ele pode ser usado em qualquer tipo de site, inclusive os que utilizam CMSs, como os desenvolvidos em WordPress – vejam que este blog é WordPress e o recurso está presente.

Como “desafio”, no site em que for implementar o jquery.toc faça o seguinte: gere a DIV #toc através de jQuery ao invés de deixá-la na marcação (X)HTML. Coloque o link para o site nos comentários! ;-)

Artigos Relacionados

• JSON – JavaScript Object Notation
• Como fazer loading em conteúdos do site
• Melhorando a interação em formulários de busca
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Newsletter no WordPress com o plugin Ajax Newsletter (wp-ajax-newsletter)
• WP-Syntax: destacar códigos fonte em artigos de blogs WordPress
• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos
• Como pegar parte do conteúdo (dados) de outro site com PHP
• Estratégia de Conteúdo ou Content Strategy
• Como otimizar códigos jQuery e aumentar a performance do front-end

São indicações de tutoriais, exemplos, apostilas e macetes de jQuery, tanto de tutoriais individuais, quanto web sites inteiros dedicados ao framework! Gostei especialmente dos links sobre uso de AJAX com jQuery!

Enfim, mais uma belíssima compilação do Noupe sobre este framework javascript que, com certeza, é o mais leve, fácil e eficiente disponível hoje em dia!

Artigos Relacionados

• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Newsletter no WordPress com o plugin Ajax Newsletter (wp-ajax-newsletter)
• JSON – JavaScript Object Notation
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Melhorando a interação em formulários de busca
• Ferramentas para criação de wireframes
• Perguntas ao cliente para antes e depois de um projeto
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy

Tudo está bem separadinho por categorias:

• Painéis deslizantes;
• Menus;
• Abas;
• “Acordeons”;
• Shows de slides;
• Efeitos de transição;
• Carroséis;
• Seletores de cores;
• Lightboxes;
• Validações de formulários;
• Elementos de formulários;
• Tooltips;
• Tabelas;
• Muitos, muitos outros…

Ufa! São tantas as categorias e tão bons os exemplos que, provavelmente, esta é a melhor seleção de plugins para jQuery que existe atualmente!

Pessoal, é sério: guardem esta lista com vocês (seja favoritando, adicionando no del.icio.us, navegador, ou o que quer que seja), porque, certamente, aqueles que desenvolvem com jQuery um dia precisarão de algo que está nesta lista!

Abraços e aproveitemos!

<update>
Saiu uma lista com mais 37 plugins para jQuery!
</update>

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• Wireframes para web: guia completo de desenvolvimento
• Como fazer loading em conteúdos do site
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber
• 8 maneiras de melhorar a performance de um site
• Melhores editores WYSIWYG para seu projeto
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Recursos de usabilidade grátis
• 4 elementos de design para um bom call to action

jQuery é o melhor framework javascript da atualidade (oficialmente é considerado uma biblioteca javascript), isso todos que já mexem com desenvolvimento web já sabem. Já quem está iniciando no mundo do desenvolvimento para web ainda não sabe… E justamente para explicar um pouco mais sobre o jQuery é que este artigo foi escrito, visando auxiliar aos que estão iniciando a jornada javascript a encontrar um caminho seguro para começar.

Introdução

Geralmente desenvolvedores web gostam de colecionar bibliotecas e scripts prontos das linguagens de programação que utilizam no dia-a-dia. Ter à disposição inúmeros arquivos de terceiros, desde exemplos e classes, passando por modelos e tudo o mais que possa servir de alguma maneira – e/ou simplesmente satisfazer a curiosidade acerca determinado modo ou técnica para programar – é o modus operandi de quem programa para web.

Obviamente, todos queremos ter o melhor! E, em se tratando de progração, não poderia ser diferente. Dado que o melhor framework javascript atual é jQuery, então não há nada mais natural do que conhecer e saber usar esta poderosíssima ferramenta para desenvolver sites, blogs, produtos virtuais, sistemas online e o que mais você precisar que tenha javascript!

O que é um framework?

jQuery é a maneira mais fácil, simples, elegante e sofisticada de codificar javascript; é, nada mais, nada menos, que, segundo a opinião de profissionais do ramo e publicações especializadas, um dos melhores frameworks já desenvolvidos! Para ficar mais claro, framework, segundo definição encontrada na Wikipédia, é:

No desenvolvimento do software, um framework ou arcabouço é uma estrutura de suporte definida em que um outro projeto de software pode ser organizado e desenvolvido. Um framework pode incluir programas de suporte, bibliotecas de código, linguagens de script e outros softwares para ajudar a desenvolver e juntar diferentes componentes de um projeto de software.

Frameworks são projetados com a intenção de facilitar o desenvolvimento de software, habilitando designers e programadores a gastarem mais tempo determinando as exigências do software do que com detalhes tediosos de baixo nível do sistema. (sic)

Para que serve jQuery?

Segundo consta no web site oficial, “jQuery is designed to change the way that you write JavaScript”, ou seja, jQuery é projetado para mudar sua maneira de escrever javascript (tradução livre). Por experiência própria, posso afirmar que o objetivo da equipe de desenvolvimento foi atingido com sucesso!

jQuery é disponibilizado das diferentes maneiras:

• Desenvolvimento. Apresenta todos seus códigos completos, identados e de fácil entendimento (isso é relativo). Ideal para quem queira estudar e compreender como as coisas funcionam, essa “versão sem cortes” é ideal para estudo/aprendizado a fundo da biblioteca.
• Produção. Esta é a versão para quem se preocupa somente em utilizar o jQuery e usufruir de todo o seu poder através de um arquivo compactado, diminuto e ideal para aqueles que querem usar o framework rapidamente, evitando transferências desnecessárias e tempos de carregamento excessivos.
• Google API/CDN. Através da API AJAX de bibliotecas do Google é possível, dentre outros frameworks e bibliotecas, incorporar o jQuery a suas páginas web. Leia mais sobre como usar jQuery a partir da API AJAX do Google.

Quando se usa jQuery, realmente a maneira de se escrever javascript muda! É o fim das enormes linhas que servem somente para identificar um elemento; o fim dos laços de repetição que somente identificam quantos elementos de determinada categoria estão presentes no documento; o fim de inúmeros “Ctrl + C, Ctrl + V”; enfim, é o término do trabalho pesado e perda de tempo na codificação javascript e o início da codificação simples, elegante e eficazmente robusta e de fácil entendimento.

Com pouquíssimas linhas de código, é possível mexer à vontade com o DOM (identificação, edição, inserção, deleção, etc), manipular eventos javascript, alterar regras CSS, aplicar efeitos visuais (fade in / fade out, drag and drop, slides, movimentos, etc) e muito mais coisas interessantes, úteis e cross browser. E quando digo “pouquíssimas linhas de código”, refiro-me, por exemplo, a 3 ou 4 linhas para requisições AJAX!

Quer mais? jQuery é projetado para aceitar extensões de terceiros, quer dizer, qualquer um com certa habilidade em programação pode criar funcionalidades extra para a biblioteca, extendendo suas potencialidades nativas e/ou aproveitando seu poder de funcionamento.

Artigos Relacionados

• Nenhum artigo relacionado...