Awesome
Airbnb JavaScript Guide de Style() {
Une approche plus ou moins raisonnable à Javascript
<a name='TOC'>Table des Matières</a>
- Types
- Objets
- Tableaux
- Chaines de caractères
- Fonctions
- Propriétés
- Variables
- Hissage
- Expressions conditionnelles & Égalité
- Blocs
- Commentaires
- Espaces
- Virgules
- Point-virgules
- Conversion des types & Contraintes
- Conventions de nommage
- Accesseurs
- Constructeurs
- Évènements
- Modules
- jQuery
- Compatibilité ES5
- Test
- Performances
- Sources
- Dans la Nature
- Traductions
- Le Guide au Guide de Style Javascript
- Contributeurs
- License
<a name='types'>Types</a>
-
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
<a name='objects'>Objets</a>
-
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' };
<a name='arrays'>Tableaux</a>
-
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); ... }
<a name='strings'>Chaînes de caractères</a>
-
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}'`;
```
<a name='functions'>Fonctions</a>
-
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'objetarguments
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... }
<a name='properties'>Propriétés</a>
-
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');
<a name='variables'>Variables</a>
-
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; }
<a name='hoisting'>Hissage</a>
-
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
<a name='conditionals'>Expressions conditionnelles & Égalité</a>
-
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
<a name='blocks'>Blocs</a>
-
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; }
<a name='comments'>Commentaires</a>
-
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
ouTODO
(et pasACORRIGER
ouAFAIRE
, 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 sontFIXME -- need to figure this out
ouTODO -- 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; }
<a name='whitespace'>Espaces</a>
-
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);
<a name='commas'>Virgules</a>
-
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'
];
```
<a name='semicolons'>Point-virgules</a>
-
Yup.
// pas bien (function() { var name = 'Skywalker' return name })() // bien (function() { var name = 'Skywalker'; return name; })(); // bien ;(function() { var name = 'Skywalker'; return name; })();
<a name='type-coercion'>Conversion de types & Contraintes</a>
-
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;
<a name='nantions'>Conventions de nommage</a>
-
É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); };
<a name='accessors'>Accesseurs</a>
-
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]; };
<a name='constructors'>Constructeurs</a>
-
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(); };
<a name='events'>Évènements</a>
-
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 });
<a name='modules'>Modules</a>
-
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);
<a name='jquery'>jQuery</a>
-
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');
<a name='es5'>Compatibilité ECMAScript 5</a>
- Réferrez vous à la table de compatibilité ES5 de Kangax.
<a name='testing'>Test</a>
-
Yup.
function() { return true; }
<a name='performance'>Performances</a>
- 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...
<a name='resources'>Sources</a>
Lisez ceci
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
<a name='in-the-wild'>Dans la Nature</a>
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
<a name='translation'>Traductions</a>
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
<a name='guide-guide'>Le Guide du Guide de Style Javascript</a>
<a name='authors'>Contributeurs</a>
<a name='license'>License</a>
(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.