Optimisation de script jquery

Version imprimable

Bonjour,

Je débute avec jquery et j'ai créé un code qui fonctionne mais qui à mon avis n'est pas optimisé, j'aurais aimé avoir votre avis.

J'ai une carte de France avec des zones réactives : #z1, #z2, #z3, ..., #z10

J'ai plusieurs div : #x1, #x2, ...#x10.
contenant des informations sur les commerciaux :

#x1 = M Dupond
#x2 = M Durand
...

Au survol de la zone #z1, l'information du commercial contenu dans #x1 s'affiche dans une boîte de dialogue jquery UI

Le problème c'est que j'ai créé autant de fonctions que j'ai de zones, je me demandait si je n'aurais pas pu faire cela autrement

Auriez-vous une idée pour optimiser tout cela

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
 
$(document).ready(function() {
	/* declaration des div qui seront des boites de dialogue*/
	$( "#x1, #x2, #x3, #x4, #x5, #x6, #x7, #x8, #x9, #x10" ).dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade',
	});
 
 
 
	$( "#z1" ).hover(
		function(e) {
			$( "#x1" ).dialog( "open" );
			// je masque les autres malgré tout car des fois il y a une latence et on a plusieurs boites de dialogue affichées simultanemnt
			$( "#x2, #x3, #x4, #x5, #x6, #x7, #x8, #x9, #x10" ).dialog( "close" );
 
			// recuperation des coordonnees de la souris et de la boite pour afficher au bon endroit sur la carte
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x1" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x1" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x1" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
 
 
			return false;
		},
		function(){
		$( "#x1" ).dialog( "close" );
		}
	);
 
	$( "#z2, #z2b" ).hover(
		function(e) {
			$( "#x2" ).dialog( "open" );
			$( "#x1, #x3, #x4, #x5, #x6, #x7, #x8, #x9, #x10" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x2" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x2" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x2" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
 
		return false;
		},
		function(){
		$( "#x2" ).dialog( "close" );
		}
	);
 
	$( "#z3" ).hover(
		function(e) {
			$( "#x3" ).dialog( "open" );
			$( "#x2, #x1, #x4, #x5, #x6, #x7, #x8, #x9, #x10" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x3" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x3" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x3" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
 
		return false;
		},
		function(){
		$( "#x3" ).dialog( "close" );
		}
	);
 
	$( "#z4" ).hover(
		function(e) {
			$( "#x4" ).dialog( "open" );
			$( "#x2, #x3, #x1, #x5, #x6, #x7, #x8, #x9, #x10" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x4" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x4" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x4" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
		return false;
		},
		function(){
		$( "#x4" ).dialog( "close" );
		}
	);
 
	$( "#z5" ).hover(
		function(e) {
			$( "#x5" ).dialog( "open" );
			$( "#x2, #x3, #x4, #x1, #x6, #x7, #x8, #x9, #x10" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x5" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x5" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x5" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
		return false;
		},
		function(){
		$( "#x5" ).dialog( "close" );
		}
	);
 
	$( "#z6" ).hover(
		function(e) {
			$( "#x6" ).dialog( "open" );
			$( "#x2, #x3, #x4, #x5, #x1, #x7, #x8, #x9, #x10" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x6" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x6" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x6" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
		return false;
		},
		function(){
		$( "#x6" ).dialog( "close" );
		}
	);
 
	$( "#z7" ).hover(
		function(e) {
			$( "#x7" ).dialog( "open" );
			$( "#x2, #x3, #x4, #x5, #x6, #x1, #x8, #x9, #x10" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x7" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x7" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x7" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
		return false;
		},
		function(){
		$( "#x7" ).dialog( "close" );
		}
	);
 
	$( "#z8" ).hover(
		function(e) {
			$( "#x8" ).dialog( "open" );
			$( "#x2, #x3, #x4, #x5, #x6, #x7, #x1, #x9, #x10" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x8" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x8" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x8" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
		return false;
		},
		function(){
		$( "#x8" ).dialog( "close" );
		}
	);
 
	$( "#z9, #z9b" ).hover(
		function(e) {
			$( "#x9" ).dialog( "open" );
			$( "#x2, #x3, #x4, #x5, #x6, #x7, #x8, #x1, #x10" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x9" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x9" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x9" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
		return false;
		},
		function(){
		$( "#x9" ).dialog( "close" );
		}
	);
 
	$( "#z10" ).hover(
		function(e) {
			$( "#x10" ).dialog( "open" );
			$( "#x2, #x3, #x4, #x5, #x6, #x7, #x8, #x9, #x1" ).dialog( "close" );
 
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x10" ).parent(".ui-dialog").css('left');
			var boitey = $( "#x10" ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x10" ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
		return false;
		},
		function(){
		$( "#x10" ).dialog( "close" );
		}
	);
 
 
	});

Conseils d'optimisation : commence par mettre en cache tes sélecteurs. Au moins tu ne feras pas pleurer ton navigateur. Comment faire dans ton cas ?
Code:

1 2 3 var $x1 = $( "#x1" ); [...] $x1.dialog( "open" );
Rien qu'avez ça, chaque appel de ce genre remplacé économise 16% de temps. (cf slide 39 http://addyosmani.com/jqprovenperformance/ )

Sinon pour te simplifier la vie. Tu crées une fonction unique qui contient l'essentiel du code que tu veux exécuter à chaque fois. Avec un paramètre qui correspond à l'id du truc traité. En gros, pour résumer :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function tonBoulot (id) { $( "#x" + id ).dialog( "open" ); for (i = 2; i < 11; i++) { if(i !== id) { $( "#x" + i ).dialog( "close" ); } } } $( "#z6" ).hover( function(e) { tonBoulot(6); } } $( "#z7" ).hover( function(e) { tonBoulot(7); } }
Et encore, je te l'ai codé comme un porc, ça aurait pu être encore plus simplifié. Mais j'ai la flemme là

29/11/2011, 22h42
danielhagnoul

Bonsoir

Dans ce genre de cas, je préfère un seul dialogue, il suffit d'adapter son titre et son contenu avant de l'ouvrir.

Vous pouvez stocker les données dans un objet ou dans un array.

Merci pour vos réponses

>> gwinyam
Je vais tester ceci, effectivement ça sera plus simple. Merci pour le conseil des variables, je ne savais pas que ça économisait de la ressource
Dois je faire :

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
 
	$x1.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x2.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
//ou
	($x1, $x2, $xn).dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});

>>danielhagnoul
Ta solution est une bonne idée en plus je n'aurais plus de problème d'affichages simultané de plusieurs boîtes de dialogue.
Par contre je ne sais pas trop comment faire, car j'utilise le CMS Drupal pour générer mes div contenant les informations des commerciaux.

Est-ce que je dois masquer les div générées par le cms et récupérer le contenu via jquery que j'injecterais dans un tableau ?
Un truc du genre

Code:

1
2
3
4
5
 
var tabCommerciaux=array();
$( 'div#mescommerciaux' ).find('div.commercial').each(function(){
    //comment j'ajoute au tableau ?
});

Voici la nouvelle version de mon code, dois-je passer par les variables pour les zones $('#z1') ?
Qu'en pensez-vous ?

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
 
(function ($) {
	$(document).ready(function() {
 
	var $x1 = $( "#x1" );
	var $x2 = $( "#x2" );
	var $x3 = $( "#x3" );
	var $x4 = $( "#x4" );
	var $x5 = $( "#x5" );
	var $x6 = $( "#x6" );
	var $x7 = $( "#x7" );
	var $x8 = $( "#x8" );
	var $x9 = $( "#x9" );
	var $x10 = $( "#x10" );
 
	/* declaration des div qui seront des boites de dialogue*/
	$x1.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x2.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x3.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x4.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x5.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x6.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x7.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x8.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x9.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
	$x10.dialog({
		autoOpen: false,
		resizable:false,
		width:195,
		height:70,
		show:'fade'
	});
 
 
	function affichage (id, e) {
	$( "#x" + id ).dialog( "open" );
		for (i = 1; i < 11; i++) {
			// fermeture des autres boites
			if(i !== id) {
				$( "#x" + i ).dialog( "close" );
			}
 
			//recup coordonnees
			var sourisx = e.pageX;
			var sourisy = e.pageY;
 
			var boitex = $( "#x"+id ).parent(".ui-dialog").css('left');
			var boitey = $( "#x"+id ).parent(".ui-dialog").css('top');
 
			if((boitex>(sourisx-50) && boitex<(sourisx+50)) || (boitey>(sourisy-50) && boitey<(sourisy+50)) ){
				return false
			} else {
				$( "#x"+id ).dialog( "option", "position", [ sourisx, sourisy ] );
			}
 
 
		}
	}
 
 
 
	$( "#z1" ).hover(
		function (e) {
			affichage(1, e);
		}
		,		
		function(){
		$x1.dialog( "close" );
		}
	);
 
	$( "#z2, #z2b" ).hover(
		function (e) {
			affichage(2, e);
		}
		,		
		function(){
		$x2.dialog( "close" );
		}
	);
 
	$( "#z3" ).hover(
		function (e) {
			affichage(3, e);
		}
		,	
		function(){
		$x3.dialog( "close" );
		}
	);
 
	$( "#z4" ).hover(
		function (e) {
			affichage(4, e);
		}
		,	
		function(){
		$x4.dialog( "close" );
		}
	);
 
	$( "#z5" ).hover(
		function (e) {
			affichage(5, e);
		}
		,	
		function(){
		$x5.dialog( "close" );
		}
	);
 
	$( "#z6" ).hover(
		function (e) {
			affichage(6, e);
		}
		,	
		function(){
		$x6.dialog( "close" );
		}
	);
 
	$( "#z7" ).hover(
		function (e) {
			affichage(7, e);
		}
		,	
		function(){
		$x7.dialog( "close" );
		}
	);
 
	$( "#z8" ).hover(
		function (e) {
			affichage(8, e);
		}
		,	
		function(){
		$x8.dialog( "close" );
		}
	);
 
	$( "#z9, #z9b" ).hover(
		function (e) {
			affichage(9, e);
		}
		,	
		function(){
		$x9.dialog( "close" );
		}
	);
 
	$( "#z10" ).hover(
		function (e) {
			affichage(10, e);
		}
		,	
		function(){
		$x10.dialog( "close" );
		}
	);
 
 
	});
}(jQuery));

30/11/2011, 20h10
danielhagnoul
Bonsoir

En principe, le code suivant doit vous donner un array (voir http://api.jquery.com/map/) de "html" :
Code:

1 2 3 var tabCommerciaux = $( '#mescommerciaux' ).find('div.commercial').map(function(index, domElement){ return $(domElement).html(); }).get();
Citation:

Voici la nouvelle version de mon code, dois-je passer par les variables pour les zones $('#z1') ?

Il est recommandé d'utiliser le code var jObj = $(selector); lorsque l'on utilise plusieurs fois jObj dans son code. Il est aussi recommandé, le traitement par le navigateur est plus rapide, de n'avoir qu'une seule déclaration "var". Exemple :
Code:

1 2 3 4 5 6 7 8 9 var x = 2, y = 3, z = 4, maFunc = function(){ ... }, monObj = { ... };
01/12/2011, 10h02
selinav

merci pour tous vos conseils, pour la fonction map je ne connaissais pas je vais me pencher sur la question.