Codex

Astuces et codes à emporter.

JS

Bien démarrer en JS.

Mise en page

Suivez le style de formatage utilisé par Prettier (avec les paramètres par défaut).

  • Retrait avec 2 espaces
  • Utilisez des points-virgules (;) à la fin des instructions
  • Utiliser des guillemets doubles pour les chaînes
  • Gardez les accolades ouvrantes ({) sur la ligne courante, avec un espace avant, et fermez les accolades (}) sur une nouvelle ligne
  • Reformater le code JS avec Prettier.
const settings = {
  indentSize: 2,
  semicolons: true
};

console.log(opinion(settings.semicolons));

function opinion(pref) {
  let opinion = "Semicolons are ";
  if (pref === true) {
    opinion += "alright, mate.";
  } else if (pref === false) {
    opinion += "superfluous.";
  } else {
    opinion = "What is a semicolon?";
  }
  return opinion;
}

Commentaires

Utilisez des // ...commentaires sur une seule ligne (...) pour commenter la ligne suivante ou les quelques lignes de code suivantes.
Utilisez un commentaire de style JSDoc (/** ... */) avant une fonction complexe ou un module.

/**
  * Make a header "sticky"
  * (Adds/removes a class when scrolling)
  */
function stickifyHeader(element, activeClass, offset) {
  // 250ms not working when scrolling too quicky
  const latency = 100;
  ...
}

Naming

Il est important de bien nommer les éléments pour savoir si ça se réfère à une classe, à un objet, une fonction...

  • Utiliser les minuscules pour les noms de variables, fonctions, clés d'objet...
  • Utiliser les Majuscules pour les classes et pour les composants de l'interface utilisateur (dans React, Vue.js, etc.).
  • Utilisez des noms descriptifs facilement reconnaissables plutôt que trop génériques.
// Use descriptive names
// Bad naming
const element1 = document.querySelector(…);
const element2 = document.querySelector(…);

// Good naming
const button = document.querySelector(…);
const container = document.querySelector(…);

// For names with 2 or 3 words,
// use lowerCamelCase style
const userSettings = {
  limit: 20,
  showInvisible: false
};

function validateSettings() {
  ...
}

// And UpperCamelCase for classes
class MobileHeader extends React.Component {
  ...
}

Variables globales

Les variables globales d'un script peuvent entrer en conflit avec d'autres scripts de la page, créant des bogues subtils.

  • Évitez de créer des variables globales; utiliser le modèle IIFE ou les modules ES6 pour isoler les variables
  • Si vous devez définir un paramètre pour un script dans votre code HTML, utilisez des attributs de données
  • Les variables et l' windowobjet
  • Dans les pages Web, les variables globales sont «hébergées» par l' windowobjet. Cela signifie qu'une variable globale myVarest également accessible à l'adresse window.myVar.

Les variables deviennent globales lorsque :

  • Assigner explicitement : window.myVar = "hello";
  • Déclarer une variable au niveau supérieur d'un script

Portée des variables :

  • var hello = "hello"; sera accessible dans le DOM
  • let hello = "hello"; sera accessible uniquement dans la boucle avec possibilitée de réaffectation de valeur
  • const hello = "hello"; sera accessible uniquement dans la boucle sans possibilitée de réaffectation de valeur

Article connexe : Portée des variables.

// top level variables are global
var count = 50;
console.log(count); // 50
console.log(window.count); // 50

// variables in functions are not,
// UNLESS you forget the var keyword
function showCookieBanner() {
  var banner = document.querySelector(...);
  visible = !banner.hidden;
}
<!-- using data attributes for settings -->
<scripti>var sliderItems = 2;</script>
<div class="Slider" data-items="2">
  ...
</div>

Débogage

  • Dans les outils de développement du navigateur, utiliser la console pour débuguer le JS («Sources» dans Chrome, «Debugger» dans Firefox)
  • Définir des points d'arrêt dans le code JS
function potentiallyBuggyCode() {
  ...
  // don’t forget to remove this statement
  console.log();
  alert('');
  debugger;
}

Coercition de type

JavaScript peut convertir automatiquement une valeur d'un type à un autre (par exemple, d'une chaîne à un nombre) :

  • Lors de l' écriture if (myVar) (ou en utilisant des opérateurs comme ?, !, || et &&), JS convertit la valeur à une valeur booléenne (true ou false)
  • Lorsque l'on compare deux valeurs avec x == y, x != y, x < y et x > y, une conversion de type peut se produire si les valeurs ont des types différents

Conversion en booléen

Les valeurs suivantes se convertissent à false: 0 et NaN, la chaîne vide "", undefined, null et false. Tout le reste est converti en true, y compris les objets et les tableaux vides !

  • Soyez prudent avec if (myVar);. Essayer d'écrire une vérification plus précise si possible
  • Pour les tableaux et certains types d'objets, vous devrez peut-être vérifier myVar.length

Comparer des valeurs

  • Préférez les opérateurs d'égalité et d'inégalité stricts (x === y, x !== y)
  • Évitez == et != (bien que cela puisse parfois être utile, par exemple myVar != null vérifie si la valeur est différente de null et undefined)

Le mot clé This

Dans une fonction, le mot-clé this peut faire référence à différentes choses selon la façon dont la fonction est appelée. Il est souvent préférable de passer explicitement des paramètres à une fonction.

  • Lorsque vous travaillez avec des classes (par exemple avec des bibliothèques qui utilisent beaucoup les classes et this telles que React ou Vue.js), utilisez le mot-clé this.
  • Sinon, essayez de l'éviter.

Avec jQuery

Certaines méthodes jQuery modifient la valeur de this dans la fonction de rappel par l'élément HTML actuel de la boucle. Essayez d'utiliser les arguments de la fonction à la place .$(x).each(...) $(x).on(...)this

$('p').each(function(index, element) {
  // avoid 'this', prefer the 'element' argument
  console.log(this === element);
});

$('a').on('click', function(event) {
  // avoid 'this', prefer 'event.currentTarget'
  console.log(this === event.currentTarget);
});