Bloguons JavaScript

Parce que je me dis tout le temps : « Faut que j'écrive ça quelque part. »
Home

Aller au menu | Aller à la recherche

Bonnes pratiques

Fil des billets

"var" n'est pas obsolète, mais c'est tout comme

, 09:15

En JavaScript, le mot-clé var était un mal nécessaire, avant 2015. C'était le seul mot-clé à utiliser pour restreindre la portée des variables. La norme ES2015 (ou ES6) a introduit par la suite const et let, qui sont aujourd'hui beaucoup plus logiques, tellement que cela rend var quasiment inutile.

Lire la suite...

Le JavaScript doit rester du JavaScript

, 15:00

Le titre est peut-être vague. Je vais essayer de phraser ça autrement : Le JavaScript ne devrait jamais contenir d'éléments d'autres langages. Dans le cas contraire, cela devient difficile pour tout validateur de ce monde (jsLint, par exemple) de faire son travail. Et ça permet de gagner en robustesse et en fiabilité.

Lire la suite...

Avertir les gens du non-support de leur navigateur

, 14:31

C'est vrai, c'est banal, mais ça peut sauver beaucoup de temps de débogage : si on met du JavaScript dans notre site, c'est très important de savoir quels navigateurs on veut supporter.

Lire la suite...

Éviter le mot-clé « this »

, 21:37

Le mot-clé this1 est un raccourci parfois utile lorsqu'on écrit du nouveau code JavaScript. Ce mot-clé a cependant la particularité de se comporter différemment du this en C, C++ ou Java. Il se comporte même différemment selon la version JavaScript ou même si on est en mode strict ou pas.

C'est pourquoi je déteste ce mot-clé. Je fais tout en mon possible pour éviter d'y avoir recours.

Mon argumentaire tient toujours à la maintenance du code. C'est à dire d'être capable de relire mon code six mois plus tard et le comprendre avec le moins d’ambiguïtés possibles.

Je me suis déjà retrouvé avec un code semblable:

/* Considérant <button id='allo'>Allo</button> */
const objet = {
    f0 : 'allo',
    f1 : function() {
        document.getElementById(this.f0).addEventListener('click',objet.f2);
    },
    f2 : function() {
        console.log(this.id)
    }
}
objet.f1();

Si on exécute ce code, il va fonctionner, mais le this dans f1() n'est pas le même this que dans f2(). Dans f1(), this réfère à la constante objet, alors que dans f2(), this réfère au bouton #allo.

On pourrait faire la même action en évitant ce mot-clé maudit.

/* Considérant <button id='allo'>Allo</button> */
const objet = {
    f0 : 'allo',
    f1 : () => {
        document.getElementById(objet.f0).addEventListener('click',objet.f2);
    },
    f2 : e => {
        console.log(e.target.id)
    }
}
objet.f1();

Ça fonctionne aussi. this est éliminé. Le code est un peu plus compréhensible. Cependant, la méthode f2(), à moins qu'elle soit appelée ailleurs, devrait être déplacée à l'intérieur de f1(), question d'éviter qu'elle soit visible de l'extérieur de l'objet.

/* Considérant <button id='allo'>Allo</button> */
const objet = {
    f0 : 'allo',
    f1 : () => {
        document.getElementById(objet.f0).addEventListener('click', e => {
            console.log(e.target.id)
        });
    }
}
objet.f1();

Curieusement, ça fait même une méthode plus courte.

Ne pas hésiter à nommer les choses

Il est toujours mieux, pour le suivi et surtout le débogage, de nommer ce sur quoi on travaille. Je veux dire par là de créer des variables pour retenir sa définition.

/* Considérant <button id='allo'>Allo</button> */
document.getElementById('allo').addEventListener('click', e => {
    console.log(e.target.id)
});

...est bien, et va écrire le mot « allo » dans la console, si on a l'assurance que le bouton ne contient que le mot Allo.

/* Considérant <button id='allo'><span>Allo</span></button> */
document.getElementById('allo').addEventListener('click', e => {
    console.log(e.target.id)
});

... va sûrement planter, car e.target risque fort de pointer vers le span plutôt que sur le button.

const allo = document.getElementById('allo');
allo.addEventListener('click', () => {
    console.log(allo.id)
});

... ne plantera plus. Non seulement il ne plantera plus, mais en plus, à la relecture, on comprend tout de suite ce qu'on veut faire afficher dans la console.

Je ferais même un petit ajout pour éviter des surprises plus tard:

const allo = document.getElementById('allo');
if (allo) allo.addEventListener('click', () => {
    console.log(allo.id)
});

... comme ça, si jamais une modification plus tard ferait disparaître le bouton #allo, ça ne fera pas planter le code.