Padrão de nomenclatura para classes usadas em JavaScript evita problemas

CSS, Javascript, Padrões Comentar >> Marcelo Korjenioski

Esta semana des­co­bri um pro­blema em se usar nome da clas­ses de estilo para iden­ti­fi­ca­ção em fun­ções javas­cript. A situ­a­ção foi que outro pro­gra­ma­dor ao migrar o layout do sis­tema  apa­gou o nome de  clas­ses que esta­vam sendo usa­das no JS via Pro­totype para vali­da­ção de cam­pos.  Como não exis­tia um padrão para o nome das clas­ses minha solu­ção para evi­tar futu­ros pro­ble­mas foi criar um padrão de nomen­cla­tura “jsNo­me­Da­Classe” assim quando alguem ver o “js” na frente do nome da classe indica uma refe­ren­cia para uma fun­cao JS.
No exem­plo abaixo eu usei o padrão jsNo­me­Do­Bo­tao para que se algum pro­gra­ma­dor ver o nome dessa classe saiba que tem uma fun­ção JS atri­buida e não apa­gue ou altere o nome
da classe em uma manu­ten­ção ou troca de layout do sistema.

<html>
<head>
<title>Validar</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form>
<input class="jsNomeDoBotao" type="button" name="botao_1" value="botao 1" /><br/>
<input class="jsNomeDoBotao" type="button" name="botao_2" value="botao 2"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_3" value="botao 3"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_4" value="botao 4"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_4" value="botao 5"/>
</form>
<script type="text/javascript">
// Adiciono um alert para todos os inputs com o nome de class jsNomeDoBotao.
$(".jsNomeDoBotao").bind("click", function(event) {
alert(this.name);
});
</script>
</body>
</html>

Caso tenha alguma duvida uma outro opi­nião sobre o Post deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais e Posts aqui apresentados.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn
Tags: , ,


  • Lean­dro

    Fala Mar­celo,

    Não sei exa­ta­mente a par­tir de qual ver­são do JQuery isso mudou, mas atu­al­mente existe um “ata­lho” para o bin­ding que encurta um pouco as coi­sas. Assim:


    $('.jsNomeDoBotao').click(function(event) {
    blah blah blah
    });

    Um abraço,
    Leandro

  • http://www.phaneronsoft.com Mar­celo Korjenioski

    Bom saber eu dei­xei de usar o JQuery faz um tempo estou usando mais o Pro­totype mas o JQuery mora no meu cora­ção.
    Obri­gado pela dica.

  • Dr. Web

    Boa Dica, nunca tinha pen­sado nessa hipotese.

    O cabra des­car­tou o layout e não sal­vou nem um bac­kup?
    Na minha cabeça é regra 1, sem­pre sal­var um bac­kup antes de qual­quer alteração.

blog comments powered by Disqus
Designed by NattyWP Wordpress Themes.
Images by desEXign.