Pesquisa de site

javascript - armadilhas do jQuery a evitar

Estou começando um projeto com jQuery.

Quais armadilhas/erros/concepções erradas/abusos/usos indevidos você teve em seu projeto jQuery?

Resposta #1

Estar alheio à queda de desempenho e usar excessivamente seletores em vez de atribuí-los a variáveis locais. Por exemplo:-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

Ao invés de:-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

Ou ainda melhor com encadeamento:-

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

Eu encontrei este momento esclarecedor quando percebi como as pilhas de chamadas funcionam.

Editar: incorporadas as sugestões nos comentários.

Resposta #2

Entenda como usar o contexto. Normalmente, um seletor jQuery vai pesquisar todo o documento:

// This will search whole doc for elements with class myClass
$('.myClass');

Mas você pode acelerar as coisas procurando dentro de um contexto:

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

Resposta #3

Não use seletores de classe simples, assim:

$('.button').click(function() { /* do something */ });

Isso acabará examinando cada elemento para ver se ele tem uma classe de "button".

Em vez disso, você pode ajudá-lo, assim:

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

Aprendi isso no ano passado no blog da Rebecca Murphy

Atualização - Esta resposta foi dada há mais de 2 anos e não está correta para a versão atual do jQuery. Um dos comentários inclui um teste para provar isso. Há também uma versão atualizada do teste que inclui a versão do jQuery na época desta resposta.

Resposta #4

Tente separar funções anônimas para que você possa reutilizá-las.

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

Resposta #5

Ao usar a função $.ajax para requisições Ajax ao servidor, você deve evitar usar o evento completo para processar dados de resposta. Ele disparará independentemente de o pedido ter sido bem-sucedido ou não.

Em vez de complete, use success.

Veja os Eventos Ajax na documentação.

Resposta #6

  • Evite abusar do document ready.
  • Mantenha o documento pronto apenas para inicializar o código.
  • Sempre extraia funções fora do doc ready para que possam ser reutilizadas.

Eu já vi centenas de linhas de código dentro da declaração doc ready. Feio, ilegível e impossível de manter.

Resposta #7

Encadeando eventos de animação com callbacks.

Suponha que você queira animar um parágrafo desaparecendo ao clicá-lo. Você também quer remover o elemento do DOM depois. Você pode pensar que pode simplesmente encadear os métodos:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

Neste exemplo, .remove() será chamado antes que .fadeOut() seja concluído, destruindo seu efeito de desvanecimento gradual e simplesmente fazendo o elemento desaparecer instantaneamente. Em vez disso, quando quiser disparar um comando apenas após terminar o anterior, use os callbacks:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

O segundo parâmetro de .fadeOut() é uma função anônima que será executada assim que a animação .fadeOut() for concluída. Isso proporciona um desvanecimento gradual e a subsequente remoção do elemento.

Resposta #8

Se você usar bind() no mesmo evento várias vezes, ele será acionado várias vezes. Eu geralmente sempre faço unbind('click').bind('click') só para garantir

Resposta #9

Armagem: Usar loops em vez de seletores.

Se você se pegar usando o método jQuery '.each' para iterar sobre elementos DOM, pergunte a si mesmo se pode usar um seletor para obter os elementos em vez disso.

Mais informações sobre seletores jQuery:
http://docs.jquery.com/Selectors

Armando: NÃO usar uma ferramenta como o Firebug

Firebug foi praticamente feito para esse tipo de depuração. Se você vai ficar mexendo no DOM com Javascript, precisa de uma boa ferramenta como o Firebug para ter visibilidade.

Mais informações sobre o Firebug: http://getfirebug.com/

Outras ótimas ideias estão neste episódio do Polymorphic Podcast: (Segredos do jQuery com Dave Ward) http://polymorphicpodcast.com/shows/jquery/

Resposta #10

Não abuse dos plug-ins.

Na maioria das vezes, você precisará apenas da biblioteca e talvez da interface do usuário. Se você mantiver simples, seu código será fácil de manter a longo prazo. Nem todos os plug-ins são suportados e mantidos, na verdade a maioria não é. Se você puder imitar a funcionalidade usando os elementos principais, eu recomendo fortemente.

Plug-ins são fáceis de inserir no seu código, economizam tempo, mas quando você precisar de algo extra, não é boa ideia modificá-los, pois você perde as possíveis atualizações. O tempo que você economiza no começo, vai perder depois ao trocar plug-ins obsoletos.

Escolha os plug-ins que você usa com sabedoria. Além da biblioteca e da interface do usuário, eu uso constantemente $.cookie, $.form, $.validate e thickbox. Para o resto, eu geralmente desenvolvo meus próprios plug-ins.

Resposta #11

Mal-entendido sobre o uso deste identificador no contexto correto. Por exemplo:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

E aqui está uma das amostras de como você pode resolvê-lo:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

Resposta #12

Evite pesquisar por todo o DOM várias vezes. Isso é algo que realmente pode atrasar seu script.

Ruim :

$(".aclass").this();
$(".aclass").that();
...

Bom :

$(".aclass").this().that();

Ruim :

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

Bom :

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

Resposta #13

Sempre armazene em cache $ (isso) em uma variável significativa, especialmente em um .each()

Como isto

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

Resposta #14

Semelhante ao que Repo Man disse, mas não exatamente.

Ao desenvolver winforms em ASP.NET, eu frequentemente faço

$('<%= Label1.ClientID %>');

esquecendo o sinal #. A forma correta é

$('#<%= Label1.ClientID %>');

Resposta #15

Eventos

$("selector").html($("another-selector").html());

não clona nenhum dos eventos - você precisa reatribuir todos eles.

De acordo com a recomendação do JP- clone() revincula os eventos se você passar em true.

Artigos relacionados