Comment optimiser ce code?

Version imprimable

Salut à tous!

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

Code:

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! ;)

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:

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.

Salut,

Voici une autre proposition d'optimisation

Code:

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>

Et une autre, plus flexible et moins obstrusive

Code:

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>

20/07/2007, 14h13
BnA

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

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:

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é. :salut:

20/07/2007, 16h54
marcha

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 ?
20/07/2007, 21h14
Shinuza

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.
21/07/2007, 12h25
marcha

Citation:

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

Citation:

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

Citation:

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.

Citation:

Envoyé par Shinuza

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

Là je te suis pas ?