R7.com JavaScript Style Guide() {

Tendo como base o AirBnB sytle guide(https://github.com/airbnb/javascript)

Uma boa abordagem para JavaScript

Índice

1. Objetos
2. Arrays
3. Strings
4. Funções
5. Propriedades
6. Variáveis
7. Expressões Condicionais & Comparações
8. Blocos
9. Comentários
10. Espaços em branco
11. Vírgulas
12. Ponto e vírgula
13. Casting & Coerção de Tipos
14. Convenções de nomenclatura
15. Métodos Acessores
16. Construtores
17. jQuery

Objetos

• Use a sintaxe literal para criação de objetos.

  var item = {};

• Não use palavras reservadas como chaves.

  // ruim
  var superman = {
    class: 'superhero',
    default: { clark: 'kent' },
    private: true
  };
  
  // bom
  var superman = {
    klass: 'superhero',
    defaults: { clark: 'kent' },
    hidden: true
  };

Arrays

• Use a sintaxe literal para a criação de Arrays.

  var items = [];

Strings

• Use aspas simples '' para strings

  var name = 'Portal R7';
  var fullName = 'Portal ' + this.name;

  var errorMessage = 'Lorem ipsum ' +
    'hendrerit aliquam primis.' +
    'amet risus in ' +
    'tincidunt enim semper dapibus ' +
    'porta praesent risus ' +
    'consectetur litora sit.';

Funções

• Declarando Funções:

  // definindo uma função anônima
  var foo = function() {
    return true;
  };
  
  // definindo uma função nomeada
  var bar = function portal_r7() {
    return true;
  };
  
  // função imediatamente invocada (IIFE)
  (function() {
    console.log('Inicializando!!!');
  })();

• Nunca nomeie um parâmetro como arguments. Isso sobrescrevá o objeto arguments que é passado para cada função.

  // ruim
  function name_function(name, options, arguments) {
    // ...stuff...
  }
  
  // bom
  function name_function(name, options, args) {
    // ...stuff...
  }

Propriedades

• Use ponto . para acessar propriedades.

  var luke = {
    jedi: true,
    age: 28
  };
  
  var isJedi = luke.jedi;

Variáveis

• Sempre use var para declarar variáveis. Não fazer isso irá resultar em variáveis globais. Devemos evitar poluir o namespace global.

  var superPower = new SuperPower();

• Use somenete uma declaração var para múltiplas variáveis e declare cada variável em uma nova linha.

  var items = getItems(),
      goSportsTeam = true,
      dragonball = 'z';

• Declare as variáveis que voce não vai estipular valor por último. É útil no futuro, quando voce precisar atribuir valor para ela dependendo do valor da variável já declarada.

  var items = getItems(),
      goSportsTeam = true,
      dragonball,
      length,
      i;

• Defina variáveis no topo do escopo onde ela se encontra. Isso ajuda a evitar problemas com declaração de variáveis e hoisting.

  // ruim
  function() {
    test();
    console.log('fazendo algo..');
  
    //..mais código..
  
    var name = getName();
  
    if (name === 'test') {
      return false;
    }
  
    return name;
  }
  
  // bom
  function() {
    var name = getName();
  
    test();
    console.log('doing stuff..');
  
    //..other stuff..
  
    if (name === 'test') {
      return false;
    }
  
    return name;
  }
  
  // ruim
  function() {
    var name = getName();
  
    if (!arguments.length) {
      return false;
    }
  
    return true;
  }
  
  // bom
  function() {
    if (!arguments.length) {
      return false;
    }
  
    var name = getName();
  
    return true;
  }

  • Assim como funções, todas as variaveis devem ser escritas em inglês

Expressões Condicionais & Comparações

• Use === e !== ao invés de == e !=.

• Expressões condicionais são interpretadas usando coerção de tipos e seguem as seguintes regras:

  • Objeto equivale a true
  • Undefined equivale a false
  • Null equivale a false
  • Booleans equivalem a o valor do boolean
  • Numbers equivalem a false se +0, -0, or NaN, senão true
  • Strings equivalem a false se são vazias '', senão true

  if ([0]) {
    // true
    // Um array é um objeto, objetos equivalem a `true`.
  }

• Use atalhos.

  var name = 'Portal R7',
      collections = collections.length;
  
  if (name) {
    // ...código...
  }
  
  if (collections) {
    // ...código...
  }

Blocos

• Use chaves para todos os blocos com mais de uma linha.

  if (test) {
    return false;
  }
  
  function() {
    return false;
  }

Comentários

• Use /** ... */ para comentários com mais de uma linha. Inclua uma descrição e especifique tipos e valores para todos os parametros e retornos.

  /**
   * make() retorna uma novo elemento
   * baseado no parametro tag
   *
   * @param <String> tag
   * @return <Element> element
   */
  function make(tag) {
  
    // ...código...
  
    return element;
  }

• Use // para comentários de uma linha. Coloque comentários de uma linha acima da expressão. Deixe uma linha em branco antes de cada comentário.

  // is current tab
  var active = true;
  
  function getType() {
    console.log('fetching type...');
  
    // set the default type to 'no type'
    var type = this._type || 'no type';
  
    return type;
  }

• Use prefixos FIXME or TODO nos seus comentários. Isso vai ajudar outros desenvolvedores a entenderem rapidamente se voce está indicando um código que precisa ser revisado ou está sugerindo uma solução para o problema e como deve ser implementado.

• Use // FIXME: para anotar um "fix"

  function Calculator() {
  
    // FIXME: não deveria usar uma global aqui
    total = 0;
  
    return this;
  }

• Use // TODO: anotação para futuras implementações

  function Calculator() {
  
    // TODO: total should be configurable by an options param
    this.total = 0;
  
    return this;
  }

## <a name='whitespace'>Espaços em branco</a>

- Use tabs com 2 espaços

  ```javascript
  function() {
  ∙∙var name;
  }
  ```
- Coloque um espaço antes da chave que abre o escopo da função.

  ```javascript
  function test() {
    console.log('test');
  }

  dog.set('attr', {
    age: '1 year',
    breed: 'Bernese Mountain Dog'
  });
  ```

- Use identação quando encadear vários métodos.(a ser discutido)

  ```javascript
  $('#items')
    .find('.selected')
    .highlight()
    .end()
    .find('.open')
    .updateCount();

  ```

## <a name='leading-commas'>Virgulas</a>

```javascript

  var once,
      upon,
      aTime;

  var hero = {
    firstName: 'Bob',
    lastName: 'Parr',
    heroName: 'Mr. Incredible',
    superPower: 'strength'
  };

Ponto e vírgula

  ;(function() {
    var name = 'Skywalker';
    return name;
  })();

Casting & Coerção de tipos

• Faça coerção de tipos no inicio da expressão.

• Strings:

  //  => this.reviewScore = 9;
  
  var totalScore = '' + this.reviewScore;
  var totalScores = this.reviewScore + ' total score';

• Use parseInt para Numbers e sempre informe a base de conversão.

  var inputValue = '4';
  
  var val = Number(inputValue);
  var values = parseInt(inputValue, 10);
  
  /**
   * parseInt era a razão do código ser lento.
   * Deslocando bits a String faz coerção para Number
   * muito mais rápido.
   */
  
  var val = inputValue >> 0;

• Booleans:

  var age = 0,
      hasAge = Boolean(age),
      hasAges = !!age;

Convenções de nomenclatura

• Não use apenas um caracter, seja descritivo.

  function query() {
    // ..código..
  }

• Use camelCase quando for nomear objetos, funções e instâncias.

  var thisIsMyObject = {};
  
  function thisIsMyFunction() {};
  
  var user = new User({
    name: 'Bob Parr'
  });

• Use PascalCase quando for nomear construtores.

  function User(options) {
    this.name = options.name;
  }
  
  var good = new User({
    name: 'yup'
  });

• Use um underscore _ como primeiro caracter no nome de propriedades privadas.

  this._firstName = 'Panda';

• Quando for guardar referência para this use _this.

  function() {
    var _this = this;
    return function() {
      console.log(_this);
    };
  }

• Nomeie suas funções. Ajuda bastante quando for analisar pilhas de erro.

  var log = function log(msg) {
    console.log(msg);
  };

Métodos Acessores

• Métodos acessores de propriedades não são obrigatórios.

• Se voce vai criar métodos acessores utilize getVal() e setVal('hello')

  dragon.getAge();
  dragon.setAge(25);

• Se a propriedade é um boolean, use isVal() ou hasVal()

  if (!dragon.hasAge()) {
    return false;
  }

• Tudo bem se voce criar os métodos get() e set(), mas seja consistente.

  function Jedi(options) {
    options || (options = {});
    var lightsaber = options.lightsaber || 'blue';
    this.set('lightsaber', lightsaber);
  }
  
  Jedi.prototype.set = function(key, val) {
    this[key] = val;
  };
  
  Jedi.prototype.get = function(key) {
    return this[key];
  };

Construtores

• Atribua métodos ao objeto prototype ao invés de sobrescrever o prototype com um novo objeto.

  function Jedi() {
    console.log('new jedi');
  }
  
  Jedi.prototype.fight = function fight() {
    console.log('fighting');
  };
  
  Jedi.prototype.block = function block() {
    console.log('blocking');
  };

jQuery

• Nomeie objetos jQuery com o prefixo $.

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

• Guarde as consultas jQuery para reuso.

  function setSidebar() {
    var $sidebar = $('.sidebar');
    $sidebar.addClass('hide');
  
    // ...código...
  
    $sidebar.css({
      'background-color': 'pink'
    });
  }

• Para pesquisas no DOM use o modo Cascata $('.sidebar ul') ou pai > filho $('.sidebar > ul'). jsPerf

• Use find em objetos jQuery que estão armazenados em variáveis.

  $('.sidebar > ul').addClass('hide');
  
  $($sidebar[0]).find('ul');

Testes

• Próximo tópico

};