9

Estou aprendendo jQuery e nem sempre sei exatamente como desenvolver o código de forma mais limpa, semântica, vou acabar aprendendo. Como eu poderia melhorar esse código?

$("#click_apoio").on('click', function( evento ){

    evento.preventDefault();

    if( $("#institucional").hasClass('desativado') ){

        $("#institucional").removeClass('desativado');
        $("#institucional").addClass('ativado');
        $("#parceiros").removeClass('ativado');
        $("#parceiros").addClass('desativado');

    }

});
10
  • 4
    Você também pode pensar numa outra estrutura... você ta usando duas classes: ativado e desativado... se usasse uma classe só, você usaria ao inves de removeClass e addClass.. o método toggleClass... e adaptaria o css para atender a essa estrutura... Commented 5/08/2015 às 13:34
  • 1
    Concordo Pedro com o que falou !!! Commented 5/08/2015 às 13:36
  • 2
    Cara, as vezes tornar o código mais limpo, não significa ter menos quantidade de linha, e sim deixar ele legível. O seu código está bom e da pra ser entendido. Outro fator importante é verificar o demais se possui algum código repetido, para separar em functions Commented 5/08/2015 às 13:37
  • 1
    @EricoSouza exatamente! Como comentei abaixo, não tem nada de "não profissional" nesse código, ele esta bom, da pra enteder perfeitamente o que esta fazendo!
    – user3603
    Commented 5/08/2015 às 13:39
  • 1
    Sim, é valido, mas tenha em mente que usar jQuery afeta na performance da página, mesmo que pouco, apesar que com jQuery você tem acesso a muitas coisas úteis que somente com javaScript puro fica mais complicado fazer Commented 5/08/2015 às 13:58

4 Respostas 4

10

Como boas práticas em javascript, é interessante criar variáveis de cada elemento que será manipulado, para evitar muitos acessos a àrvore DOM. Veja estas modificações que fiz no código:

$(function() {

  $("#click_apoio").on('click', function(e) {

    e.preventDefault();
    var $institucional = $("#institucional"),
      $parceiros = $("#parceiros");

    if($institucional.hasClass('desativado')) {

        $institucional.removeClass('desativado')
          .addClass('ativado');

        $parceiros.removeClass('ativado')
          .addClass('desativado');    
    }    

  }); 

});

Sobre as modificações:

  • Adicionei uma função anônima do jQuery ($(function){...});) para evitar que o script seja carregado antes do objeto jQuery existir na página;
  • Criei variáveis para cada elemento a ser manipulado, evitando acessos desnecessários à árvore DOM;
  • Aninhei funções em cada elemento, para organizar o código e ficar mais legível (Ex: $institucional.removeClass('desativado').addClass('ativado'););
4
  • 1
    Legal isso hein @Henrique !!! Commented 5/08/2015 às 13:41
  • Esse código tá me dando um reload na página hein .... Commented 5/08/2015 às 13:56
  • Dá uma olhada no console da página. Provavelmente eu deva ter errado na hora de digitar o código. Commented 5/08/2015 às 13:59
  • Fiz um exemplo bem tosco só pra mostrar que pode ser usada a função toggleClass também. jsfiddle.net/rm5d55bf/1 Commented 5/08/2015 às 14:14
7

Tem como melhor seu código usando uma outra lógica, por exemplo, se existe apenas dois estados ativado e desativado, logo você pode omitir o "desativado" deixando o elemento padrão com esse comportamento, e alterar apenas se houver a class="ativado".

Exemplo:

$("#click_apoio").on('click', function(e){
    e.preventDefault();
    $("#institucional, #parceiros").toogleClass('ativado');
});
4

Não acredito que tenha algum problema com o seu código, ele não está menos profissional porque não parece complexo ou por ter várias linhas.

Muitas vezes algoritmos bonitinhos são mais propensos a erros e mais difíceis de debugar, além de também serem mais difíceis de implementar e entender, caso outro programador precise dele.

Sempre foco em desenvolver algoritmos simples e bem claros, mesmo que isso o torne verboso (existem outros fatores a se considerar).

Resumindo e utilizando a filosofia Unix:

Rule of Clarity: Clarity is better than cleverness.

5
  • Concordo com você @Gerep Commented 5/08/2015 às 13:47
  • @MarcosVinicius que bom =) Depois dê uma olhada no link que enviei na resposta, é bem interessante e para mim é uma referência.
    – user3603
    Commented 5/08/2015 às 13:48
  • Concordo que o que importa no final é um código limpo e de fácil entendimento. Concordo também que sempre há outros fatores a se considerar e, em se tratando de web, o desempenho do código também é bem importante, pois os acessos à sites esta cada vez mais sendo feito por dispositivos móveis, por isso a importância de buscar o melhor desempenho. Commented 5/08/2015 às 13:54
  • @HenriqueSchreiner com toda razão. Existe também uma regra na filosofia Unix que toca um pouco nesse assunto: Rule 2. Measure. Don't tune for speed until you've measured, and even then don't unless one part of the code overwhelms the rest.
    – user3603
    Commented 5/08/2015 às 14:59
  • 1
    Como aquela expressão: Matar formiga com bazuca! Commented 5/08/2015 às 15:10
4
$("#click_apoio").on('click', function( evento ){
    evento.preventDefault();
    if($("#institucional").hasClass('desativado')){
        $("#institucional").removeClass('desativado').addClass('ativado');
        $("#parceiros").removeClass('ativado').addClass('desativado');
    }
});

Bom deu pra diminuir um pouco de linha.

8
  • 1
    Tinha tentado concatenar as instruções mas não tinha dado certo. Obrigado Commented 5/08/2015 às 13:34
  • Mas você só removeu as linhas, não melhorou o código em nada,
    – user3603
    Commented 5/08/2015 às 13:35
  • rsrsrsrs .... dá a sua opção @Gerep !!!! Commented 5/08/2015 às 13:35
  • 1
    @Danilo, sim, eu entendi e sem dúvida sua sugestão é muito válida mas eu não entendo o motivo de acharem que não esta "inteligível" o suficiente, o código esta super claro e direto, na minha opnião, não vejo necessidade alguma de alterar :)
    – user3603
    Commented 5/08/2015 às 13:46
  • 1
    Por exemplo, acho que foi útil para o @MarcosVinicius, pois ele não estava conseguindo concatenar. Commented 5/08/2015 às 13:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .