• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

armoucar/javascript-style-guide: JavaScript Style Guide

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称：

armoucar/javascript-style-guide

开源软件地址：

https://github.com/armoucar/javascript-style-guide

开源编程语言：


开源软件介绍：

Gitter

Airbnb JavaScript Style Guide() {

Uma boa abordagem para JavaScript

Índice

  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. Vírgulas
  14. Ponto e vírgulas
  15. Casting & Coerção de Tipos
  16. Convenções de nomenclatura
  17. Métodos Acessores
  18. Construtores
  19. Eventos
  20. Módulos
  21. jQuery
  22. Compatibilidade ECMAScript 5
  23. Testes
  24. Performance
  25. Recursos
  26. Empresas utilizando
  27. Traduções
  28. The JavaScript Style Guide Guide
  29. Converse conosco sobre Javascript
  30. Contribuidores
  31. Licença

Tipos

  • Primitivos: Quando você acessa um tipo primitivo você lida diretamente com seu valor.

    • string
    • number
    • boolean
    • null
    • undefined
    var foo = 1;
var bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

  • Complexos: Quando você acessa um tipo complexo você lida com a referência para seu valor.

    • object
    • array
    • function
    var foo = [1, 2];
var bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

⬆ voltar ao topo

Objetos

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

    // ruim
var item = new Object();

// bom
var item = {};

  • Não use palavras reservadas como chaves. Não irão funcionar no IE8. Leia mais.

    // ruim
var superman = {
  default: { clark: 'kent' },
  private: true
};

// bom
var superman = {
  defaults: { clark: 'kent' },
  hidden: true
};

  • Use sinônimos legíveis no lugar de palavras reservadas.

    // ruim
var superman = {
  class: 'alien'
};

// ruim
var superman = {
  klass: 'alien'
};

// bom
var superman = {
  type: 'alien'
};

⬆ voltar ao topo

Arrays

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

    // ruim
var items = new Array();

// bom
var items = [];

  • Use Array#push ao inves de atribuir um item diretamente ao array.

    var someStack = [];


// ruim
someStack[someStack.length] = 'abracadabra';

// bom
someStack.push('abracadabra');

  • Quando precisar copiar um Array utilize Array#slice. jsPerf

    var len = items.length;
var itemsCopy = [];
var i;

// ruim
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// bom
itemsCopy = items.slice();

  • Para converter um objeto similar a um array para array, utilize Array#slice.

    function trigger() {
  var args = Array.prototype.slice.call(arguments);
  ...
}

⬆ voltar ao topo

Strings

  • Use aspas simples '' para strings

    // ruim
var name = "Bob Parr";

// bom
var name = 'Bob Parr';

// ruim
var fullName = "Bob " + this.lastName;

// bom
var fullName = 'Bob ' + this.lastName;

  • Strings maiores que 80 caracteres devem ser escritas em múltiplas linhas e usar concatenação.

  • Nota: Se muito usado, strings longas com concatenação podem impactar na performance. jsPerf & Discussion

    // ruim
var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// ruim
var errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// bom
var errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

  • Quando for construir uma string programaticamente, use Array#join ao invés de concatenação de strings. Principalmente para o IE: jsPerf.

    var items;
var messages;
var length;
var i;

messages = [{
  state: 'success',
  message: 'This one worked.'
}, {
  state: 'success',
  message: 'This one worked as well.'
}, {
  state: 'error',
  message: 'This one did not work.'
}];

length = messages.length;

// ruim
function inbox(messages) {
  items = '<ul>';

  for (i = 0; i < length; i++) {
    items += '<li>' + messages[i].message + '</li>';
  }

  return items + '</ul>';
}

// bom
function inbox(messages) {
  items = [];

  for (i = 0; i < length; i++) {
    items[i] = '<li>' + messages[i].message + '</li>';
  }

  return '<ul>' + items.join('') + '</ul>';
}

⬆ voltar ao topo

Funções

  • Declarando 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.');
})();

  • Nunca declare uma função em um escopo que não seja de uma função (if, while, etc). Ao invés, atribua a função para uma variavel. Os Browsers irão deixar você fazer isso, mas a interpretação disso não é legal. Fazendo isso você pode ter más notícias a qualquer momento.

  • Nota: A ECMA-262 define um bloco como uma lista de instruções. A declaração de uma função não é uma instrução. Leia em ECMA-262's.

    // ruim
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// bom
if (currentUser) {
  var test = function test() {
    console.log('Yup.');
  };
}

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

    // ruim
function nope(name, options, arguments) {
  // ...outras implementações...
}

// bom
function yup(name, options, args) {
  // ...outras implementações...
}

⬆ voltar ao topo

Properties

  • Use ponto . para acessar propriedades.

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

// ruim
var isJedi = luke['jedi'];

// bom
var isJedi = luke.jedi;

  • Use colchetes [] para acessar propriedades através de uma variável.

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

function getProp(prop) {
  return luke[prop];
}

var isJedi = getProp('jedi');

⬆ voltar ao topo

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. O Capitão Planeta já nos alertou disso.

    // ruim
superPower = new SuperPower();

// bom
var superPower = new SuperPower();

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

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

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

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

    // ruim
var i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// ruim
var i, items = getItems(),
    dragonball,
    goSportsTeam = true,
    len;

// bom
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 qualquer coisa..');

  //..outras implementações..

  var name = getName();

  if (name === 'test') {
    return false;
  }

  return name;
}

// bom
function() {
  var name = getName();

  test();
  console.log('fazendo alguma coisa..');

  //...outras implmementações...

  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;
}

⬆ voltar ao topo

Hoisting

  • Declarações de váriaveis durante todo o escopo da função são elevadas ao topo função com valor atribuído undefined. Esse comportamento é chamado de hoisting.

    // sabemos que isso não irá funcionar (assumindo que
// não exista uma variável global chamada `notDefined`)
function example() {
  console.log(notDefined); // => lança uma ReferenceError
}

// Declarar uma variável depois de ter referenciado
// a mesma irá funcionar pelo comportamento do `hoist`
// Nota: a atribuição do valor `true` não é afetada por `hoisting`.
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// O interpretador fez `hoisting` para a declaração
// da variável. Isso significa que nosso exemplo pode
// ser reescrito como:
function example() {
  var declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

  • Funções anônimas fazem hoist para o nome da sua variável, não para a corpo da função.

    function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function() {
    console.log('anonymous function expression');
  };
}

  • Funções nomeadas fazem hoist para o nome da variável, não para o nome ou corpo da função.

    function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  superPower(); // => ReferenceError superPower is not defined

  var named = function superPower() {
    console.log('Flying');
  };


  // O mesmo acontece quando o nome da função
  // é o mesmo da variável.
  function example() {
    console.log(named); // => undefined

    named(); // => TypeError named is not a function

    var named = function named() {
      console.log('named');
    };
  }
}

  • Declarações de funções nomeadas fazem hoist do nome da função e do seu corpo.

    function example() {
  superPower(); // => Flying

  function superPower() {
    console.log('Flying');
  }
}

  • Para mais informações veja JavaScript Scoping & Hoisting por Ben Cherry

⬆ voltar ao topo

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, se não true
    • Strings equivalem a false se são vazias '', se não true
    if ([0]) {
  // true
  // Um array é um objeto, objetos equivalem a `true`.
}

  • Use atalhos.

    // ruim
if (name !== '') {
  // ...outras implementações...
}

// bom
if (name) {
  // ...outras implementações...
}

// ruim
if (collection.length > 0) {
  // ...outras implementações...
}

// bom
if (collection.length) {
  // ...outras implementações...
}

  • Para mais informações veja Truth Equality and JavaScript por Angus Croll

⬆ voltar ao topo

Blocos