{"id":3636,"date":"2014-10-31T10:11:16","date_gmt":"2014-10-31T12:11:16","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3636"},"modified":"2014-10-31T10:11:16","modified_gmt":"2014-10-31T12:11:16","slug":"19-truques-e-dicas-para-jquery","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/19-truques-e-dicas-para-jquery\/","title":{"rendered":"19 truques e dicas para jQuery"},"content":{"rendered":"

A equipe da Turbosite<\/a> est\u00e1 sempre atenta \u00e0 dicas e truques para melhorar a efici\u00eancia de suas ferramentas. Compartilhamos aqui algumas dicas retiradas do blog\u00a0developer.*.com<\/a>, com algumas modifica\u00e7\u00f5es e conte\u00fado nosso. Esperamos que lhe seja de grande utilidade.<\/p>\n

 <\/p>\n

1 – Carregue o conte\u00fado pelo Google Code<\/h3>\n

Se voc\u00ea utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento \u00e9 usar o arquivo jquery-1.11.1.pack.js diretamente do Google Code<\/a>. Al\u00e9m de diminuir o gasto com banda, o navegador do usu\u00e1rio faz cache do arquivo entre os v\u00e1rios sites que usam essa t\u00e9cnica o que dar\u00e1 uma experiencia de navega\u00e7\u00e3o melhor para o visitante.<\/p>\n

<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\" \n     type=\"text\/javascript\"><\/script><\/pre>\n
 <\/p>\n
2 – Combine e minimize todos seus scripts<\/h3>\n
Sempre use compressor em seu c\u00f3digo. Isso tornar\u00e1 o conte\u00fado de seu site mais r\u00e1pido para carretamento, al\u00e9m de facilitar a leitura de seu site pelo navegador.\u00a0Como exemplo, o\u00a0YUI Compressor<\/a> do Yahoo! S\u00f3 n\u00e3o esque\u00e7a de manter o c\u00f3digo original, para quando precisar de dar manuten\u00e7\u00e3o nele.<\/p>\n
 <\/p>\n
3 – Use o log do Firebug.<\/h3>\n
Use a fun\u00e7\u00e3o console.log(Object)<\/a> do Firebug para escrever mensagens no console, muito melhor que alert(“”). O Firebug facilita acesso as propriedades dos objetos. Como elementos DOM s\u00e3o sempre objetos, estamos tratando deles o tempo todo.<\/p>\n
 <\/p>\n
4 – Use menos fun\u00e7\u00f5es de sele\u00e7\u00e3o, fa\u00e7a cache.<\/h3>\n
Fun\u00e7\u00f5es de manipula\u00e7\u00f5es do DOM s\u00e3o muito caras para o processamento. Tente usa-las o m\u00ednimo poss\u00edvel<\/p>\n
for (i = 0; i < 1000; i++) {\n     var minhaLista = $('.minhaLista'); \/\/ seleciona 1000 vezes\n     minhaLista.append('<li>Esse \u00e9 o elemento ' + i + '<li>');\n}<\/pre>\n
Fun\u00e7\u00f5es como .append(), .prepend(), .after(), .before() s\u00e3o relativamente custosas e podem deixar as coisas lentas.<\/p>\n
var meusItens = '';\nfor (i = 0; i < 1000; i++) {\n     meusItens += '<li>Esse \u00e9 o elemento ' + i + '<\/li>';\n}\n$('.minhaLista').html(meusItems);<\/pre>\n
Escrever no DOM somente uma vez \u00e9 um pouco mais r\u00e1pido. J\u00e1 que aqui estamos mesmo lutando por optimiza\u00e7\u00f5es (lembrem-se dos mobiles), vale n\u00e9?<\/p>\n
 <\/p>\n
5 – Use IDs em vez de classes sempre que poss\u00edvel<\/h3>\n
A fun\u00e7\u00e3o de busca por com CSS3 Selector<\/a> \u00e9 muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o m\u00e1ximo<\/em> que a API do DOM deixa. Isso as vezes n\u00e3o \u00e9 o ideal para performance, acredite. Uma busca por ID no DOM quase sempre \u00e9 mais eficiente que a busca por classe, prefira sempre usar ID.<\/p>\n
 <\/p>\n
6 – D\u00ea um contexto para seus seletores<\/h3>\n
As seguintes formas de uso s\u00e3o mais r\u00e1pidas do que buscar um elemento no documento inteiro.<\/p>\n
\n
\n
\n
\n
jQuery( expression, contexto );\n$('contexto').find('expression');\n$('contexto expression');<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
7 – Use encadeamento de fun\u00e7\u00f5es<\/h3>\n
Uma das caracter\u00edsticas mais legais do jQuery \u00e9 a possibilidade de encadear m\u00e9todos. Usar encadeamento tamb\u00e9m ajuda a diminuir a quantidade de seletores.<\/p>\n
$('#meuPainel')\n     .find('TABLE .primeiraColuna')\n     .removeClass('.primeiraColuna')\n     .css('background', 'red')\n     .append('<span>Essa celula agora \u00e9 vermelha<\/span>');<\/pre>\n
 <\/p>\n
<\/h3>\n
8 – Saiba como usar a propriedade de anima\u00e7\u00e3o<\/h3>\n
Todos adoram as anima\u00e7\u00f5es pr\u00e9-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incr\u00edvel facilidade. Nos meados do lan\u00e7amento do jQuery, pela facilidade e simplicidade,\u00a0as anima\u00e7\u00f5es em web pages virou uma febre desencadeada.<\/p>\n
\u00c9 tamb\u00e9m f\u00e1cil ir ainda al\u00e9m por causa da facilidade que \u00e9 usar o poderoso m\u00e9todo animate(). Se voc\u00ea olhar os metodos slideDown() e fadeIn() dentro do framework ver\u00e1 que s\u00e3o apenas atalhos para o metodo animate(). Esse m\u00e9todo\u00a0simplesmente pega qualquer estilo de CSS e aplica transi\u00e7\u00f5es de um valor a outro. Ent\u00e3o as mudan\u00e7as nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que voc\u00ea quiser podem ter anima\u00e7\u00f5es!<\/p>\n
\u00c9 muito f\u00e1cil animar todos itens do seu menu para 100 pixels usando isso.<\/p>\n
$('#myList li').mouseover(function() {\n     $(this).animate({\"height\": 100}, \"slow\");\n});<\/pre>\n
Diferentemente de outras fun\u00e7\u00f5es do jQuery, as anima\u00e7\u00f5es s\u00e3o colocadas em fila de execu\u00e7\u00e3o automaticamente. Se voc\u00ea quiser rodar uma segunda anima\u00e7\u00e3o somente quando a primeira terminar, ent\u00e3o \u00e9 s\u00f3 chamar o m\u00e9todo novamente sem precisar usar um callback.<\/p>\n
\n
\n
\n
\n
$('#myBox').mouseover(function() {\n     $(this).animate({ \"width\": 200 }, \"slow\");\n     $(this).animate({\"height\": 200}, \"slow\");\n});<\/pre>\n
Por\u00e9m, se voc\u00ea voc\u00ea desejar que as anima\u00e7\u00f5es ocorram no mesmo tempo, ent\u00e3o insira ambas na mesma chamada assim:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
$('#myBox').mouseover(function() {\n     $(this).animate({ \"width\": 200, \"height\": 200 }, \"slow\");\n});<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
9 – Conhe\u00e7a sobre delega\u00e7\u00e3o de eventos<\/h3>\n
O jQuery torna f\u00e1cil adicionar eventos em elementos do DOM de forma inobstrusiva, o que \u00e9 muito bom, mas adicionar muitos eventos \u00e9 ineficiente. A delega\u00e7\u00e3o de eventos permite que voc\u00ea adicione em muitas situa\u00e7\u00f5es menos eventos e atinja o mesmo resultado:<\/p>\n
$('#minhaTabela TD').click(function(){\n     $(this).css('background', 'red');\n});<\/pre>\n
Vamos fazer uma fun\u00e7\u00e3o simples para tornar uma celula da tabela vermelha quando voc\u00ea clicar nela. Digamos que voc\u00ea tenha uma tabela com 10 colunas e 50 linhas, ent\u00e3o s\u00e3o 500 delega\u00e7\u00f5es de eventos. N\u00e3o seria melhor se fosse possivel agregar o evento somente uma vez e ent\u00e3o quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?<\/p>\n
Para isso \u00e9 que serve a delega\u00e7\u00e3o de eventos e isso \u00e9 simples de implementar.<\/p>\n
\n
\n
\n
\n
$('#minhaTabela').click(function(e) {\n     var clicado = $(e.target);\n     clicado.css('background', 'red');\n});<\/pre>\n
Muito \u00fatil, para por exemplo, manipular eventos de touch.<\/p>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
10 – Use o m\u00e9todo data() do jQuery para armazenar estados<\/h3>\n
O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informa\u00e7\u00f5es de chave\/valor sobre qualquer elemento DOM.<\/p>\n
\n
\n
\n
\n
$('#minhaDiv').data('estadoAtual', 'desligado');<\/pre>\n
Armazenar estados \u00e9 mais \u00fatil e pr\u00e1tico para quando, por exemplo, voc\u00ea queira verificar se um input esteja com alguma atributo que o valide no formul\u00e1rio.Para mais informa\u00e7\u00f5es sobre os metodos data() e removeData() veja a documenta\u00e7\u00e3o<\/a>.<\/p>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
11 – Escreva seu pr\u00f3prio seletor<\/h3>\n
O jQuery possui v\u00e1rios seletores prontos para ajudar na sele\u00e7\u00e3o de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando \u00e9 preciso usar seletores que v\u00e3o al\u00e9m do que o jQuery deixa?<\/p>\n
Bom, uma possivel solu\u00e7\u00e3o seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira \u00e9 extender os seletores assim:<\/p>\n
\n
\n
\n
\n
$.extend($.expr[':'], {\n          mais100px: function(a) {\n          return $(a).height() > 100;\n     }\n});\n\u00a0\n$('.box:mais100px').click(function() {\n     alert('O elemento que voc\u00ea clicou possui mais de 100 pixels de altura');  \n});<\/pre>\n
Primeiro criamos um seletor que acha qualquer elemento que \u00e9 maior que 100 pixels. Depois usamos isso para adicionar uma a\u00e7\u00e3o de clique – click – em todos esses elementos.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Mais exemplos dessa funcionalidade voc\u00ea pode<\/a> pegar aqui<\/a>.<\/p>\n
 <\/p>\n
12 – Use as fun\u00e7\u00f5es de auxilio do jQuery<\/h3>\n
O jQuery j\u00e1 quebra um galho ao facilitar a manipula\u00e7\u00e3o de elementos DOM, mas tamb\u00e9m adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados. Vale a pena passar um tempinho na p\u00e1gina que explica essas utilizades<\/a>.<\/p>\n
 <\/p>\n
13 – Use a fun\u00e7\u00e3o “noconflict” para evitar conflitos com outros frameworks<\/h3>\n
A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solu\u00e7\u00e3o simples, a fun\u00e7\u00e3o .noconflict() que permite definir outro atalho para o framework:<\/p>\n
\n
\n
\n
\n
var $j = jQuery.noConflict();\n$j('#minhaDiv').hide();<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
14 – Saiba quando uma imagem terminar de carregar<\/h3>\n
Use o m\u00e9todo .load() em um elemento de imagem (IMG) com um callback.<\/p>\n
\n
\n
\n
\n
$('body').append('<img src=\"\" alt=\"\" id=\"minhaImagem\" \/>');\n$('#minhaImagem').attr('src', 'imagem.jpg').load(function() {\n     console.log('Image Loaded. W: '+$(this).width()+' H: '+$(this).height());\n});<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
15 – Como saber se um elemento existe?<\/h3>\n
Voc\u00ea n\u00e3o precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente n\u00e3o faz nada caso o elemento n\u00e3o estiver no DOM. Mas as vezes voc\u00ea pode precisar executar algum peda\u00e7o de c\u00f3digo que depende da exist\u00eancia de um elemento, para isso use:<\/p>\n
\n
\n
\n
\n
if ($('#minhaDiv')[0]) {  \n     \/\/ bloco de c\u00f3digo\n}<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
16 – Return ‘false’ para evitar a continua\u00e7\u00e3o de um evento<\/h3>\n
Quando voc\u00ea adiciona algum afeito em um elemento, vai perceber que o bloco de c\u00f3digo vai ser executado, porem o navegador ir\u00e1 para o endere\u00e7o do link. Voc\u00ea pode usar “href=’#'” para evitar isso, mas assim a p\u00e1gina ir\u00e1 voltar para o topo quando a a\u00e7\u00e3o de click for executada. Para evitar isso, adicione um “return false;” ao fim do bloco de c\u00f3digo:<\/p>\n
\n
\n
\n
\n
$('popup').click(function(){  \n     \/\/ bloco de c\u00f3digo\n     return false;\n});<\/pre>\n<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
17 – Atalho para a fun\u00e7\u00e3o “ready”<\/h3>\n
Voc\u00ea j\u00e1 deve estar acostumado a usar a fun\u00e7\u00e3o ready()\u00a0<\/em>para executar o c\u00f3digo assim que a p\u00e1gina tiver sido carregada. Pois saiba que pode economizar um pouco de c\u00f3digo simplesmente usando:<\/p>\n
\n
\n
\n
\n
$(function (){  \n     \/\/ c\u00f3digo\n});<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
18 – Identifique v\u00e1riaveis do tipo jQuery<\/h3>\n
Se voc\u00ea come\u00e7ar usar as dicas para evitar chamadas desnecessarias as fun\u00e7\u00f5es do jQuery vai perceber que no seu c\u00f3digo o n\u00famero de variaveis carregando objetos jQuery ir\u00e1 aumentar bastante. Para evitar que voc\u00ea se confunda e chame a fun\u00e7\u00e3o de sele\u00e7\u00e3o – $() – em um elemento que j\u00e1 \u00e9 jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.<\/p>\n
\n
\n
\n
\n
var $elemento = $(elemento);<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
19 – Sempre use a \u00faltima vers\u00e3o<\/h3>\n
O framework est\u00e1 sendo constantemente melhorado por John Resig<\/a>, seu criador. Sempre que uma vers\u00e3o nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.<\/p>\n
Ent\u00e3o, utilize sempre a \u00faltima vers\u00e3o. <\/p>\n","protected":false},"excerpt":{"rendered":"
A equipe da Turbosite est\u00e1 sempre atenta \u00e0 dicas e truques para melhorar a efici\u00eancia de suas ferramentas. Compartilhamos aqui algumas dicas para melhor a efici\u00eancia e desempenho de seu c\u00f3digo jQuery.<\/p>\n","protected":false},"author":1,"featured_media":3644,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,15],"tags":[185,367,622],"class_list":["post-3636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-dicas","category-javascript","tag-dicas","tag-jquery","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3636"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3636\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3644"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}