Precisamos criar opções, não regras!

opções google

  Normalmente construímos nossas vidas em torno de regras: “Não gosto de lugares desse tipo porque são SEMPRE barulhentos”, “Não gosto de negociar com mulheres porque elas NUNCA entendem”, “Eu JAMAIS vou fazer isso ou aquilo”.  Aí um belo dia você se priva de uma boa companhia no lugar “x” que para você todos desse tipo são barulhentos, quando na verdade você nem conhece o lugar. Perde grandes negócios porque criou um pré-conceito com as mulheres, e se vê impossibilitado de fazer algo que quer muito hoje, porque um dia disse que NUNCA o faria. Continuar lendo

jQuery Tips – Dicas de jQuery

Aqui vão algumas dicas que os ninjas do jQuery utilizam em seu dia-a-dia. Na verdade não passam de padrões e boas práticas que nos auxiliam a escrever código mais legível e performático.

Use o seletor Id sempre que possível. Ele é o mais rápido.

Se usar o seletor classe não use com o elemento.

  $("div.products"); //Maus. Lento

  $(".products"); //ok. rápido

Evite fazer essas presepadas:

  $('div.container > *'); //extremamente lento

Ao invés daquilo, faça isto:

  $('div.container').children(); //veloz e furioso. melhor

Isto aqui é rápido:

  $( "#container div.comments" );

Isto é mais rápido:

  $( "#container" ).find( "div.comments" );

Quando se usa $( “#container” ), por baixo dos panos ele está usando document.getElementById(), que é bastante rápido. Lembre-se que o jQuery precisa varrer a árvore do DOM para encontrar a referência aos elementos. Essa busca é meio custosa. Então evite fazer isto:

  $('#outer #inner'); // ruim
  $('div#inner'); // eca
  $('.outer-container #inner'); // o horror!

Evite manipular o DOM. Mas caso precise… A partir da versão 1.4, o jQuery permite remover o elemento do DOM enquanto você o manipula.

  var div = $( "#MyDiv" );
  var parent = div.parent();
 
  div.detach();
 
  // várias pogs aqui
 
  parent.append( div );

Não use funções anônimas para eventos. É difícil de debugar, de testar, de manter.

  $("#myLink").on("click", function(){...}); // isso é maus
  function clicouNoLink(){...}
  $("#myLink").on("click", clicouNoLink); // isso é incrível!

Use namespaces para os eventos. Isso facilita dar unbind sem afetar outros eventos. Acredite, isso salva vidas.

  $("#meuBotao").on("click.meuClickEspecial", funcaoLouca); // Fantástico

  //unbind sem afetar outros clicks
  $("#meuBotao").unbind("click.meuClickEspecial");

O jQuery tem uma parada chamada Event Delegation que permite atrelar um ouvinte do evento a um elemento.

  $("#list a").on("click", funcaoQueFazAlgo); // não curti

O código acima funciona de boa. Ele atrela o ouvinte do evento click a todos os links da lista #list. Isso é palha e pode causar alguns problemas. Imagine que você precise adicionar outro link na lista. Esse novo elemento não estará ouvindo o evento.  Vamos melhorar isso.

  $("#list").on("click", "a", funcaoQueFazAlgo); 
  //agora sim, o ouvinte é atrelado somente ao elemento pai #list

Não misture css com jQuery.

  $("#mydiv").css({'color':red, 'font-weight':'bold'}); // vish

Use cache para os seletores:

  var $myDiv = $("#myDiv");
  $myDiv.click();

Use encadeamento de chamadas.

  $("#myDiv").addClass("error").show();

Use vanilla javascript, sempre que possível.

Até a próxima.

Referências