Comment appeler les fonctions imbriquées dans un plugin JQuery?

Question

Mon but est de pouvoir appeler les fonctions qui se trouvent dans mon plugin JQuery.

Quelle est la syntaxe correcte?

Par exemple, cela ne fonctionne pas:

<a href="#" id="click_me">Click Me</a> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
(function($) { 
    $.fn.foo = function(options) { 
     do_stuff = function(){ 
      console.log("hello world!"); // works 
      do_other_stuff = function(){ 
      alert("who are you?"); 
      } 
     } // function 
    } // function 
})(jQuery); 

$("body").foo(); 

$("#click_me").click(function(){ 
$.fn.foo.do_stuff.do_other_stuff(); // doesn't work 
}); 

</script> 

Answer 1

lorsque vous attribuez des fonctions à des variables sans le mot clé var soit ils écraser la variable locale de ce nom ou sont ajoutés à l'espace de noms global. (donc votre do_stuff est une fonction globale, ce qui n'est pas ce que vous voulez)

Une façon de faire ce que vous voulez est de donner explicitement où vous voulez que votre fonction réside.

(function($) { 
    $.fn.foo = function(options) { 
     // whatever $().foo() should do 
    }; 

    $.fn.foo.do_stuff = function() { 
     console.log("hello world!"); 
    }; 

    $.fn.foo.do_stuff.do_other_stuff = function(){ 
     alert("who are you?"); 
    }; 
})(jQuery); 

Modifier:

Cela fonctionne parce que toutes les fonctions javascript sont des objets, ce qui signifie que vous pouvez attribuer des valeurs à une propriété arbitraire.

Si vous souhaitez accéder aux variables d'autres fonctions que vous pouvez déplacer les définitions à l'intérieur des autres comme:

$.fn.foo.do_stuff = function() { 
    console.log("hello world!"); 
    $.fn.foo.do_stuff.do_other_stuff = function(){ 
     alert("who are you?"); 
    }; 
}; 

mais cela signifie que la fonction est uniquement définie une fois que vous exécutez l'autre fonction, et que chaque fois que vous exécutez la fonction, elle écrasera la dernière définition.

Peut-être une solution plus idéale serait d'avoir chaque fonction retourne un objet contenant la fonction imbriquée comme ceci:

(function($) { 
    $.fn.foo = function(options) { 
     // whatever $().foo() should do 

     var do_stuff = function(do_stuff_args) { 
      console.log("hello world!"); 
      // do stuff with options and do_stuff_args 

      var do_other_stuff = function(other_args) { 
       alert("who are you?"); 
       // here you have access to options, do_stuff_args, and other_args 
      }; 

      return { 
       do_other_stuff: do_other_stuff 
      }; 
     }; 

     return { 
      do_stuff: do_stuff 
     } 
    }; 
})(jQuery); 

et appeler à l'aide

foo().do_stuff(some_options).do_other_stuff(other_options); 

ou

var a = foo(stuff).do_stuff(some_options); 
a.do_other_stuff(foo); 
a.do_other_stuff(bar);