Conflit entre deux plugins jQuery?

Question

Je suis en train de développer quelques plugins jQuery pour un site web client qui permettra de styliser des éléments de formulaire tels que des radios, des cases à cocher et des sélections. Je les ai développés comme trois plugins séparés dans le même fichier, et tandis que les plugins radio et checkbox semblent bien fonctionner les uns aux autres, mon select me donne des problèmes car il semble arrêter la radio et la case à cocher de travailler! Si je l'enlève, les deux autres fonctionnent bien.

Je présume que j'ai une sorte de conflit entre eux, mais je ne suis pas sûr de l'endroit où il pourrait être. Si je commente tout le code du plugin select en dehors de sa déclaration "settings", la radio et la case à cocher sont cassées. Si je supprime les paramètres, les radios et les cases à cocher recommencent à fonctionner, il semble donc que le conflit est dans les paramètres.

J'ai déclaré que les options du plugin même dans les trois (avec leurs propres valeurs par défaut):

jQuery.fn.ioFormSelect = function(options) { 
    //Default options. 
    settings = jQuery.extend({ 
     'maxOptions': 8, 
     'fieldClass': 'ui-field-select', 
     'selectedClass': 'ui-field-selected', 
     'openClass': 'ui-field-select-open', 
     'closeClass': 'ui-field-select-close', 
     'disabledClass': 'ui-field-disabled', 
     'optionClass': 'ui-field-option', 
     'optionGroupClass' : 'ui-field-option-group' 
    }, options); 

    //Plugin code 

}); 

Qu'est-ce que je fais mal? Je pensais que les variables déclarées de cette manière étaient «locales», les «globales» étant définies par le mot «var» à l'avance. Dois-je avoir une variable de paramètres séparée pour chaque plugin? : S Merci beaucoup d'avance pour tout conseil. :)

Answer 1

Vous manque un mot-clé ici, var, comme ceci:

var settings = jQuery.extend({ 

Sans var, vous créez une variable globale appeléesettings, ce qui bien sûr causer des problèmes lorsque plus un plug-in essaie de l'utiliser, quand vous ne l'intention de le partager :)

Par exemple you can test it like this:

​$("body").ioFormSelect(); 
alert(window.settings.maxOptions);​​​ //alerts "8" 

Il y a une discussion plus détaillée sur le sujet dans cette question: Difference between using var and not using var in JavaScript