web-dev-qa-db-fra.com

jQuery Plugin: Ajout de la fonctionnalité de rappel

J'essaie de donner la fonctionnalité de rappel de mon plugin, et j'aimerais qu'il fonctionne de manière quelque peu traditionnelle:

myPlugin({options}, function() {
    /* code to execute */
});

ou

myPlugin({options}, anotherFunction());

Comment gérer ce paramètre dans le code? Est-ce traité comme une entité complète? Je suis presque sûr de savoir où je placerai le code exécutoire, mais comment puis-je obtenir le code à exécuter? Je n'arrive pas à trouver beaucoup de littérature sur le sujet.

jqueryfunctioncallback
83
dclowd9901

Il suffit d'exécuter le rappel dans le plugin:

$.fn.myPlugin = function(options, callback) {
    if (typeof callback == 'function') { // make sure the callback is a function
        callback.call(this); // brings the scope to the callback
    }
};

Vous pouvez également avoir le rappel dans l'objet options:

$.fn.myPlugin = function() {

    // extend the options from pre-defined values:
    var options = $.extend({
        callback: function() {}
    }, arguments[0] || {});

    // call the callback and apply the scope:
    options.callback.call(this);

};

Utilisez-le comme ceci:

$('.elem').myPlugin({
    callback: function() {
        // some action
    }
});
163
David Hellsing

Je ne sais pas si j'ai bien compris votre question. Mais pour la deuxième version: Ceci appellerait anotherFunction immédiatement.

En gros, votre plugin devrait être une sorte de fonction qui ressemble à ceci:

var myPlugin = function(options, callback) {
    //do something with options here
    //call callback
    if(callback) callback();
}

Vous devez fournir une fonction objet comme rappel, donc soit function(){...} ou anotherFunction (sans ()).

5
Felix Kling

Ramener un souffle du passé. 

A noter que si vous avez deux arguments passés, par exemple:

$.fn.plugin = function(options, callback) { ... };

Ensuite, vous appelez le plugin sans l'argument options, mais avec un rappel, vous rencontrerez des problèmes:

$(selector).plugin(function() {...});

J'utilise ceci pour le rendre un peu plus flexible:

if($.isFunction(options)) { callback = options }
4
Sam Potts

Je pense que cela pourrait vous aider

// Create closure.
(function( $ ) {
  
   // This is the easiest way to have default options.
 
        var settings = $.extend({
            // These are the defaults.
 
            onready: function(){},
 
            //Rest of the Settings goes here...
        }, options );
 
    // Plugin definition.
    $.fn.hilight = function( options ) {
 
        //Here's the Callback
        settings.onready.call(this);
 
        //Your plugin code goes Here
    };
  
// End of closure.
  
})( jQuery );

J'ai partagé un article sur la création de votre propre plugin jQuery. Je pense que vous devriez vérifier que http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/

3
Shubham Kumar

Changez votre fonction plugin pour prendre un second paramètre. En supposant que l'utilisateur passe une fonction, ce paramètre peut être traité comme une fonction normale.
Notez que vous pouvez également faire du rappel une propriété du paramètre options.

Par exemple:

$.fn.myPlugin = function(options, callback) {
    ...

    if(callback)        //If the caller supplied a callback
        callback(someParam);

    ...
});
1
SLaks

Un exemple un peu en retard, mais cela peut être utile . L'utilisation d'arguments peut créer la même fonctionnalité.

$.fn.myPlugin = function() {
    var el = $(this[0]);
    var args = arguments[0] || {};
    var callBack = arguments[1];
    .....
    if (typeof callback == 'function') {
        callback.call(this);
    }
}
0
Draka