IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Améliorons la robustesse et la sécurité de nos objets

Adapter jQuery à vos besoins, niveau 3

Publié le 25 mars 2012 et mis à jour le 25 mars 2012


 

III. Impact sur l'espace de nom dvjh
III-A. Nouvelle manière de l'écrire
III-B. Adapter jQuery à vos besoin, niveau 1
III-C. Adapter jQuery à vos besoins, niveau 2


III. Impact sur l'espace de nom dvjh


III-A. Nouvelle manière de l'écrire

Nous améliorons beaucoup la robustesse et la sécurité en rendant dvjh.$ utilisable, mais non modifiable. Nous améliorons les possibilités de débogage avec la méthode dvjh.debugfn().
L'espace de noms dvjh :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
"use strict"; 
 
var dvjh = ( function( $ ){ 
 
	return Object.create( {}, { 
		"$" : { 
			value : $, 
			enumerable : true 
		}, 
		"debugfn" : { 
			value : function(){ 
				console.log( Object.getOwnPropertyNames( $.fn ) ); 
			} 
		} 
	}); 
 
})( jQuery.sub() );

III-B. Adapter jQuery à vos besoin, niveau 1

L'impact sur le code existant se limite à la nouvelle manière d'écrire l'espace de nom.

warning On peut utiliser le système objet d'ES5 à l'intérieur d'un plugin, mais pas pour le plugin lui-même, il doit rester compatible avec la méthode $.extend() de jQuery.
info L'usage du nouveau système pour l'écriture d'un objet options peut sembler inutile, puisque les descripteurs des propriétés modifiables doivent être true, mais cet objet peut dorénavant avoir des propriétés non énumérables et des propriétés non modifiables.

III-C. Adapter jQuery à vos besoins, niveau 2

Nous souhaitons améliorer la robustesse et la sécurité de l'objet méthodes sans bouleverser son comportement et son utilisation. Nous cacherons et rendrons non modifiables uniquement ce qui doit l'être.
Le fichier dvjhPluginCreate.js :
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.
"use strict"; 
 
/* 
 * Fonction "universelle" pour l'initialisation et l'appel des 
 * méthodes d'un plugin multitâches. 
 * 
 * Ne pas copier-coller ni modifier sans nécessité. 
 */ 
var dvjhPluginCreate = function( objMethods, params ){ 
 
	var args = Array.prototype.slice.call( params ), 
		method = args.shift(); 
	 
	// console.log( "dvjhPluginCreate, arguments : ", objMethods, method, args ); 
 
	if ( ! objMethods ){ 
		$.error( "dvjhPluginCreate : objMethods n'est pas défini !" ); 
	} 
	 
	if ( typeof method === "string" && method.slice( 0, 1 ) === "_" ){ 
		$.error( "dvjhPluginCreate : les propriétés, les méthodes " + 
			"et les objets précédés d'un tiret-bas (underscore) sont privés !" ); 
	} 
	 
	var boolOK, boolInit, boolDestroy, objOpts, jObj, cMethod, cParams, 
		name = objMethods._copyright.objMethodsName; 
	 
	/* 
	 * Attention ! Ici, this c'est l'objet jQuery ! 
	 * 
	 * La valeur de this est particulière, elle 
	 * correspond au sélecteur qui a créé le plugin. 
	 * On ne doit donc jamais écrire $( this ) car 
	 * cette écriture crée un $( $( selecteur ) ) inutile ! 
	 *  
	 * Objet et array : attention chaque instance ($( item ),  
	 * un objet jQuery) doit travailler sur sa copie. 
	 * 
	 * Les options de l'instance sont stockées dans l'instance 
	 * (par data( name )). À l'initialisation, il s'agit d'une 
	 * copie des options par défaut. 
	 */ 
	return this.each( function( i, item ){ 
		boolOK = true; 
		boolInit = false; 
		boolDestroy = false; 
		objOpts = $( item ).data( name ) || null; 
		jObj = $( item ); 
		 
		if ( objOpts == null ){ 
			boolInit = true; 
			jObj.data( name, Object.dvjhClone( objMethods._options ) ); 
			objOpts = jObj.data( name ); 
		} 
		 
		if ( method ){ 
			if ( $.isPlainObject( method ) ){ 
				cMethod = Object.dvjhClone( method ); 
			} else if ( $.isArray( method ) ){ 
				cMethod = method.concat(); 
			} else { 
				cMethod = method; 
			} 
		} 
		 
		cParams = args.concat(); 
		 
		objMethods.options = objOpts; // important ! 
		objMethods.jObj = $( item ); // important ! 
		 
		// debug 
		/* 
		console.log( "dvjhPluginCreate, boolOK : ", boolOK ); 
		console.log( "dvjhPluginCreate, boolInit : ", boolInit ); 
		console.log( "dvjhPluginCreate, jObj : ", jObj ); 
		console.log( "dvjhPluginCreate, objOpts : ", objOpts ); 
		console.log( "dvjhPluginCreate, objMethods.options : ", 
					objMethods.options ); 
		console.log( "dvjhPluginCreate, cMethod, typeof cMethod : ", 
					cMethod, typeof cMethod ); 
		console.log( "dvjhPluginCreate, cParams, $.isArray( cParams ) : ", 
					cParams, $.isArray( cParams ) ); 
		*/ 
		 
		if ( boolInit ){ 
			if ( cMethod === "init" ){ 
				objMethods[ cMethod ]( cParams ); 
			} else if ( $.isPlainObject( cMethod ) || ! cMethod ){ 
				objMethods.init( cMethod, cParams ); 
			} else { 
				/* 
				* cMethod peut contenir un paramètre de n'importe 
				* quel type sauf un objet. Car si le premier argument 
				* est un objet il doit contenir les options de  
				* l'utilisateur. 
				* 
				* On peut passer un autre objet si on passe un objet  
				* anonyme vide comme premier argument, exemple : 
				* jObj.dvjhPlugin( {}, new Date() ); 
				* 
				* On doit construire un nouvel array regroupant le 
				* contenu de cMethod et de l'array cParams. 
				*/ 
				var tab; 
				 
				if ( typeof cMethod === "string" ||  
										typeof cMethod === "number" ){ 
					tab = [ cMethod ]; 
				} else { 
					tab = $.map( cMethod,  
								function( value, key ){ return value; } ); 
				} 
				 
				objMethods.init( {}, $.merge( tab, cParams ) ); 
			} 
		} else { 
			if ( cMethod != "init" && cMethod in objMethods ){ 
			 
				if ( cMethod === "destroy" ){ 
					boolDestroy = true; 
				} 
				 
				objMethods[ cMethod ]( cParams ); 
			} else { 
				boolOK = false; 
			} 
		} 
		 
		jObj.data( name, objMethods.options ); 
		 
		objMethods.options = {}; // important ! 
		objMethods.jObj = null; // important ! 
		 
		objOpts = cMethod = cParams = null; 
		 
		if ( boolDestroy ){ 
			jObj.removeData( name ); 
		} 
		 
		if ( ! boolOK ){ 
			$.error( "dvjhPluginCreate : la méthode " + 
				method + " n'existe pas ou cet élément du DOM " + 
				"a déjà été initialisé !" ); 
		} 
	}); 
};
Le fichier dvjhSquelette.js :
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.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
"use strict"; 
 
var dvjh = ( function( $ ){ 
 
	/* 
	 * dvjhSqueletteMethods est le squelette d'un objet méthodes. 
	 * 
	 * Il contient les méthodes minimales pour la création d'un 
	 * plugin multitâches. 
	 * 
	 * Ne pas modifier le squelette sans nécessité. 
	 * 
	 * On copie-collera le code de cet objet pour créer 
	 * son propre objet méthode. 
	 */ 
	var dvjhSqueletteMethods = Object.create( {}, { 
		"_copyright" : { // informations sur le plugin 
			/* 
			 * La propriété objMethodsName est importante. 
			 * Sa valeur doit être unique, elle est 
			 * utilisée par dvjhPluginCreate et l'objet 
			 * méthodes, elle ne doit jamais être modifiée  
			 * après la mise en production du dvjhPlugin. 
			 */ 
			value : Object.create( {}, { 
				"objMethodsName" : { 
					value : "dvjhSqueletteMethods", 
					enumerate : true 
				}, 
				"auteur" : { 
					value : "Daniel Hagnoul", 
					enumerate : true 
				}, 
				"version" : { 
					value : "1.0.0", 
					enumerate : true 
				}, 
				"date" : { 
					value : "2012-01-13T02:15:29.000+01:00", 
					enumerate : true 
				}, 
				"licence" : { 
					value : "libre de tous droits", 
					enumerate : true 
				} 
			}) 
		}, 
		 
		"_options" : { // les options par défaut 
			/* 
			 * L'option boolDebug doit toujours exister ! 
			 *  
			 * N'oubliez pas de la mettre à false dans la 
			 * version de production de votre plugin. 
			 */ 
			value : { 
				"boolDebug" : true,		 
				"class" : "dvjhClass" 
			}, 
			writable : true, 
			configurable : true 
		}, 
		 
		/* 
		 * Lors du traitement d'une instance (un objet  
		 * jQuery), "jObj" contiendra l'objet jQuery 
		 * et l'objet options contiendra les options de  
		 * cette instance. 
		 * 
		 * C'est la fonction dvjhPluginCreate qui est 
		 * responsable de la gestion de "jObj" et de 
		 * "options". 
		 */ 
		"jObj" : { // l'instance 
			value : null, 
			writable : true 
		}, 
		 
		"options" : { // les options de l'instance 
			value : {}, 
			writable : true, 
			configurable : true 
		}, 
		 
		"init" : { // initialisation du plugin 
			value : function(){ 
				/* 
				 * Ne modifier pas le traitement des arguments 
				 * sans nécessité ! 
				 */ 
				var args = Array.prototype.slice.call( arguments ), 
					param1 = args.shift(), 
					param2 = args.shift(); 
				 
				/* 
				 * Traitement d'un éventuel objet anonyme contenant 
				 * les options de l'utilisateur. 
				 * 
				 * Ne modifier pas ce code sans nécessité ! 
				 */ 
				if ( $.isPlainObject( param1 ) && ! $.isEmptyObject( param1 ) ){ 
					 
					if ( this.options.boolDebug ){ 
						console.log( "init, options de l'utilisateur : ", Object.dvjhClone( param1 ) ); 
					} 
					 
					this.options = Object.dvjhExtend( this.options, param1 ); 
				} 
				 
				/* 
				 * Traitement dans this.jObj d'un éventuel attribut 
				 * data HTML5, data-plugin-options, contenant 
				 * les options de l'utilisateur. 
				 * 
				 * Ne modifier pas ce code sans nécessité ! 
				 */ 
				var dataOptions = this.jObj.data( "pluginOptions" ); 
				  
				if ( $.isPlainObject( dataOptions ) && ! $.isEmptyObject( dataOptions ) ){ 
					 
					if ( this.options.boolDebug ){ 
						console.log( "init, options de l'utilisateur : ", Object.dvjhClone( dataOptions ) ); 
					} 
					 
					 
					this.options = Object.dvjhExtend( this.options, dataOptions ); 
				} 
				 
				/* 
				 * Si votre fonction d'initialisation nécessite des 
				 * arguments, il faut les chercher dans param1 ou 
				 * dans param2. 
				 * 
				 * La méthode init peut recevoir de 0 à 2 arguments. 
				 * 
				 * S'il y a deux arguments, le premier doit être 
				 * un objet contenant les options de l'utilisateur, 
				 * le second argument est alors un array contenant les 
				 * éventuels paramètres supplémentaires. 
				 * 
				 * S'il n'y a qu'un argument, ce peut être soit un 
				 * objet anonyme contenant les options soit un array 
				 * contenant les éventuels paramètres. 
				 */ 
				var mesArguments = []; 
				 
				if ( $.isArray( param1 ) ){ 
					mesArguments = param1.concat(); 
				} else if ( $.isArray( param2 ) ){ 
					mesArguments = param2.concat(); 
				} 
				 
				if ( this.options.boolDebug ){ 
					console.log( "init, this.jObj : ", this.jObj ); 
					console.log( "init, mesArguments : ", mesArguments.concat() ); 
				} 
				 
				/* 
				 * Votre code pour traiter this.jObj. 
				 * 
				 * Exemple : 
				*/		 
				this._setClass( this.options.class ); 
			}, 
			enumerable : true 
		}, 
 
		"destroy" : { 
			value : function( params ){ 
				// 1. Supprimer les gestionnaires d'événements. 
				 
				// Exemple : 
				// this.options.jObjTexte.off( "click mouseenter mouseleave" ); 
				 
				// 2. Supprimer les composants UI. 
				 
				// Exemple : 
				// this.options.jObjTexte.remove(); 
				 
				// 3. Rendre null les objets (y compris array) 
				 
				// Exemple : 
				// this.options.jObjTexte = null; 
			}, 
			enumerable : true 
		}, 
 
		"exemple" : { 
			value : function( params ){ 
				/* 
				 * params est un array. 
				 * 
				 * À l'exception d'init, toute vos méthodes 
				 * publiques doivent avoir cette signature. 
				 * 
				 * Vous devez extraire vos paramètres de 
				 * l'array params. 
				 * 
				 * var monParam = params.shift(); 
				 * 
				 * N'oubliez pas de contrôler la validité 
				 * des paramètres extraits. 
				 */ 
			}, 
			enumerable : true 
		}, 
		 
		"setOption" : { 
			value : function( params ){ 
				/* 
				 * Ne modifier pas le traitement des arguments 
				 * sans nécessité ! 
				 */ 
				var option = params.shift(), 
					value = params.shift(); 
					 
				if ( ! option || ! value ){ 
					$.error( "Les paramètres ne sont pas conformes : ( " + 
							option + ", " + value + " )." ); 
				} 
				 
				if ( option in this.options ){ 
					switch( option ){ 
						case "boolDebug": 
							this._setBoolDebug( value ); 
							break; 
						case "class": 
							this._setClass( value ); 
							break; 
						default: 
							$.error( "Cette option existe mais elle n'est pas publique !" ); 
					}; 
					 
				} else { 
					$.error( "Cette option n'existe pas !" ); 
				} 
			}, 
			enumerable : true 
		}, 
		 
		"_setBoolDebug" : { 
			value : function( value ){ 
			 
				if ( typeof value === "boolean" ){ 
					this.options.boolDebug = value; 
				} 
			} 
		}, 
		 
		 
		"_setClass" : { 
			value : function( value ){ 
				 
				if ( typeof value === 'string' ){ 
					 
					if ( this.jObj.hasClass( this.options.class ) ){ 
						 
						this.jObj.removeClass( this.options.class ); 
					} 
					 
					this.options.class = value; 
					 
					this.jObj.addClass( value ); 
				} 
			} 
		}, 
		 
		"getOption" : { 
			value : function( params ){ 
				/* 
				 * Ne modifier pas le traitement des arguments 
				 * sans nécessité ! 
				 */ 
				var option = params.shift(), 
					callback = params.shift() || function(){}, 
					name = "getOption." + this._copyright.objMethodsName; 
					 
				if ( ! option ){ 
					$.error( "getOption : le paramètre n'est pas conforme : ( " + 
							option + " )." ); 
				} 
				 
				/* 
				 * Objet et array : attention de toujours transmettre une copie ! 
				 */ 
				 
				if ( option in this.options ){ 
					switch( option ){ 
						case "boolDebug": 
							var value = this.options.boolDebug; 
							this.jObj.data( name, value ); 
							callback( option, value ); 
							break; 
						case "class": 
							var value = this.options.class; 
							this.jObj.data( name, value ); 
							callback( option, value ); 
							break; 
						default: 
							$.error( "getOption : cette option existe mais elle n'est pas publique !" ); 
					}; 
					 
				} else { 
					$.error( "getOption : cette option n'existe pas !" ); 
				} 
			}, 
			enumerable : true 
		} 
	}); 
	 
	Object.preventExtensions( dvjhSqueletteMethods._copyright ); 
	Object.freeze( dvjhSqueletteMethods._copyright ); 
	 
	/* 
	 * Pour créer un plugin multitâches il vous suffit de 
	 * copier-coller et de personnaliser ce code en changeant 
	 * le nom du plugin et de son objet méthodes. 
	 * 
	 * La méthode peut recevoir de 0 à n arguments. 
	 * 
	 * L'objet contenant les options de l'utilisateur doit 
	 * toujours être passé dans le premier argument. 
	 * 
	 * Si le premier argument est un objet, il doit 
	 * contenir les options de l'utilisateur. 
	 * 
	 * Le String contenant le nom d'une méthode doit 
	 * toujours être passé dans le premier argument. 
	 *  
	 * Si le premier argument est un String, il doit 
	 * contenir le nom d'une méthode. 
	 * 
	 * Avec 0 argument, le premier argument 
	 * contenant un objet ou le string "init", la 
	 * fonction dvjhPluginCreate provoquera 
	 * l'initialisation du dvjhPlugin ou une erreur 
	 * si l'initialisation a déjà eu lieu. 
	 * 
	 * Ci-dessous, n'oublier pas de remplacer 
	 * dvjhSqueletteMethods par le nom de votre 
	 * objet méthodes. 
	 * 
	 * Ajouts de méthodes (plugin) au prototype de l'objet jQuery ($.fn).  
	 */ 
	$.extend( $.fn, { 
		"dvjhSquelette" : function(){ 
			return dvjhPluginCreate.call( this, dvjhSqueletteMethods, arguments ); 
		} 
	}); 
	 
	return Object.create( {}, { 
		"$" : { 
			value : $, 
			enumerable : true 
		}, 
		"squeletteObjMethodsName" : { 
			value : dvjhSqueletteMethods._copyright.objMethodsName, 
			enumerable : true 
		}, 
		"squeletteObjMethodsDefaultOptions" : { 
			value : function( objOptions ){ 
				/* 
				 * Modifications des options par défaut. 
				 * 
				 * Ne modifier pas ce code sans nécessité ! 
				 */ 
				if ( $.isPlainObject( objOptions ) && ! $.isEmptyObject( objOptions ) ){ 
					dvjhSqueletteMethods._options = Object.dvjhExtend( dvjhSqueletteMethods._options, objOptions ); 
				} 
			}, 
			enumerable : true 
		}, 
		"debugfn" : { 
			value : function(){ 
				console.log( Object.getOwnPropertyNames( $.fn ) ); 
			} 
		}, 
		"debugObjMethods" : { 
			value : function(){ 
				console.log( dvjhSqueletteMethods ); 
				console.log( Object.keys( dvjhSqueletteMethods ) ); 
				 
				Object.getOwnPropertyNames( dvjhSqueletteMethods ).forEach( function( key ){ 
					var props = Object.getOwnPropertyDescriptor( dvjhSqueletteMethods, key ); 
					 
					console.log( "dvjhSqueletteMethods : key = ", key, ", value = ", props.value,  
									", writable = ", props.writable,  
									", enumerable = ", props.enumerable,  
									", configurable = ", props.configurable ); 
				}); 
 
				Object.getOwnPropertyNames( dvjhSqueletteMethods._copyright ).forEach( function( key ){ 
					var props = Object.getOwnPropertyDescriptor( dvjhSqueletteMethods._copyright, key ); 
					 
					console.log( "dvjhSqueletteMethods._copyright : key = ", key, ", value = ", props.value,  
									", writable = ", props.writable,  
									", enumerable = ", props.enumerable,  
									", configurable = ", props.configurable ); 
				}); 
 
				Object.getOwnPropertyNames( dvjhSqueletteMethods._options ).forEach( function( key ){ 
					var props = Object.getOwnPropertyDescriptor( dvjhSqueletteMethods._options, key ); 
					 
					console.log( "dvjhSqueletteMethods._options : key = ", key, ", value = ", props.value,  
									", writable = ", props.writable,  
									", enumerable = ", props.enumerable,  
									", configurable = ", props.configurable ); 
				}); 
			} 
		} 
	}); 
 
})( jQuery.sub() );
Le fichier dvjhSquelette.html :
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.
$(function(){ 
	try { 
		// debug 
		dvjh.debugfn(); 
		dvjh.debugObjMethods(); 
 
		/* 
		* Construction d'un objet jQuery : jObj. 
		* Il peut être exploité comme un array d'objet jQuery, un pour chaque 
		* division dont l'ID commence par "divTest". 
		* 
		* N'oubliez pas que seule la version de jQuery accessible 
		* par dvjh.S a accès au dvjhPlugin. 
		*/ 
		var jObj = dvjh.$( "[id^='divTest']" ); 
		 
		// Il est possible de modifier ou d'ajouter des options par défaut 
		dvjh.squeletteObjMethodsDefaultOptions({ 
			"moi" : "Prénom Nom" 
		}); 
 
		// Initialisation du dvjhSquelette avec modification de l'option "moi" 
		jObj.dvjhSquelette({ "moi" : "Daniel Hagnoul" }); 
		 
		/* 
		* On peu initialisé un dvjhPlugin de plusieurs 
		* manière différentes en fonction des besoins 
		* du plugin. 
		* 
		* jObj.dvjhSquelette(); 
		* jObj.dvjhSquelette({ "key" : "value" }); 
		* jObj.dvjhSquelette({ "key" : "value" }, "hello everybody !" ); 
		* 
		* Si le premier argument est un objet, il doit 
		* contenir les options ou être vide. 
		* jObj.dvjhSquelette({ }, new Date() ); 
		* 
		* jObj.dvjhSquelette( "init", "hello everybody !" ); 
		*  
		* La double initialisation provoque une erreur 
		* Exemple : jObj.eq( 2 ).dvjhSquelette(); 
		*/ 
		 
		/* 
		* Nota bene : pour les besoins du deboggage on peut 
		* facilement consulter les options appliquées à une 
		* instance (un objet jQuery). 
		* Pour des raisons évidentes de sécurité (le respect  
		* des données) vous devez toujours manipuler une  
		* copie d'un objet (object et array). 
		*/ 
		jObj.each( function( i, item ){ 
			console.log( "options : ", i, item, $.extend( true, {}, $( item ).data( dvjh.squeletteObjMethodsName ) ) ); 
		}); 
		 
		/* 
		* Vous remarquerez certainement que le troisième 
		* objet jQuery n'a pas la "class" par défaut ! 
		* En effet, au lieu d'être rouge (dvjhClass) il est orange ! 
		* C'est le résultat de la modifications des options d'une  
		* instance par l'intermédiaire d'un attribut data HTML5. 
		*/ 
		 
		/* 
		* Modification de l'option "class" du deuxième 
		* objet jQuery en utilisant "setOption" 
		*/ 
		jObj.eq( 1 ).dvjhSquelette( "setOption", "class", "helloClass" ); 
 
		/* 
		 * Consultation de la valeur de l'option "class" avec "getOption". 
		 * 
		 * Dans la majorité des cas, on manipulera cette valeur dans  
		 * une fonction de rappel. Mais cette valeur est également  
		 * disponible par jObj.data( "getOption." + dvjh.squeletteObjMethodsName ). 
		 * 
		 * Avec une fonction de rappel (callback) : 
		 */ 
		jObj.dvjhSquelette( "getOption", "class", function( option, value ){ 
			console.log( "getOption, option = ", option, ", value = ", value ); 
		}); 
		 
		// Avec jObj.data( "getOption." + dvjh.squeletteObjMethodsName ). 
		jObj.each( function( i, item ){ 
			console.log( "class : ", i, item, $( item ).data( "getOption." + dvjh.squeletteObjMethodsName ) ); 
		}); 
	} 
	catch(e){ 
		alert( "dvjhSquelette, " + e.message ); 
	} 
});

 
 

Valid XHTML 1.0 TransitionalValid CSS!


Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (https://www.developpez.net/forums/u285162/danielhagnoul/)"