Discussion :

[gtraxx]

Bonjour j'ai une petite question concernant les sous paramètres dans la conception d'un plugin jquery.
En faites définir des paramètres par défaut est très simple sauf dans le cas ou l'on souhaite structuré les paramètres dans d'autres paramètres.
par exemple :

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
 
(function($){
$.monplugin.init= function(settings) {
		var optbox = {
			display : true,
			elemid : '#notify-header',
			elemclass : 'dc-head-request',
			background : "#efefef",
			text : ''
		};
		var settings = $.extend({},optbox,settings);
		if(typeof settings != 'object'){
			console.log('settings  is not object');
		}
                var $id = $(settings.elemid);
alert($id);
}
})(jQuery);
$.monplugin.init({
			display : true,
			elemid : '#notify-header',
			elemclass : 'dc-head-request',
			background : "#efefef",
			text : ''
		});

ce code fonctionne bien dans le cas de paramètres tout à fait classique mais si je souhaite structuré de manière plus complexe :

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
 
(function($){
$.monplugin.init= function(settings) {
		var optbox = {
			display : true,
                        box{
                              elemid : '#notify-header',
                              elemclass : 'dc-head-request'
                        },
			background : "#efefef",
			text : ''
		};
		var settings = $.extend({},optbox,settings);
		if(typeof settings != 'object'){
			console.log('settings is not object');
		}
                var $id = $(settings.box.elemid);
alert($id);
}
})(jQuery);
//Si je défini comme ceci pas de problème il fonctionne
$.monplugin.init({
			display : true,
                        box{
                              elemid : '#notify-header',
                              elemclass : 'dc-head-request'
                        },
			background : "#efefef",
			text : ''
		});

Mais dans le cas ou je souhaite utilisé un sous paramètres par défaut :

Code :

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

1
2
3
4
5
6
7
8
9
 
$.monplugin.init({
			display : true,
                        box{
                              elemclass : 'dc-head-request'
                        },
			background : "#efefef",
			text : ''
		});

J'ai simplement défini tous les paramètres sauf celui qui est appelé histoire de voir s'il reprend celui par défaut.
Le résultat est un undefined $id

[danielhagnoul]

Bonsoir

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
(function($){
	// ici il s'agit de $.fonctionglobalePlugin et nom de $.fn.plugin
	$.dvjhTest = function(settings) {
		var optbox = {
			display : true,
            box : { // attention box : !
                elemid : '#notify-header',
                elemclass : 'dc-head-request'
            },
			background : "#efefef",
			text : ''
 
		};
 
		//var settings = $.extend({},optbox,settings); non !
 
		/*
		 * On doit créer un nouvel objet qui est le résultat
		 * de l'objet optbox plus l'objet settings.
		 * On ne doit modifier ni optbox ni settings !!!!
		 */
		var opts = $.extend(true, {}, optbox, settings);
 
		if ( $.isPlainObject( opts ) ){
			console.log( opts.box.elemid );
		}
 
		return this;
	};
})(jQuery);
 
$.dvjhTest({
	display : true,
    box : { // attention box : !
        //elemid : '#notify-header',
        elemclass : 'dc-head-request'
    },
	background : "#efefef",
	text : ''
});

[gtraxx]

Bonjour,
j'ai fais les modifications adéquate et sa a l'air de bien tourner
Mais pourquoi :

var settings = $.extend({},optbox,settings); non !

histoire de je comprenne bien son principe et puis aussi expliquer que ce plugin est un genre de fonction global d’où le fait que je n'utilise pas $.fn.myplugin
Pour le moment je tente de tester si un élément de tableau existe (en interne)

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
 
var arr = {
        test1: '78',
	test2: '87',
	test3: 8
};
function testfunc(tabconfig){
		if(!$.isPlainObject(tabconfig)){
			console.log('Error tabconfig is not object');
		}else if($.isEmptyObject(tabconfig)){
			console.log('Error tabconfig is empty');
		}
		var test1= tabconfig['test1'];
		var test2= tabconfig['test2'];
if($.inArray("test3", tabconfig) === -1){
	console.log('Element non présent');
}else{
	console.log('ok');
}
			if(tabconfig['test3'] != null || tabconfig['test3'] != ''){
				if(!isNaN(parseFloat(tabconfig['test3'])) && isFinite(tabconfig['test3'])){
					var zoomsize = tabconfig['test3'];
				}else{
					console.log('test3 "%s" is not numeric',tabconfig['test3']);
				}
			}else{
				var zoomsize = 8;
			}
		console.log(zoomsize);
	}
testfunc(arr);

Je tente de passer un paramètre qui doit contenir un tableau et si celui-ci n'est pas complet retourner les erreurs.
Chaque paramètres doit être bien défini mais je ne parviens pas à trouver les bons tests à faire avec les tableaux associatifs

[danielhagnoul]

Bonsoir

//var settings = $.extend({},optbox,settings); non !.

Vous créez un nouvel objet settings alors que le paramètre de la fonction porte ce nom, je n'aime pas. Mon choix est toujours de ne pas toucher à l'existant (on peut encore en avoir besoin) et de créer une nouvelle variable opts. Mais on peut aussi choisir de modifier les options par défauts : $.extend(optbox,settings); et se servir alors de optbox au lieu de opts.

Jouons un peu avec tabconfig

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
// Ceci est un objet JSON
var arr = {
    "test1": "78",
	"test2": "87",
	"test3": 8,
	"func": function(){
		return "12";
	}
};
 
function testfunc(tabconfig){
 
	if ( $.isPlainObject(tabconfig) ){
		console.log("C'est un objet non vide");
	} else if( $.isEmptyObject(tabconfig) ){
		console.log("C'est un objet vide");
	}
 
	// tab est un array : http://api.jquery.com/jQuery.map/
	var tab = $.map(tabconfig, function(value, key){
		console.log(value, key);
 
		return [key, value];
	});
 
	console.log($.isArray(tab), tab.length, tab.join());
 
	if ( $.inArray("test3", tab) > -1 ){
		console.log("Élément test3 présent");
	} else {
		console.log("Élement test3 absent");
	}
 
	if ( $.inArray("func", tab) > -1 ){
		console.log("Élément func présent");
	} else {
		console.log("Élement func absent");
	}
 
	// teste les propiétés de l'objet
	console.log(tabconfig["test1"], tabconfig["test2"], tabconfig["func"]);
 
	// jQuery 1.7 : http://api.jquery.com/jQuery.isNumeric/
	if ( $.isNumeric(tabconfig["test3"]) ){
		console.log( parseInt(tabconfig["test3"], 10) );
	} else {
		console.log("test3 : ",  tabconfig["test3"], " Ce n'est pas un nombre");
	}
 
	if ( $.isNumeric(tabconfig["func"]) ){
		console.log( parseInt(tabconfig["func"], 10) );
	} else {
		console.log("func : ",  tabconfig["func"], " Ce n'est pas un nombre");
	}
 
	console.log("func() = ", tabconfig.func(), tab[tab.length - 1]() );
}
 
testfunc(arr);