Discussion :

[tarte-aux-fraises]

Bonjour à tous,
Lors de l'analyse d'un script trouvé sur le web, je suis tombé sur une boucle for vraiment bizarre et j'aimerais avoir votre avis la-dessus.
Je l'ai reproduite exprès pour vous faire un exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<span class="a">Span 1</span>
<span class="b">Span 2</span>
<span class="a">Span 3</span>
 
<script>
function maFonction(obj){
   obj.innerHTML = 'Remplacé';
}
 
for(
   var obj, i=0, spans = Array.prototype.slice.call(document.getElementsByTagName('span'), 0); 
   i<spans.length; 
   obj = spans[i++], obj.className !== 'b' || maFonction(obj)
);
</script>

Je ne sais pas si c'est moi mais je trouve cela vraiment crade et très difficile à comprendre. Ce qui me perturbe c'est que le script entier est très bien écrit et je tombe sur cet immondice Qui me rend perplexe.
Qu'en pensez-vous ?

[bonjourajax]

Le point virgule a la fin sert a rien

[tarte-aux-fraises]

En fait, je voulais savoir ce que vous pensiez de cette boucle, je ne cherche pas une alternative, je sais très bien ce qu'elle fait et comment la simplifier

[danielhagnoul]

Pour moi c'est une complication inutile qui fait mal son travail !

En partant de ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div>
    <span class="c a b">hello</span> mais
    <span class="b">bonjour</span> mais
    <span class="d">Bonsoir</span> mais
    <span class="b a">adieu</span>
</div>

Le code JS :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
const elemsSpan = document.querySelectorAll('span');
 
for (const elemSpan of elemsSpan){
    if (elemSpan.classList.contains('b')) {
        elemSpan.textContent = 'Remplacé';
    }
}

Le code Js doit agir sur tous les cas où la classe b est présente, et on doit obtenir :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div>
    <span class="c a b">Remplacé</span> mais
    <span class="b">Remplacé</span> mais
    <span class="d">Bonsoir</span> mais
    <span class="b a">Remplacé</span>
</div>

[NoSmoking]

Bonjour,
ce qui me pique les yeux c'est cette pseudo optimisation pour faire quoi ... !?! ... c.ier le développeur qui devra reprendre éventuellement le code.

• La boucle for est défini, plus ou moins, comme étant de la forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for (Initialisation; Condition; Expression) {
    Instruction
}

même si elle est conforme tout mettre dans l'expression final m'apparaît comme étant contre productif, lisibilité, maintenance.

• Concernant l'utilisation de Array.prototype.slice.call( elle ne sert à rien, car on peut tout à fait boucle sur une « HTMLCollection ».

• Pourquoi créer une fonction, il aurait du aller au bout de la « logique » en écrivant quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
for(
   var obj, i=0, spans = Array.prototype.slice.call(document.getElementsByTagName('span'), 0); 
   i<spans.length; 
//   obj = spans[i++], obj.className !== 'b' || maFonction(obj)
   obj = spans[i++], obj.className !== 'b' || (obj.innerHTML = 'Remplacé')
);

• Même si l'on peut comprendre la non utilisation d'une boucle for .. of, comme indiqué par daniehagnoul, peut être que le script date un peu, je me demande pourquoi ne pas avoir utilisé en lieu et place de getElementsByTagName plutôt un querySelectorAll, disponible depuis quand même pas mal de temps et qui permet de passer un sélecteur CSS qui pourrait même déjà filtrer tes éléments.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const oElems = document.querySelectorAll("span.b");
for (const elem of oElems) {
  elem.textContent = "Remplacé";
}

En gros ce n'est pas ce que je montrerais dans les écoles de développement


EDIT : j'ai oublié de signaler

Le point virgule a la fin sert a rien

Dans cette construction il est indispensable.