Options du plugin jQuery

Question

Tout d'abord, je sais que c'est un problème de base de JS, pas de jQuery. Je suis à ce point d'apprentissage où je n'arrive pas à me concentrer complètement sur certaines questions de portée. J'ai donc besoin d'explications.

J'ai lu tous les articles/tutoriels que je peux trouver, mais j'ai juste besoin de quelques réponses. J'ai mis en place ce code de base pour expérimenter (comme le code actuel est beaucoup trop gros pour être publié ici). Dans l'expérience suivante, lorsque le bouton selector1-change est cliqué, la variable 'cmd' s'affiche correctement, mais la référence à this.options est 'non définie', car il s'agit d'une instance différente de MySelector(), sauf si Je suis loin.

Alors, comment peut-on appeler une instance d'un objet comme celui-ci.

Exemple:.

Vous pouvez utiliser la boîte de dialogue de jQueryUI en créant, puis plus tard, vous pouvez passer des commandes comme à $ (« # mydiv ») de dialogue (« fermer »); et qui accèdera à l'instance attachée à cet élément. Comment cela est-il accompli?

JQUERY_MYSELECTOR.JS

(function($){ 
    $.fn.MySelector = function(incoming) { 

     if (typeof(incoming) != 'object') { 
      return runCommand(incoming); 
     } 

     var options = $.extend({},{ 
      id: false, 
      backgroundColor: false 
     },incoming); 

     function runCommand(cmd) { 
      alert('blah:'+this.options.backgroundColor+"\n"+'cmd:'+cmd); 
     } 
    } 
})(jQuery); 

SCRIPT

<script type="text/javascript" src="jquery_myselector.js"></script> 
<script type="text/javascript"> 
    $j(document).ready(function() { 
     $j('#selector1).MySelector({ backgroundColor: '#000000' }); 
     $j('#selector1-change').click(function() { 
      $j('#selector1').MySelector('mooocow'); 
     }); 
    }); 
</script> 

STYLE

<input type="button" value="selector1" id="selector1" /> 
<br/> 
<input type="button" value="selector1-change" id="selector1-change" /> 

MISE À JOUR oublié d'utiliser le plugin sur sélecteur1 (duh)

Answer 1

Vous appelez runCommand avant d'attribuer une valeur à options - options a la valeur undefined dans le corps de runCommand. Ne me demandez pas comment JS est capable de voir le corps de runCommand avant de le déclarer, mais il le peut.

De même, au premier niveau de MySelector, this est lié aux résultats de l'exécution $j('#selector1-change'), qui est un tableau. Vous aurez besoin d'itérer ce tableau.

Essayez quelque chose comme ceci:

 
(function($){ 
    function runCommand(e, cmd) { 
     alert('blah:'+ e.options.backgroundColor+"\n"+'cmd:'+cmd); 
    } 

    $.fn.MySelector = function(incoming) { 
     this.each(function() { 
      if (typeof(incoming) != 'object') { 
       return runCommand(this, incoming); 
      } else { 
       this.options = $.extend(this.options || { 
        id: false, 
        backgroundColor: false 
       },incoming);  
      } 
     }); 
    } 
})(jQuery); 

Answer 2

options a été déclaré à la déclaration var dans le votre champ principal, vous n'avez pas besoin d'utiliser le mot-clé this dans votre fonction ExécuterCommande, puisque dans cette fonction vous avez accès à la fermeture extérieure:

function runCommand(cmd) { 
     alert('blah:'+options.backgroundColor+"\n"+'cmd:'+cmd); 
    } 

Answer 3

vous pouvez essayer quelque chose comme ceci:

(function($){ 
    $.myPlugin = { 
     foo: function() {...}, 
     bar: function() {...}, 
     foobar: function() {...} 
    }; 

    $.fn.MySelector = function (operation) { 
     if (typeof operation === 'string') { 
      switch(operation) { 
       'open': 
        $.myPlugin.foo(); 
        break; 
       'destroy': 
        $.myPlugin.bar(); 
        break; 
       default: 
        $.myPlugin.foobar(); 
        break; 
      } 
     } 
    } 
}(jQuery));