Comment optimiser ce code?

**BnA** · 20/07/2007, 12h04

Salut à tous!

Je viens de pondre un (tout) petit script permettant de switcher entre 3 DIV, dont voici le code complet...

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<html>
<head>
<style type="text/css">
#part{
display:block;
width:300px;
height:300px;
background-color:#CCCC33;
}
 
#corp{
display:none;
width:300px;
height:300px;
background-color:#0099FF;
}
 
#inst{
display:none;
width:300px;
height:300px;
background-color:#66CCFF;
}
 
</style>
<script type="text/javascript">
 
function switchPart() {
	if (
		document.getElementById("part").style.display == "block") {
	}
	else {
		document.getElementById("inst").style.display = "none";
		document.getElementById("corp").style.display = "none";
		document.getElementById("part").style.display = "block";
	}
}
 
function switchCorp() {
	if (
		document.getElementById("corp").style.display == "block") {
	}
	else {
		document.getElementById("inst").style.display = "none";
		document.getElementById("corp").style.display = "block";
		document.getElementById("part").style.display = "none";
	}
}
 
function switchInst() {
 
	if (
		document.getElementById("inst").style.display == "block") {
	}
	else {
		document.getElementById("inst").style.display = "block";
		document.getElementById("corp").style.display = "none";
		document.getElementById("part").style.display = "none";
	}
}
</script>
</head>
<body>
	<div id="onglets">
	  <div><a href="javascript:switchPart();"> Tarifs particuliers</a></div>
	  <div><a href="javascript:switchCorp();"> Tarifs Entreprises</a></div>
	  <div><a href="javascript:switchInst();"> Tarifs Education</a></div>
	</div>
	<div id="part"> DIV PARTICULIERS </div>
	<div id="corp"> DIV CORPORATE </div>
	<div id="inst"> DIV INSTITUTIONS </div>
</body>
</html>

Comment vous pouvez le voir, j'ai 3 function JavaScript, alors que j'effectue les mêmes actions sur les 3 DIV.

Alors je me demandais... Etant une grosse quiche en JavaScript (la preuve avec ce code simple en forme d'usine à gaz), il y aurait-t-il une bonne âme capable de m'expliquer (au pire) ou de m'optimiser (au mieux) ce petit code?

Merci d'avance, quelque soit la forme de votre contribution!

**Djakisback** · 20/07/2007, 13h09

Salut,
t'as plusieurs solutions, une avec une variable globale, à mettre en fin de page, ou dans le onload du body pour les 4res lignes :

Code :

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
17
<script>
var divs = new Array();
divs[0] = document.getElementById("part");
divs[1] = document.getElementById("corp");
divs[2] = document.getElementById("inst");
 
function show(divId)	{
	for(i = 0; i < divs.length; i++)	{
		if(divs[i].id == divId)	{
			divs[i].style.display = "block";
		}
		else	{
			divs[i].style.display = "none";
		}
	}
}
</script>

Sinon si t'englobes tes 3 div dans un autre div, tu pourras y accéder sans passer par un tableau ou tu peux aussi parcourir tous les div de la page. Niveau de la vitesse ta solution doit être la plus rapide.

**marcha** · 20/07/2007, 13h23

Salut,

Voici une autre proposition d'optimisation

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<html>
<head>
<style type="text/css">
#part, #corp, #inst {
	display: none;
	width: 300px;
	height: 300px;
}
#part{ background-color:#CCCC33; } 
#corp { background-color:#0099FF; }
#inst{ background-color:#66CCFF; }
 
</style>
<script type="text/javascript">
 
var divs = "part,corp,inst".split(',');
 
function show(id) {
	for(i in divs) document.getElementById(divs[i]).style.display = divs[i]==id ? 'block' : 'none';
}
 
window.onload = function() { show('part'); }
 
</script>
</head>
<body>
	<div id="onglets">
	  <div><a href="javascript:show('part');"> Tarifs particuliers</a></div>
	  <div><a href="javascript:show('corp');"> Tarifs Entreprises</a></div>
	  <div><a href="javascript:show('inst');"> Tarifs Education</a></div>
	</div>
	<div id="part"> DIV PARTICULIERS </div>
	<div id="corp"> DIV CORPORATE </div>
	<div id="inst"> DIV INSTITUTIONS </div>
</body>
</html>

**marcha** · 20/07/2007, 13h58

Et une autre, plus flexible et moins obstrusive

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<html>
<head>
<style type="text/css">
#boites div {
	display: none;
	width: 300px;
	height: 300px;
}
#onglets div {
	text-decoration: underline;
	color: blue;
}
</style>
<script type="text/javascript">
 
function getChilds(id) {
	var nodes = document.getElementById(id).childNodes;
	var childs = new Array();
	for(var i=0;i<nodes.length;i++) if(nodes[i].nodeName=='DIV') childs.push(nodes[i]);
	return childs;
}
 
var last;
 
function showBox() {
	last.style.display = 'none'; 
	this.boite.style.display = 'block';
	last = this.boite;
}
 
window.onload = function() { 
	var onglets = getChilds('onglets');
	var boites = getChilds('boites');
	for(var i=0;i<onglets.length;i++) {
		onglets[i].onclick = showBox;
		onglets[i].boite = boites[i]; // sauve la référence de la boite dans le DOM
	}
	last = boites[0];
	last.style.display = 'block';
}
 
</script>
</head>
<body>
	<div id="onglets">
	    <div>Tarifs particuliers</div>
	    <div>Tarifs Entreprises</div>
	    <div>Tarifs Education</div>
	</div>
	<div id='boites'>
	    <div style='background-color: #CCCC33'> DIV PARTICULIERS </div>
	    <div style='background-color: #0099FF'> DIV CORPORATE </div>
	    <div style='background-color: #66CCFF'> DIV INSTITUTIONS </div>
	</div>
</body>
</html>

**BnA** · 20/07/2007, 14h13

Ok ok, merci beaucoup, je vais tester tout ça! Merci!

**Shinuza** · 20/07/2007, 16h05

Comme je disais donc :

C'est moche.

-On itère surtout pas sur un tableau avec (for in)
-On ne déclare pas une variable dans la boucle (for)
-On se base sur des élements concrets.

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<html>
<head>
<style type="text/css">
#part{
display:block;
width:300px;
height:300px;
background-color:#CCCC33;
}
 
#corp{
display:none;
width:300px;
height:300px;
background-color:#0099FF;
}
 
#inst{
display:none;
width:300px;
height:300px;
background-color:#66CCFF;
}
 
</style>
<script type="text/javascript">
window.onload = function() {
	document.getId = document.getElementById;
	var i,
		j,
		onglets  = document.getId("onglets"),
		content = document.getId("content"),
		switchers = onglets.getElementsByTagName('a');
		boxes = content.getElementsByTagName('div');
 
	for(i=0;i<switchers.length;i+=1) {
		switchers[i].onclick = function(e) { //Au click sur un lien...
			e = e || window.event;
			for(j=0;j<boxes.length;j+=1){
				boxes[j].style.display='none'; //On cache toutes les div
			}
			document.getId(this.hash.substring(1)).style.display='block'; //On affiche celle qui correspond au # lien cliqué, on fait ainsi la même chose qu'avec l'ancre
			(e.preventDefault) ? e.preventDefault() : e.returnValue=false ; //On evite le saut vers la div en question
		}
	}
}
</script>
</head>
<body>
	<div id="onglets">
	  <div><a href="#part"> Tarifs particuliers</a></div>
	  <div><a href="#corp"> Tarifs Entreprises</a></div>
	  <div><a href="#inst"> Tarifs Education</a></div>
	</div>
	<div id="content">
		<div id="part"> DIV PARTICULIERS </div>
		<div id="corp"> DIV CORPORATE </div>
		<div id="inst"> DIV INSTITUTIONS </div>
	</div>
</body>
</html>

Ici si tu veux faire la correspondance entre un lien et une div, il te suffit de le rajouter comme en html.

Dans un deuxième temps, je pense que tu devrais masquer les div uniquement si l'utilisateur à le js activé.

**marcha** · 20/07/2007, 16h54

Salut,

l'utilisation des ancres et des ids c'est bien pour l'accessibilité et c'est bien
si javascript est désactivé. mais ça t'oblige a éviter la propagation de l'événement,
ce que tu as fait à juste titre.

Fait attention tout de même au fait que ton getElementByTagName va traiter
aussi les div imbriqués dans les boites.

Je ne suis pas d'accord avec tes deux afirmations:

-On itère surtout pas sur un tableau avec (for in)
-On ne déclare pas une variable dans la boucle (for)

Tu peux justifier ?

**Shinuza** · 20/07/2007, 21h14

Ce n'est pas la propagation de j'annule, mais l'effet par default du click sur le lien.

-On itère surtout pas sur un tableau avec (for in)

Pour la bonne et simple raison que si je modifie Array (le constructeur), lorsque tu utiliseras (for i in) tu itereras sur chaque méthode ou propriété que j'ai ajouté.

-On ne déclare pas une variable dans la boucle (for)

C'est un bon moyen de confondre les itérateurs sur des nested iterations, en plus de ne pas être clair, on pourrait croire que (for) a son propre scope, ce qui est totalement faux.

**marcha** · 21/07/2007, 12h25

Envoyé par Shinuza

Ce n'est pas la propagation de j'annule, mais l'effet par default du click sur le lien.

En effet, pardon

Envoyé par Shinuza

-On itère surtout pas sur un tableau avec (for in)
Pour la bonne et simple raison que si je modifie Array (le constructeur), lorsque tu utiliseras (for i in) tu itereras sur chaque méthode ou propriété que j'ai ajouté.

Oui c'est prudent

Envoyé par Shinuza

-On ne déclare pas une variable dans la boucle (for)
on pourrait croire que (for) a son propre scope, ce qui est totalement faux.

Ok pour le scope, mais moi je préfère la déclarer dedans car ça t'évite
de "perdre / oublier" ta déclaration quand tu manipule ton code.

Envoyé par Shinuza

C'est un bon moyen de confondre les itérateurs sur des nested iterations

Là je te suis pas ?