Bloguons JavaScript

Pour ce faire, je vais énumérer quelques principes de base d'un projet web incluant du JavaScript dans son développement :

Réduire au minimum le code JavaScript dans une balise <script>.

Idéalement, l'éliminer complètement, mais bon, quand il n'y a que trois lignes de code, mettre juste ça dans un fichier .js fait en sorte qu'on vous traite de zélé. Comme disait ma mère, use your head, not your feet. Non, elle n'est pas anglophone. Moi non plus; il a fallu qu'elle me l'explique...

Donc on préfère <script src='a.js'></script> à <script>// 'Du script ici';</script>. Pas compliqué...

Les valeurs arbitraires doivent être dans le HTML.

Un exemple pour rendre ça clair rapidement, avec PHP (ça pourrait être plein d'autres langages côté serveur mais je vais prendre lui, c'est assez clair, il me semble) :

Exemple 1

<?php $nom = 'Benoit' ?>

<div id="affiche">
    Bonjour à <span>vous</span>!
</div>

<script>
    const aff = document.getElementById('affiche');
    aff.querySelector('span').innerHTML="<?= $nom ?>";
</script>

Mettre du PHP dans du Javascript, c'est mal. Voici ma correction :

Exemple 2

<?php $nom = 'Benoit' ?>

<div id="affiche" data-nom="<?= $nom ?>">
    Bonjour à <span>vous</span>!
</div>

<script>
    const aff = document.getElementById('affiche');
    aff.querySelector('span').innerHTML = aff.dataset['nom'];
</script>

Je sais, mon exemple trahit ma première règle. Je suis comme ça, je me contredis souvent, vous en parlerez à mes ex.

Cependant, on s'entend que le JavaScript de l'exemple 2 pourrait être copié-collé dans un fichier .js à part, ce qui n'est pas le cas de l'exemple 1. Donc, pour passer des valeurs du serveur au JavaScript, utilisez votre HTML.

Ne pas écrire de code HTML dans le JavaScript

Il arrive souvent que lors de mes revues de code de mes collègues, je vois des chaînes de caractères de plusieurs lignes de code HTML, du style const a = "<div class='f-ligne'><div class='col1'>Titre</div><div class='col2'>Année</div></div>". Très très mauvais. Encore une fois, mettez le contenu de cette chaîne de caractères dans un div caché, pour par la suite aller le chercher avec JavaScript const a = document.getElementById('modele').innerHTML.

C'est que par la suite, dans 6 mois, lorsque vous reviendrez voir votre code, si votre feuille de style inclut .f-ligne et que vous vous demandez où utilise-t-on cette classe, votre premier réflexe ne sera pas d'aller chercher dans votre JavaScript. Et quand vous aurez trouvé cette bourde après deux heures de recherche, vous allez vous détester, vous trouver que vous êtes un piètre programmeur, en perdre l'appétit, mal dormir, boire trop de café, vous laisser tenter par les pilules qui font rire... Une descente aux enfers est si vite arrivée.

Le but poursuivi, c'est la robustesse

Quand le code JavaScript est dans des fichiers .js (ou .mjs) dédiés à cette fin, c'est plus facile à déboguer, c'est plus facile à retravailler, c'est plus facile à refactoriser.

C'est plus facile quand dans le JavaScript, il n'y a que du JavaScript.