Klaus Paiva

Hoje saiu a versão 1.4 da mais popular biblioteca de Javascript na atualidade: a jQuery.

Neste texto estão descritas as mudanças presentes nesta nova versão, detalhamento dos novos métodos, novas formas de passar alguns parâmetros e gráficos que ilustram os ganhos de performance obtidos.

E se você planeja migrar seu código para esta nova versão, não deixe de conferir a lista de incompatibilidades.

Via @jeresig.

Esse texto surgiu de uma necessidade que é bastante comum pra nós, seres programadores de interfaces web.

Sabe quando o webdesigner desenha uma caixa de tamanho fixo (e largura variável, pra complicar um pouco), em que o texto deverá ficar contido ali dentro da caixa, e no caso do texto ser maior que o tamanho disponível, os famosos "três pontinhos" devem aparecer?

Pra ilustrar isso melhor, veja a imagem abaixo:

Caixa com dimensões fixas e conteúdo "ajustado" para caber

Um método comum de se fazer isso é contar o número de caracteres e colocar "...", caso o número de caracteres ultrapasse o número máximo de caracteres que ficarão visíveis. Claro que esse número máximo é uma estimativa e nem sempre o resultado fica bom. Além disso, pode acontecer do "corte" no texto acontecer no meio de uma palavra, gerando um resultado estranho ao visitante, "tipo isso aq...".

Nas CSS existe uma propriedade chamada "text-overflow" que, sob certas circustâncias, adiciona automagicamente "..." ao final do texto que não coube na área visível. OK! Problema resolvido então? Não exatamente...

O problema não está resolvido por conta de duas outras questões. Uma delas é que o Firefox ainda não implementa essa propriedade (sim, o IE tem! Moderno hein? ). A outra questão é que essa propriedade não se aplica nos casos em que o texto ocuparia mais de uma linha.

Se você quiser uma explicação mais detalhada (e exemplos) sobre a propriedade "text-overflow", acesse este texto no blog do PPK.

Voltando ao assunto original, agora precisamos resolver aquelas duas questões. Felizmente, com algum tempo de Google e mais algum tempo de pesquisa em fóruns, consegui encontrar algo capaz de ajudar nesta tarefa: o jQuery textOverflow Plugin.

O código é relativamente simples e oferece várias opções de customização. Aqui tem uma página de exemplo (exemplo 1) gerando algo similar ao que foi mostrado na imagem acima.

Caso você tenha vários elementos na página que vão receber esse tratamento, deixo uma dica: tome cuidado com a performance! Como é uma operação intensiva no DOM, a chance desse código deixar o navegador bastante lento é bastante alta.

Pra esses casos, se você realmente precisa dos "...", acho que vale a pena tentar juntar esse código com a solução de "execução de Javascript com pausas", proposta pelo Nicholas Zakas.

Fiz uma proposta com essa combinação. Ela pode ser vista aqui no exemplo 2 (com 100 elementos). Embora seja visualmente mais lenta, ela não trava o navegador em momento algum, mesmo no IE 6.

Bom, o texto ficou bem longo... mas acho que deu pra passar bem a ideia. Sugestões ou comentários, é só usar o formulário abaixo.

Dizem por aí que a necessidade é a mãe da invenção e da criação e... eu, de fato, concordo com isso.

Há duas semanas atrás eu fazia uma aplicação que exibia vários marcadores sobre um mapa e percebi que seria útil exibir uma espécie de tooltip sobre esses marcadores. A opção de usar o atributo title estava disponível sim, mas eu queria mais, queria poder personalizar essas tooltips!

Aproveitando-me do fato que a API de Mapas do Google já possui uma série de métodos para tratar eventos do mouse, resolvi criar algo que permitisse exibir tooltips personalizadas sobre os marcadores no mapa. O resultado? MapTips.

O resultado ficou bem legal e simples. Até criei uma página que explica o funcionamento e tem exemplos de utilização.

Como talvez você já tenha notado, disponibilizei o código fonte no Google Code. Agora preciso criar mais algumas páginas de wiki e bug tracking.

Esses dias eu estava pensando comigo mesmo: "a gente vê várias idéias boas e, por não usar na hora em que vimos, acabamos esquecendo...". Alguém aí lembrou de algoritmos? É, caso típico. =)

Semana passada eu estava vendo um algoritmo em C++ de busca binária. Deixando o C++ um pouco de lado parei para pensar onde eu já havia aplicado esse algoritmo. Qual não foi a minha surpresa em lembrar de um lugar onde faria sentido e eu deixei de usar o algoritmo. A situação? Marcar uma cidade qualquer numa listagem (combo) HTML.

Permita-me ilustrar melhor o cenário. Imagine uma listagem beeeem grande de cidades (nota: arquivo pesado). Como toda boa lista de cidades, ela está ordenada alfabeticamente. Agora, por algum dado motivo, você gostaria de selecionar uma cidade qualquer X dessa listagem. Nota: a lista tem algumas cidades falsas apenas para aumentar o volume de dados.

Intuitivamente você faria um for percorrendo as opções da listagem e marcando a cidade desejada. Em termos de código isso seria:

var maximo = combo.options.length - 1;
for( var i = 0; i < maximo; i++ )
{
  if( combo.options[i].text == cidade )
  {
    combo.selectedIndex = i;
    return;
  }
}

O código acima funciona, só não funciona bem para a nossa listagem tamanho família. Se eu pedir para marcar uma cidade próxima do final da lista, por exemplo Salto, a busca vai demorar pois o for vai percorrer a lista desde a letra A até chegar no S, aí marcando a cidade desejada.

Se explorarmos um pouco mais nossa intuição veremos que podemos usar algo semelhante ao que fazemos pra pesquisar numa lista telefônica. Abro a lista num ponto e verifico se o nome que eu quero está antes ou depois da página que estou vendo. Por exemplo, estou procurando Vitória. Se eu abri na página com nomes próximos de Teobaldo, vou procurar mais pra frente da lista, não adianta eu olhar pra trás. Essa é a vantagem da ordem alfabética, afinal. =)

Em termos de algoritmos podemos usar uma busca binária para expressar esse comportamento. Ou ainda, falando em código:

var esquerda = 0;
var direita = combo.options.length - 1;
var meio;
while( esquerda <= direita )
{
  meio = esquerda + Math.floor( ( direita - esquerda ) / 2 );
  // Javascript consegue comparar strings usando < e >. Ahá!  
  if( combo.options[meio].text < cidade )
  {
    esquerda = meio + 1;
  }
  else if( combo.options[meio].text > cidade )
  {
    direita = meio - 1;
  }
  else
  {
    // é o cara, pode marcar e encerrar a função
    combo.selectedIndex = meio;
    return;
  }
}

Caso ainda não tenha ficado claro pra você, a busca binária funciona bem melhor para este cenário. Ao invés de percorrer a listagem item a item (linearmente), vamos tomar vantagem da organização alfabética e fazer uma pesquisa mais inteligente. =)

Fiz um arquivo de testes que permite, obviamente, testar as duas implementações (nota: arquivo pesado - cuidado com o pé =). Usei a jQuery somente fora dos algoritmos em questão, pra facilitar a manipulação dos eventos.

Como dá pra notar pelo arquivo de testes, a busca binária funciona melhor para a esmagadora maioria dos casos. O que é de se esperar dada a complexidade O(log n) da busca binária ante a complexidade O(n) da busca linear.

E fica o lembrete, até pra mim mesmo, que tal pesquisar um algoritmo mais eficiente da próxima antes de sair implementando qualquer coisa?