Airbnb JavaScript Guide de Style() {

Une approche plus ou moins raisonnable à Javascript

Table des Matières

1. Types
2. Objets
3. Tableaux
4. Chaines de caractères
5. Fonctions
6. Propriétés
7. Variables
8. Hissage
9. Expressions conditionnelles & Égalité
10. Blocs
11. Commentaires
12. Espaces
13. Virgules
14. Point-virgules
15. Conversion des types & Contraintes
16. Conventions de nommage
17. Accesseurs
18. Constructeurs
19. Évènements
20. Modules
21. jQuery
22. Compatibilité ES5
23. Test
24. Performances
25. Sources
26. Dans la Nature
27. Traductions
28. Le Guide au Guide de Style Javascript
29. Contributeurs
30. License

Types

• Primitifs: Quand vous accédez à un type primitif, vous travaillez directement avec sa valeur.

  • string
  • number
  • boolean
  • null
  • undefined

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

• Complexe: Quand vous accédez à un type complexe, vous travaillez avec une référence de sa valeur.

  • object
  • array
  • function

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

⬆ Revenir en haut

Objets

• Utilisez la syntaxe littérale pour la création d'un objet.

  // pas bien
  var objet = new Object();
  
  // bien
  var objet = {};

• N'utilisez pas les mots réservés comme clés. Cela ne marchera pas sur IE8. Plus d'informations

  // pas bien
  var superman = {
    default: { clark: 'kent' },
    private: true
  };
  
  // bien
  var superman = {
    defaults: { clark: 'kent' },
    hidden: true
  };

• Utilisez des synonymes lisibles à la place des mots réservés.

  // pas bien
  var superman = {
    class: 'alien'
  };
  
  // pas bien
  var superman = {
    klass: 'alien'
  };
  
  // bien
  var superman = {
    type: 'alien'
  };

⬆ Revenir en haut

Tableaux

• Utilisez la syntaxe littérale pour la création d'un objet.

  // pas bien
  var objets = new Array();
  
  // bien
  var objets = [];

• Si vous ne connaissez pas la taille du tableau, utilisez Array#push.

  var unTableau = [];
  
  
  // pas bien
  unTableau[unTableau.length] = 'abracadabra';
  
  // bien
  unTableau.push('abracadabra');

• Quand vous devez copier un tableau, utilisez Array#slice. jsPerf

  var len = objets.length,
      objetsCopie = [],
      i;
  
  // pas bien
  for (i = 0; i < len; i++) {
    objetsCopie[i] = objets[i];
  }
  
  // bien
  objetsCopie = objets.slice();

• Pour convertir un objet semblable à un tableau en un tableau, utilisez Array#slice.

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

⬆ Revenir en haut

Chaînes de caractères

• Utilisez les apostrophes (single quotes) '' pour les chaînes de caractères. eslint: quotes jscs: validateQuoteMarks

  // pas bien
  const nom = "Bob Parr";
  
  // pas bien - un template littéral devrait contenir des interpolations ou de nouvelles lignes
  const nom = `Bob Parr`;
  
  // bien
  const nom = 'Bob Parr';

• Les chaînes de caractères qui font plus de 100 caractères ne devraient pas être écrites sur plusieurs lignes en utilisant la concaténation.

Pourquoi? Il est difficile de travailler avec des chaînes de caractères brisées et cela rend le code moins recherchable.

```javascript
// pas bien
const 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.';

// pas bien
const 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.';

// bien
const 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.';
```

• Quand vous construisez programmatiquement une chaîne de caractères, utilisez les templates de chaînes de caractères à la place de l'opérateur de concaténation. eslint: prefer-template template-curly-spacing jscs: requireTemplateStrings.

Pourquoi? L'utilisation d'un template de chaînes de caractères vous permet d'être plus lisible, d'avoir une syntaxe concise avec des nouvelles lignes propres ainsi que l'accès aux fonctions d'interpolation de chaînes.

```javascript
// pas bien
function sayHi(nom) {
   return 'How are you, ' + nom + '?';
}

// pas bien
function sayHi(nom) {
  return ['How are you, ', nom, '?'].join();
}

// pas bien
function sayHi(nom) {
  return `How are you, ${ nom }?`;
}

// bien
function sayHi(nom) {
  return `How are you, ${nom}?`;
}
```

• n'utilisez jamais eval() sur une chaîne de caractères, cela ouvre à trop de vulnérabilités.

• N'échappez pas inutilement des caractères dans une chaîne de caractères. eslint: no-useless-escape

Pourquoi? les backslashes rendent la chaîne moins lisible, de plus ils ne devraient être présent que lorsque c'est nécessaire.

```javascript
// pas bien
const foo = '\'this\' \i\s \"quoted\"';

// bien
const foo = '\'this\' is "quoted"';
const foo = `my name is '${name}'`;
```

⬆ Revenir en haut

Fonctions

• Expressions de fonction :

  // expression de fonction anonyme
  var anonymous = function() {
    return true;
  };
  
  // expression de fonction nommée
  var named = function named() {
    return true;
  };
  
  // expression de fonction immédiatement appelée (IIFE)
  (function() {
    console.log('Welcome to the Internet. Please follow me.');
  })();

• Ne déclarez jamais une fonction dans un bloc non-fonction (if, while, etc). Assignez plutôt la fonction à une variable. Les navigateurs vous permettront de le faire, mais ils l'interprèteront tous différemment, et là c'est la caca, c'est la cata, c'est la catastrophe.

• Note : ECMA-262 définit un bloc comme une série d'instructions. La déclaration d'une fonction n'est pas une instruction. Lisez la note d'ECMA-262 sur ce problème.

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

• Ne nommez jamais un paramètre arguments, cela prendra précédent sur l'objet arguments qui est donné dans la portée de toutes les fonctions.

  // pas bien
  function nope(name, options, arguments) {
    // ...stuff...
  }
  
  // bien
  function yup(name, options, params) {
    // ...stuff...
  }

⬆ Revenir en haut

Propriétés

• Utilisez la notation point lorsque vous accédez aux propriétés.

  var luke = {
    jedi: true,
    age: 28
  };
  
  // pas bien
  var isJedi = luke['jedi'];
  
  // bien
  var isJedi = luke.jedi;

• Utilisez la notation [] lorsque vous accédez à des propriétés à l'aide d'une variable.

  var luke = {
    jedi: true,
    age: 28
  };
  
  function getProp(prop) {
    return luke[prop];
  }
  
  var isJedi = getProp('jedi');

⬆ Revenir en haut

Variables

• Utilisez toujours var pour déclarer des variables. Ne pas le faire entraîne la création de variables globales. Nous préfèrons éviter de polluer l'espace de noms global. Capitaine Planète nous a prévenu de ces dangers.

  // pas bien
  superPower = new SuperPower();
  
  // bien
  var superPower = new SuperPower();

• N'utilisez qu'une seule déclaration var pour de multiples variables et déclarez chacune d'entre elles sur une nouvelle ligne.

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

• Déclarez les variables indéfinies en dernier. Cela s'avère pratique lorsque plus tard vous aurez besoin d'assigner une variable en fonction d'une autre précédemment assignée.

  // pas bien
  var i, len, dragonball,
      items = getItems(),
      goSportsTeam = true;
  
  // pas bien
  var i, items = getItems(),
      dragonball,
      goSportsTeam = true,
      len;
  
  // bien
  var items = getItems(),
      goSportsTeam = true,
      dragonball,
      length,
      i;

• Assignez vos variables au début de leur portée. Cela vous aide à éviter des problèmes avec la déclaration des variables et ceux liés au hissage de leur affectation.

  // pas bien
  function() {
    test();
    console.log('doing stuff..');
  
    //..d'autre trucs..
  
    var name = getName();
  
    if (name === 'test') {
      return false;
    }
  
    return name;
  }
  
  // bien
  function() {
    var name = getName();
  
    test();
    console.log('doing stuff..');
  
    //..d'autre trucs..
  
    if (name === 'test') {
      return false;
    }
  
    return name;
  }
  
  // pas bien
  function() {
    var name = getName();
  
    if (!arguments.length) {
      return false;
    }
  
    return true;
  }
  
  // bien
  function() {
    if (!arguments.length) {
      return false;
    }
  
    var name = getName();
  
    return true;
  }

⬆ Revenir en haut

Hissage

• Les déclarations de variables se font hisser jusqu'au début de leur portée, mais pas leur affectation.

  // nous savons que cela ne marchera pas (en supposant
  // qu'il n'existe pas de variable globale notDefined)
  function example() {
    console.log(notDefined); // => déclanche une ReferenceError
  }
  
  // Déclarer une variable après que vous
  // y référenciez marchera grâce au
  // hissage de variable. Note : l'affectation
  // de la valeur `true` n'est pas hissée.
  function example() {
    console.log(declaredButNotAssigned); // => undefined
    var declaredButNotAssigned = true;
  }
  
  // L'interpréteur hisse la déclaration
  // de variable au début de la portée.
  // Ce qui veut dire que notre exemple pourrait être écrit :
  function example() {
    var declaredButNotAssigned;
    console.log(declaredButNotAssigned); // => undefined
    declaredButNotAssigned = true;
  }

• Les expressions de fonctions anonymes hissent leur nom de variable, mais pas leur assignement.

  function example() {
    console.log(anonymous); // => undefined
  
    anonymous(); // => TypeError anonymous is not a function
  
    var anonymous = function() {
      console.log('anonymous function expression');
    };
  }

• Les expressions de fonctions nommées hissent leur nom de variable, pas le nom de la fonction ou son corps.

  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');
    };
  }
  
  // il en est de même lorsque le nom de la fonction
  // est le même que celui de la variable.
  function example() {
    console.log(named); // => undefined
  
    named(); // => TypeError named is not a function
  
    var named = function named() {
      console.log('named');
    }
  }

• Les déclarations de fonctions hissent leur nom et leur corps.

  function example() {
    superPower(); // => Flying
  
    function superPower() {
      console.log('Flying');
    }
  }

• Pour plus d'informations, référrez-vous à JavaScript Scoping & Hoisting par Ben Cherry

⬆ Revenir en haut

Expressions conditionnelles & Égalité

• Préférez === et !== à == et !=.

• Les expressions condtionnelles sont évaluées en utilisant les contraintes imposées par la méthode ToBoolean et suivent toujours ces simples rêgles :

  • Les Objets valent true
  • Undefined vaut false
  • Null vaut false
  • Les Booleéns valent la valeur du booléen
  • Les Nombres valent false si +0, -0, ou NaN, sinon true
  • Les Chaînes de caractères valent false si la chaîne est vide '', sinon true

  if ([0]) {
    // true
    // Un tableau est un objet, les objets valent true
  }

• Utilisez des raccourcis.

  // pas bien
  if (name !== '') {
    // ...stuff...
  }
  
  // bien
  if (name) {
    // ...stuff...
  }
  
  // pas bien
  if (collection.length > 0) {
    // ...stuff...
  }
  
  // bien
  if (collection.length) {
    // ...stuff...
  }

• Pour plus d'information, lisez Truth Equality and JavaScript par Angus Croll

⬆ Revenir en haut

Blocs

• Entourez d'accolades tous vos blocs contenus sur plusieurs lignes.

  // pas bien
  if (test)
    return false;
  
  // bien
  if (test) return false;
  
  // bien
  if (test) {
    return false;
  }
  
  // pas bien
  function() { return false; }
  
  // bien
  function() {
    return false;
  }

⬆ Revenir en haut

Commentaires

• Utilisez /** ... */ pour des commentaires qui s'étendent sur plusieurs lignes. Insérez une description, spécifiez les types et valeurs par défaut pour tous les paramètres et les valeurs de retour.

  // pas bien
  // make() returns a new element
  // based on the passed in tag name
  //
  // @param <String> tag
  // @return <Element> element
  function make(tag) {
  
    // ...stuff...
  
    return element;
  }
  
  // bien
  /**
   * make() returns a new element
   * based on the passed in tag name
   *
   * @param <String> tag
   * @return <Element> element
   */
  function make(tag) {
  
    // ...stuff...
  
    return element;
  }

• Utilisez // pour les commentaires d'une seule ligne. Placez-les sur une nouvelle ligne au-dessus du sujet du commentaire. Ajoutez une ligne vide au-dessus du commentaire.

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

• Préfixer vos commentaires avec FIXME ou TODO (et pas ACORRIGER ou AFAIRE, par pitié...) aide d'autres développeurs à comprendre rapidement si vous indiquez un problème qui doit être retravaillé, ou permet de suggérer une solution au problème qui devra être implémentée. Ceux-ci sont différents des commentaires classiques car ils peuvent entraîner une action. Ces actions sont FIXME -- need to figure this out ou TODO -- need to implement.

• Utilisez // FIXME: pour annoter des problèmes.

  function Calculator() {
  
    // FIXME: shouldn't use a global here
    total = 0;
  
    return this;
  }

• Utilisez // TODO: pour annoter des solutions aux problèmes.

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

⬆ Revenir en haut

Espaces

• Utilisez deux espaces pour des tabulations "douces".

  // pas bien
  function() {
  ∙∙∙∙var name;
  }
  
  // pas bien
  function() {
  ∙var name;
  }
  
  // bien
  function() {
  ∙∙var name;
  }

• Placez un espace avant une accolade ouvrante.

  // pas bien
  function test(){
    console.log('test');
  }
  
  // bien
  function test() {
    console.log('test');
  }
  
  // pas bien
  dog.set('attr',{
    age: '1 year',
    breed: 'Bernese Mountain Dog'
  });
  
  // bien
  dog.set('attr', {
    age: '1 year',
    breed: 'Bernese Mountain Dog'
  });

• Ajoutez une nouvelle ligne vide à la fin du fichier.

  // pas bien
  (function(global) {
    // ...stuff...
  })(this);

  // bien
  (function(global) {
    // ...stuff...
  })(this);

• Indentez vos longues chaînes de méthodes.

  // pas bien
  $('#items').find('.selected').highlight().end().find('.open').updateCount();
  
  // bien
  $('#items')
    .find('.selected')
      .highlight()
      .end()
    .find('.open')
      .updateCount();
  
  // pas bien
  var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)
      .attr('width',  (radius + margin) * 2).append('svg:g')
      .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
      .call(tron.led);
  
  // bien
  var leds = stage.selectAll('.led')
      .data(data)
    .enter().append('svg:svg')
      .class('led', true)
      .attr('width',  (radius + margin) * 2)
    .append('svg:g')
      .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
      .call(tron.led);

⬆ Revenir en haut

Virgules

• Virgules en début de ligne : Nope.

  // pas bien
  var once
    , upon
    , aTime;
  
  // bien
  var once,
      upon,
      aTime;
  
  // pas bien
  var hero = {
      firstName: 'Bob'
    , lastName: 'Parr'
    , heroName: 'Mr. Incredible'
    , superPower: 'strength'
  };
  
  // bien
  var hero = {
    firstName: 'Bob',
    lastName: 'Parr',
    heroName: 'Mr. Incredible',
    superPower: 'strength'
  };

• Virgule finale supplémentaire : Nope. Cela peut poser des problèmes avec IE6/7 et IE9 en mode Quirks. De plus, certaines implémentations de ES3 ajoutaient sa longueur à un tableau s'il avait une virgule finale supplémentaire. Cela fut clarifié dans ES5 (source):

Edition 5 clarifies the fact that a trailing comma at the end of an ArrayInitialiser does not add to the length of the array. This is not a semantic change from Edition 3 but some implementations may have previously misinterpreted this.

```javascript
// pas bien
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn',
};

var heroes = [
  'Batman',
  'Superman',
];

// bien
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn'
};

var heroes = [
  'Batman',
  'Superman'
];
```

⬆ Revenir en haut

Point-virgules

• Yup.

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

⬆ Revenir en haut

Conversion de types & Contraintes

• Faites vos contraintes de type au début de l'instruction.

• Chaines de caractères:

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

• Utilisez parseInt pour les Nombres et toujours avec la base numérique utilisée lors de la conversion.

  var inputValue = '4';
  
  // pas bien
  var val = new Number(inputValue);
  
  // pas bien
  var val = +inputValue;
  
  // pas bien
  var val = inputValue >> 0;
  
  // pas bien
  var val = parseInt(inputValue);
  
  // bien
  var val = Number(inputValue);
  
  // bien
  var val = parseInt(inputValue, 10);

• Si pour quelque raison que ce soit vous faites quelque chose de fou-fou, que parseInt vous ralentit et que vous devez utiliser le décalage de bits pour des raisons de performances, ajoutez un commentaire expliquant ce et pourquoi que vous le faites.

• Note : Soyez prudent lorsque vous utilisez les opérations de décalage de bits. Les Nombres sont représentés comme des valeurs sur 64 bits, mais les opérations de décalage de bits renvoient toujours des entiers sur 32 bits (source). Les décalages de bits peuvent entraîner des comportements innatendus pour des valeurs entières stockées sur plus de 32 bits. Discussion

  // bien
  /**
   * parseInt était la raison pour laquelle mon code était lent.
   * Faire un décalage de bits sur la chaîne de caractères pour la contraindre
   * à un Nombre l'a rendu beaucoup plus rapide.
   */
  var val = inputValue >> 0;

• Booléens:

  var age = 0;
  
  // pas bien
  var hasAge = new Boolean(age);
  
  // bien
  var hasAge = Boolean(age);
  
  // bien
  var hasAge = !!age;

⬆ Revenir en haut

Conventions de nommage

• Évitez les noms ne faisant qu'une seule lettre. Soyez descriptifs dans votre déclaration.

  // pas bien
  function q() {
    // ...stuff...
  }
  
  // bien
  function query() {
    // ..stuff..
  }

• Utilisez la camelCase lorsque vous nommez vos objets, fonctions et instances.

  // pas bien
  var OBJEcttsssss = {};
  var this_is_my_object = {};
  function c() {};
  var u = new user({
    name: 'Bob Parr'
  });
  
  // bien
  var thisIsMyObject = {};
  function thisIsMyFunction() {};
  var user = new User({
    name: 'Bob Parr'
  });

• Utilisez la PascalCase lorsque vous nommez vos constructeurs ou vos classes.

  // pas bien
  function user(options) {
    this.name = options.name;
  }
  
  var bad = new user({
    name: 'nope'
  });
  
  // bien
  function User(options) {
    this.name = options.name;
  }
  
  var good = new User({
    name: 'yup'
  });

• Ajoutez un underscore _ au début du nom de vos propriétés privées.

  // pas bien
  this.__firstName__ = 'Panda';
  this.firstName_ = 'Panda';
  
  // bien
  this._firstName = 'Panda';

• Lorsque vous sauvegardez une référence à this, utilisez _this.

  // pas bien
  function() {
    var self = this;
    return function() {
      console.log(self);
    };
  }
  
  // pas bien
  function() {
    var that = this;
    return function() {
      console.log(that);
    };
  }
  
  // bien
  function() {
    var _this = this;
    return function() {
      console.log(_this);
    };
  }

• Nommez vos fonctions. Cela s'avère pratique lorsque vous étudiez la pile d'exécution.

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

⬆ Revenir en haut

Accesseurs

• Les fonctions d'accesseur pour les propriétés ne sont pas obligatoires.

• Si vous faites des fonctions d'accès, utilisez getVal() et setVal('salut').

  // pas bien
  dragon.age();
  
  // bien
  dragon.getAge();
  
  // pas bien
  dragon.age(25);
  
  // bien
  dragon.setAge(25);

• Si la propriété est un booléen, utilisez isVal() ou hasVal().

  // pas bien
  if (!dragon.age()) {
    return false;
  }
  
  // bien
  if (!dragon.hasAge()) {
    return false;
  }

• Vous pouvez créez des fonctions get() et set(), mais restez cohérents.

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

⬆ Revenir en haut

Constructeurs

• Assignez des méthodes à l'objet prototype, au lieu de l'écraser avec un nouvel objet. L'écraser rend l'héritage impossible : en réinitialisant le protoype, vous effacez le prototype parent !

  function Jedi() {
    console.log('new jedi');
  }
  
  // pas bien
  Jedi.prototype = {
    fight: function fight() {
      console.log('fighting');
    },
  
    block: function block() {
      console.log('blocking');
    }
  };
  
  // bien
  Jedi.prototype.fight = function fight() {
    console.log('fighting');
  };
  
  Jedi.prototype.block = function block() {
    console.log('blocking');
  };

• Les méthodes peuvent renvoyer this pour permettre le chaînage de méthodes.

  // pas bien
  Jedi.prototype.jump = function() {
    this.jumping = true;
    return true;
  };
  
  Jedi.prototype.setHeight = function(height) {
    this.height = height;
  };
  
  var luke = new Jedi();
  luke.jump(); // => true
  luke.setHeight(20) // => undefined
  
  // bien
  Jedi.prototype.jump = function() {
    this.jumping = true;
    return this;
  };
  
  Jedi.prototype.setHeight = function(height) {
    this.height = height;
    return this;
  };
  
  var luke = new Jedi();
  
  luke.jump()
    .setHeight(20);

• Vous pouvez créer une méthode toString() personalisée, mais assurez-vous qu'elle fonctionne correctement et qu'elle ne cause aucun effet secondaire.

  function Jedi(options) {
    options || (options = {});
    this.name = options.name || 'no name';
  }
  
  Jedi.prototype.getName = function getName() {
    return this.name;
  };
  
  Jedi.prototype.toString = function toString() {
    return 'Jedi - ' + this.getName();
  };

⬆ Revenir en haut

Évènements

• Lorsque vous attachez des données utiles à vos évènements (qu'il s'agisse d'évènements du DOM ou quelque chose de plus propriétaire comme les évènements de Backbone), transmettez plutôt un objet "hash" au lieu de données brutes. Cela permet au contributeurs suivants d'ajouter plus de données à l'évènement sans rechercher et modifier tous les gestionnaires de l'évènement. Par exemple :

  // pas bien
  $(this).trigger('listingUpdated', listing.id);
  
  ...
  
  $(this).on('listingUpdated', function(e, listingId) {
    // faire quelque chose avec listingId
  });

  préférez:

  // bien
  $(this).trigger('listingUpdated', { listingId : listing.id });
  
  ...
  
  $(this).on('listingUpdated', function(e, data) {
    // faire quelque chose avec data.listingId
  });

⬆ Revenir en haut

Modules

• Le module devrait commencer avec un !. Cela vous assure que, si un module malformé oublie d'ajouter un point virgule final, il n'y aura pas d'erreur en production lorsque les scripts seront concaténés. Explication

• Le fichier devrait être nommé avec la camelCase, se situer dans un dossier avec le même nom, et correspondre au nom du seul élément exporté.

• Ajoutez une méthode nommée noConflict() qui restaure le module exporté à sa version précédente et le renvoie.

• Déclarez toujours 'use strict'; au début du module.

  // 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);

⬆ Revenir en haut

jQuery

• Prefixez vos variables d'objets jQuery avec un $.

  // pas bien
  var sidebar = $('.sidebar');
  
  // bien
  var $sidebar = $('.sidebar');

• Mettez en cache vos requêtes jQuery.

  // pas bien
  function setSidebar() {
    $('.sidebar').hide();
  
    // ...stuff...
  
    $('.sidebar').css({
      'background-color': 'pink'
    });
  }
  
  // bien
  function setSidebar() {
    var $sidebar = $('.sidebar');
    $sidebar.hide();
  
    // ...stuff...
  
    $sidebar.css({
      'background-color': 'pink'
    });
  }

• Pour les requêtes du DOM, utilisez le sélecteur en cascades $('.sidebar ul') ou le parent > enfant $('.sidebar > ul'). jsPerf

• Utilisez find avec des objets de requêtes jQuery appartenants à la portée.

  // pas bien
  $('ul', '.sidebar').hide();
  
  // pas bien
  $('.sidebar').find('ul').hide();
  
  // bien
  $('.sidebar ul').hide();
  
  // bien
  $('.sidebar > ul').hide();
  
  // bien
  $sidebar.find('ul');

⬆ Revenir en haut

Compatibilité ECMAScript 5

• Réferrez vous à la table de compatibilité ES5 de Kangax.

⬆ Revenir en haut

Test

• Yup.

  function() {
    return true;
  }

⬆ Revenir en haut

Performances

• On Layout & Web Performance
• String vs Array Concat
• Try/Catch Cost In a Loop
• Bang Function
• jQuery Find vs Context, Selector
• innerHTML vs textContent for script text
• Long String Concatenation
• Chargement en cours...

⬆ Revenir en haut

Sources

Lisez ceci

• Annotated ECMAScript 5.1

Autres Guides de Style

• Google JavaScript Style Guide
• jQuery Core Style Guidelines
• Principles of Writing Consistent, Idiomatic JavaScript

Autres Styles

• Naming this in nested functions - Christian Johansen
• Conditional Callbacks
• Popular JavaScript Coding Conventions on Github

Pour en savoir Plus

• Understanding JavaScript Closures - Angus Croll
• Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer

Livres

• JavaScript: The Good Parts - Douglas Crockford
• JavaScript Patterns - Stoyan Stefanov
• Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz
• High Performance Web Sites: Essential Knowledge for Front-End Engineers - Steve Souders
• Maintainable JavaScript - Nicholas C. Zakas
• JavaScript Web Applications - Alex MacCaw
• Pro JavaScript Techniques - John Resig
• Smashing Node.js: JavaScript Everywhere - Guillermo Rauch
• Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
• Human JavaScript - Henrik Joreteg
• Superhero.js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
• JSBooks

Blogs

• DailyJS
• JavaScript Weekly
• JavaScript, JavaScript...
• Bocoup Weblog
• Adequately Good
• NCZOnline
• Perfection Kills
• Ben Alman
• Dmitry Baranovskiy
• Dustin Diaz
• nettuts

⬆ Revenir en haut

Dans la Nature

Ceci est une liste de toutes les organisations qui utilisent ce guide de style. Envoyez-nous une pull request ou ouvrez une issue (sur le repo original) et nous vous ajouterons à la liste.

• Aan Zee: AanZee/javascript
• Airbnb: airbnb/javascript
• American Insitutes for Research: AIRAST/javascript
• Compass Learning: compasslearning/javascript-style-guide
• ExactTarget: ExactTarget/javascript
• Gawker Media: gawkermedia/javascript
• GeneralElectric: GeneralElectric/javascript
• GoodData: gooddata/gdc-js-style
• Grooveshark: grooveshark/javascript
• How About We: howaboutwe/javascript
• Mighty Spring: mightyspring/javascript
• MinnPost: MinnPost/javascript
• ModCloth: modcloth/javascript
• National Geographic: natgeo/javascript
• National Park Service: nationalparkservice/javascript
• Razorfish: razorfish/javascript-style-guide
• Shutterfly: shutterfly/javascript
• Userify: userify/javascript
• Zillow: zillow/javascript
• ZocDoc: ZocDoc/javascript

Traductions

Ce guide de style dans sa version originale :

• Anglais : airbnb/javascript

Et dans d'autres langues :

• German: timofurrer/javascript-style-guide
• Japanese: mitsuruog/javacript-style-guide
• Brazilian Portuguese: armoucar/javascript-style-guide
• Chinese(Traditional): jigsawye/javascript
• Chinese(Simplified): adamlu/javascript-style-guide
• Spanish: paolocarrasco/javascript-style-guide
• Korean: tipjs/javascript-style-guide
• Russian: uprock/javascript
• Bulgarian: borislavvv/javascript
• Catalan: fpmweb/javascript-style-guide
• Polish: mjurczyk/javascript

Le Guide du Guide de Style Javascript

• Référence

Contributeurs

• Voir les Contributeurs

License

(The MIT License)

Copyright (c) 2012 Airbnb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ Revenir en haut

};