8 dicas para fazer códigos melhores com jQuery
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!
Ótimo post, cara…
Realmente, o que mata muitas vezes é o negócio de ‘reinventar a roda’…
E o que não falta são plugins fantásticos para jQuery..
o jLightbox… jCycle, jQSWFUpload, jalert, jSortable…
vale a pena estudar jQuery, com certeza…
@ Hugo Ferreira
Realmente, Hugo! Atualmente desenvolver a web sem a Camada de Comportamento é impensável, e o jQuery está aí para facilitar nosso trabalho!
Legal
Ótimo artigo.
Grandes dicas.
Se vê muitos erros básicos destes, em sites “novinhos”.
- Visual: Elementos com display:none; ou opacity:0; no CSS. Ou transparências necessárias via javascript.
- Funcional e SEO: menus com links usando só href=”#”; conteúdo importante sendo carregado via ajax, sem um “loader” basico;
- Usuário: um tempo grande de espera, carregando plugins em cima de plugins sem serem usados. Ou para mostrar aquela fantástica-animação, com o botão de entrar.
Fui mordido também.
Demorei pra aplicar efetivamente em projetos de clientes, até que fosse mais amplamente aceito e quanto eu pudesse diminuir o (d)efeito da espera no carregamento.
Hoje já virou quase um plugin, como o flash. Está bem difundido e utilizado.
Deviam fazer uma parceria com os navegadores, pra ele vir embutido neles. :-)
OTIMIZAR:
Entregar a jQuery compactada (com gZip) é lei!
Trabalhar com header expires também. Aproveitar o cache do navegador para não precisar carregá-la novamente na próxima página.
Colocar a chamada a ela no final do documento, ao menos na home, elimina o efeito de espera com a tela em branco, mas faz mostrar o conteúdo sem os efeitos.
Como eu sou “das antigas”, e cheio de manias, sempre faço o projeto todo funcionar sem o javascript. O funcionamento do site não pode depender dele (exceto os forms e validações).
Depois aplico os “efeitos” e funcionalidades, da camada de comportamento com a jQuery.
Há ainda a opção de utilizar a tag noscript, para quando não há outra alternativa sem usar o javascript. Nem que seja para colocar um aviso que o javascript é necessário para navegar no site.
Só testando…
Com as diferenças no “onload”, em alguns projetos, o layout se “monta novamente” só depois de carregar tudo(é num “piscar de olhos”, mas é visível). Esconder elementos, mostrar, animar… Mas, já sabendo disto, projeta-se para ser o menos “destruidor” possível. Ou para não “entregar” a sua surpresa antes da hora.
@ Acelio
Opa, quantas dicas legais! Obrigado por complementar o artigo! ;-)