Comment jquery-ui sait-il comment lier les rappels d'événements fournis en tant qu'init options?

Question

Comment jquery-ui sait-il lier les callbacks passés en tant qu'init options? Je pense que la réponse est quelque part dans le $.widget.bridge method (ln 71) mais je ne suis pas tout à fait sûr de ce qui se passe là-bas. Un exemple de ce dont je parle est quelque chose comme autocomplete search event. L'exemple de code montre que je peux lier à 'search' avec les options init mais je ne vois rien de spécifique à ce comportement.

Cette technique semble cool. Je voudrais l'exploiter.

Answer 1

Je ne suis pas très familier avec le code jQueryUI, mais voici un exemple de comment appeler un callback passé en argument.

Essayez-:http://jsfiddle.net/pshLK/

Lorsque les charges par exemple, vous obtiendrez 2 alertes. Ceci est le résultat du rappel qui a été passé pour les deux éléments <div>. Vous pouvez changer la fonction de rappel et cliquez sur "Exécuter" en haut pour voir que votre rappel est en cours d'exécution.

(function($) { 
     // create myPlugin 
    $.fn.myPlugin = function(options) { 
      // iterate through all elements the selector matched 
     return this.each(function() { 
       // Change the color to blue 
      $(this).css('color','blue'); 
       // Call the callback using the .call() method 
       // so that we can pass the value of "this" 
       // as the element in the iteration 
      options.callback.call(this); 
     }); 
    }; 
})(jQuery); 

    // Find all <div> elements on the page, and call myPlugin which 
    // receives an object as an argument that has a "callback" property 
    // whose value is the function that will be called in the plugin. 
$('div').myPlugin({ 
     // This function will run for each <div> displaying the ID of the <div> 
    callback:function() { alert('the id is ' + this.id); } 
}); 

Answer 2

Les fonctions en JavaScript peuvent être transmises en tant que valeurs à d'autres fonctions et exécutées. .: par exemple

function execute(fn) 
{ 
    fn(); // execute function passed as a parameter 
} 

var alertHelloWorld = function() 
{ 
    alert("Hello World"); 
}; 

execute(alertHelloWorld); // this will alert "Hello World" 

Alors, que le plug-in jQuery Autocomplete fait, la mise en cache est ce que les fonctions sont passées dans son initialiseur, puis les exécuter quand il a besoin. I.E .: lorsque les données doivent être traitées ou lorsque les données ont été traitées.

Voici un exemple, un peu similaire au plug-in Autocomplete:

// execute three functions contained in an object literal 
function execute(o) 
{ 
    o.One(); 
    o.Two(); 
    o.Three(); 
}; 

// call "execute" passing in object literal containing three anonymous functions 
// this will alert "One", then "Two", then "Three" 
execute(
{ 
    One: function() { alert("One"); }, 
    Two: function() { alert("Two"); }, 
    Three: function() { alert("Three"); } 
}); 

Les paramètres peuvent également être transmis d'une fonction qui exécute une autre fonction:

function execute(fn) 
{ 
    // execute function passed as a parameter with a parameter 
    fn("Hello World"); 
}; 

execute(function (s) 
{ 
    // parameter "s" supplied by "execute" will contain "Hello World" 
    alert(s); 
});