javascript

JavaScript

Guia anti-espaguete.

Sumário

• Formatação
• Nomenclatura
• Manipulação do DOM
• Referências

[⬅ Voltar para Estilo]

Formatação

• Não use ponto-e-vírgula. Uma vez que todo código JavaScript só vai para produção após um pré-processamento (ainda que seja para minificação), então não há porque adicionar o ponto-e-virgula manualmente. Deixe que a engine de pré-processamento se preocupe com isso.

  // ruim
  var me = $(this);
  test();
  
  // bom
  var me = $(this)
  test()

• Use aspas simples.

  // ruim
  var string = "<p class='foo'>Lorem Ipsum</p>";
  var noteClick = me.attr("data-note");
  
  // bom
  var string = '<p class="foo">Lorem Ipsum</p>';
  var noteClick = me.attr('data-note');

• Use {} em todos os blocos condicionais e loops.

  // ruim
  if (condition) statement;
  else if (condition) statement;
  else statement;
  
  // bom
  if (condition) {
      statement
  } else if (condition) {
      statement
  } else {
      statement
  }

• Use /* comentários */. Inclua uma descrição, especifique tipos e valores para todos os parâmetros e retornos de funções e métodos.

  /**
   * Retorna um novo elemento baseado
   * no nome da tag passada como parâmetro.
   *
   * @param  <String>  tag
   * @return <Element> element
   */
  function make(tag) {
      // ...
  
      return element
  }

• Use // comentários. Explique o que está acontecendo no seu código.

  // bom
  function getType() {
      console.log('fetching type...')
  
      // Define o valor padrão como 'no type'
      var type = this._type || 'no type'
  
      return type
  }

• Prefixe objetos jQuery com $.

  // ruim
  var sidebar = $('.sidebar');
  
  // bom
  var $sidebar = $('.sidebar');

• Use { na mesma linha da sentença.

  // ruim
  function func()
  {
      return
      {
          name: "Batman"
      }
  }
  // => undefined
  
  // bom
  function func() {
      return {
          name: "Batman"
      }
  }
  // => { name: "Batman" }

[⬆ Topo]

Nomenclatura

• Use camelCase para variáveis normais.

  // ruim
  var table_prefix = 'table-'
  var tableprefix = 'table-'
  var TablePrefix = 'table-'
  
  // bom
  var tablePrefix = 'table-'

• Use PascalCase para "classes".

  // ruim
  var my_app = { /* ... */ }
  
  // bom
  var MyApp = { /* ... */ }

[⬆ Topo]

Manipulação do DOM

• Use o prefixo js- nas classes de elementos selecionados pelo JavaScript. (?)

  // ruim
  var $button = $('.button')
  
  // bom
  var $button = $('.js-button')

[⬆ Topo]

Referências

• Coding Style por @LFeh: Grande parte dos exemplos daqui vieram deste ótimo guia por @LFeh.

[⬆ Topo]