desenvolvaWeb

Desenvolver scripts em jQuery ainda é um bicho-de-sete-cabeças para muitos. Desorganização e falta de planejamento são geralmente, assim como em qualquer tarefa de desenvolvimento, fatores principais para insucesso em aplicações que utilizam este e outros frameworks/linguagens de programação.

Ao longo deste tempo desenvolvendo scripts nesta plataforma, descobri algumas rotinas que tendem a evitar erros e otimizar o tempo de produção e carregamento da aplicação, o que no final das contas vai deixar você mais tranquilo, sem noites de insônia e com o corpo livre de cafeína e Red Bull. :)

Vamos a elas:

01. Sempre… SEMPRE declare uma variável para não conflitar seus scripts

Já aconteceu de você desenvolver um script/aplicação qualquer que está rodando “redondo” naquela paginazinha html que você fez para testar os efeitos e, quando você colocou no ambiente de homologação/produção, simplesmente ela parou de funcionar, mesmo estando com o mesmo código e as mesmas referências?

Pois é. O que acontece é que frameworks javascript que utilizam o $ como atalho para suas bibliotecas tendem a conflitar com o jQuery… que também utiliza o $. Resultado? Um site sem funcionar uma biblioteca ou outra (por exemplo, se você estiver utilizando a Prototype - a biblioteca, não o jogo. ;) )

Mas e se você não estiver utilizando mais nenhum framework, não tem necessidade de utilizar o noConflict do jQuery, correto?

ERRADO. Para dar um exemplo real, o proxy de lá do trabalho é meio louco, e acaba barrando QUALQUER aplicação que utilize o $ como atalho, ou seja: sites como o da Locaweb são IMPOSSÍVEIS de se navegar, só porque o desenvolvedor esqueceu de declarar o noConflict afim de evitar estes problemas. Em dias que preciso conversar com o suporte de lá, simplesmente preciso ir a outra máquina que esteja em um proxy desbloqueado para isso.

Portanto, pegue o hábito: a primeira linha de seu script em jQuery deve ser o código abaixo, obrigatoriamente. Adicionar o $j antes de cada referência à biblioteca nem doi tanto asssim.

var $j = jQuery.noConflict(); // evita conflitos com outras bibliotecas... ou com alguns proxys.

02. Utilize a filosofia DRY – Don’t Repeat Yourself

Esta vem de algumas plataformas, principalmente a RoR: para quê repetir código, quando você pode otimizar a sua produção fazendo o máximo para não repeti-lo?

Apesar de óbvia, esta filosofia só se torna real na prática. Leva um certo tempo até que você se acostume a não criar duas rotinas para um botão de voltar e prosseguir num slider de destaques, por exemplo.

Enfim… Para saber mais sobre a DRY, acesse este link da Wikipedia (em inglês).

03. Comente o máximo que você puder o seu código

Isso é óbvio, mas muita gente acha que o desenvolvimento do script está sendo feito somente para ele, e que não pode vir outro desenvolvedor para prestar manutenção no mesmo. Na verdade, até a manutenção própria é complicada quando não há um bom esclarecimento do código.

Algo que muita gente ainda não sabe: a prática de comentar o que você está fazendo poupa horas – quiçá dias – de trabalho e estresse. Portanto… Faça isso.

04. Se a aplicação desenvolvida for muito grande, considere separar o seu código em arquivos diferentes

Digamos que você está desenvolvendo um mega portal, e há uma animação para os destaques na home-page, outra para o menu da barra lateral, outra para o formulário na página de contato, mais uma requisição AJAX do login…

Já imaginou se você coloca tudo isso em apenas 1 arquivo? Primeiro, o tamanho dele ficaria gigantesco. Segundo, e se você precisa mudar uma letra ou uma referência sequer, imagine ter que localiza-la nas suas mais de 1000 linhas de código?

A melhor solução é separar os seus scripts em arquivos diferentes. Desta forma, além de otimizar a sua manutenção, você ainda pode referenciar somente os arquivos necessários para que aquela parte da sua aplicação funcione, a depender de qual seção você esteja. Simples, mas eficaz.

05. Seja conciso: evite detalhes desnecessários

Imagine que você tenha um script responsável por expandir/contrair um menu que tenha subitens, e que adicione uma classe (por exemplo, classe ativa) aos expandidos, para que você possa formatá-los via css.

Um código capaz de fazer com que isso aconteça, mas levemente “pesado”, seria este:

var $j = jQuery.noConflict(); // evita conflitos com outras bibliotecas... e alguns proxys.

$j(document).ready(function() {
	
    $j('ul#menu li:has(ul)').next().slideUp(0); // Faço sumir todos os subitens da lista com o id #menu

	$j('ul#menu li:has(ul)').click(function() {
    	if($j(this).is('.ativa') {
        	$j(this).removeClass('ativa').next().slideUp('slow');
        } else {
        	$j(this).addClass('ativa').next().slideDown('slow');
        }
    });
});

Tudo ok: temos um script que, em primeiro lugar, dá um slideUp em todos os subitens, e logo após, testa se aquele item li tem a classe ativa, fazendo com que contraia em caso positivo ou expanda em caso negativo, adicionando ou removendo a classe quando necessário. Simples.

Porém… Existe uma palavra mágica no jQuery, e esta palavra é a toggle. Quando você junta esta palavra a algum tipo de animação, efeito ou coisa parecida, ela tem o poder de magicamente colocar um interruptor virtual em suas rotinas, ligando ou desligando o que for necessário. Portanto… se precisamos de um script para expandir/contrair (uma analogia seria ligar/desligar), o toggle se encaixa como uma luva neste caso.

Vejamos como ficaria o código utilizando esta palavra mágica:

var $j = jQuery.noConflict(); // evita conflitos com outras bibliotecas... e alguns proxys. ;)

$j(document).ready(function() {
	
    $j('ul#menu li:has(ul)').next().slideUp(0); // Faço sumir todos os subitens da lista com o id #menu

	$j('ul#menu li:has(ul)').click(function() {
        	$j(this).toggleClass('ativa').next().slideToggle('slow');
    });
});

Viu? Poupamos tempo, linhas de código e velocidade de carregamento. Este é só um pequeno exemplo de como ser conciso facilita – e muito – o desenvolvimento e manutenção do seu código.

Existem dezenas – ou até centenas – de outras práticas que podem te ajudar no desenvolvimento de aplicações para a web, sejam elas em jQuery, Ruby on Rails, PHP ou qualquer outra plataforma de desenvolvimento. O mais importante neste caso, é não seguir especificamente esta ou aquela, ou querer seguir todas de vez: encontre um norte, alguma que realmente otimize o seu tempo, e torne-se adepto dela. As que dei aqui são generalistas, e se aplicam a quase qualquer escopo; digamos que seja o “basicão” do bom desenvolvimento, não só em jQuery.

E você, tem alguma dica interessante para desenvolvimento em jQuery? Que tal compartilha-las conosco?