JavaScript: Do Jeito Certo

JS

Existem muita informação sobre JavaScript, “que neste post iremos citar como JS”, o importante entender é que não existe uma maneira canônica de usar JS, apesar de muitos sites renomados como  MDN(Mozilla Developer Network) fazerem parte da historia do JS com sua documentação muito bem feita. Nenhum deles leva o desenvolvedor a ter um conceito de como realmente se trabalhar com códigos JavaScript.

Então resolvi fazer uma pesquisa/busca de algo que me ajuda-se neste sentido, e acabei encontrando um projeto opensource no Github muito interessante, é o Airbnb JavaScript Style Guide O criador deste projeto o chama de “Uma boa abordagem para JavaScript”. Mas porque boa Thadeu? Porque se paramos para analisar o projeto ele nos mostra que nos temos que mudar nosso modo de programar e se adequar aos novas técnicas, intender o que fica melhor na documentação de um código bem feito e seus paradigmas, o “Jeito certo e o errado de escrever um bom código JS”. Vamos a um exemplo:

Funções:

// definindo uma função anônima
var anonymous = function() {
  return true;
};

// definindo uma função nomeada
var named = function named() {
  return true;
};

// função imediatamente invocada (IIFE)
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

Como vemos acima, podemos usar 4 tipos de funções com JS que se enquadram no novos paradigmas, intender bem o que cada uma representa é importante na hora da criação de uma função.

Espaços em branco

Com certeza todo desenvolvedor já passou por uma situação semelhante, criar o seu código em um editor de texto qualquer, e depois abrir em outro e o código está todo diferente(indentação). Por isso há essa especificação sobre o que usar e como usar a indentação. Vejamos:

Use tabs com 2 espaços

// ruim
function() {
∙∙∙∙var name;
}

// ruim
function() {
∙var name;
}

// bom
function() {
∙∙var name;
}

Viram? 2 espaços correspondem a 2 espaços em qualquer editor, independente do editor você vai ver seu código corretamente, e isso pode ajudar os devs também a olhar o código para manutenção posteriormente.

Use identação quando encadear vários métodos.

// ruim
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bom
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

jQuery

Quem usa constantemente o jQuery por exemplo ele nos traz algumas dicas, vejamos:

Prefix jQuery object variables with a $.

// bad
var sidebar = $('.sidebar');

// good
var $sidebar = $('.sidebar');

Cache jQuery lookups.

// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...stuff...

  $('.sidebar').css({
    'background-color': 'pink'
  });
}

// good
function setSidebar() {
  var $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...stuff...

  $sidebar.css({
    'background-color': 'pink'
  });
}

Módulos

  • Um módulo deve começar com !. Isso garante que não haverá erros em produção caso os scripts sejam concatenados e um módulo não termine com ponto e vírgula.
  • Nomeie o arquivo em formato camelCase, coloque em uma pasta com o mesmo nome e procure o nome da função que é exportada.
  • Adicione um método noConflict() que exporta o módulo antigo e retorna o módulo que foi criado com o mesmo nome.
  • Sempre declare ‘use strict’; no topo do módulo.

// fancyInput/fancyInput.js
!function(global) {
  'use strict';

  var previousFancyInput = global.FancyInput;

  function FancyInput(options) {
    this.options = options || {};
  }

  FancyInput.noConflict = function noConflict() {
    global.FancyInput = previousFancyInput;
    return FancyInput;
  };

  global.FancyInput = FancyInput;
}(this);

Índice

Se você chegou até aqui, é porque leu o artigo até o final, então vou deixar o indíce pra você escolher qual novo paradigma você gostaria de conhecer, para poder utilizar em seus códigos JavaScript.

  1. Tipos
  2. Objetos
  3. Arrays
  4. Strings
  5. Funções
  6. Propriedades
  7. Variáveis
  8. Hoisting
  9. Expressões Condicionais & Comparações
  10. Blocos
  11. Comentários
  12. Espaços em branco
  13. Leading Commas
  14. Ponto e vírgula
  15. Casting & Coerção de Tipos
  16. Convenções de nomenclatura
  17. Métodos Acessores
  18. Construtores
  19. Módulos
  20. jQuery
  21. Compatibilidade EcmaScript5
  22. Testes
  23. Performance
  24. Conteúdo
  25. Empresas utilizando
  26. Traduções
  27. The JavaScript Style Guide Guide
  28. Contribuidores
  29. Licença

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s