Plugin jQuery: Ajout de la fonctionnalité de rappel

86

J'essaie de donner à mon plugin la fonctionnalité de rappel, 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-il traité comme une entité à part entière? Je suis presque sûr de savoir où je placerais le code exécutoire, mais comment faire exécuter le code? Je n'arrive pas à trouver beaucoup de littérature sur le sujet.

dclowd9901
la source
2
Votre deuxième syntaxe appelle la fonction au lieu de la passer. Vous devez retirer le()
SLaks
6
Personnellement, je pense qu'il vaut mieux que le callback soit spécifié dans le paramètre "options". C'est particulièrement vrai s'il apparaît qu'il y a plus d'une raison pour fournir un rappel.
Pointy
1
À quoi ressemblerait quelque chose comme ça, Pointy? Voulez-vous fournir une réponse-réponse?
dclowd9901

Réponses:

167

Exécutez simplement 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 d'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
    }
});
David Hellsing
la source
Juste un ajout pour cette réponse. Il y a un article qui explique cela: jquery-howto.blogspot.com/2009/11/…
RaphaelDDL
@David Comment ajouter un paramètre de rappel, je veux le faire$('.elem').myPlugin({ callback: function (param) { // some action } });
Jeaf Gilbert
2
@JeaffreyGilbert Vous devriez également apporter le contexte jQuery, je le feraisoptions.callback.call(this, param);
David Hellsing
@David Je veux deux rappels, appelés animateBeforeet animateAfter. s'il vous plaît dites-moi comment utiliser votre solution ??
user007
5

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

Fondamentalement, 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 un objet fonction comme rappel, donc soit function(){...}ou anotherFunction(sans ()).

Félix Kling
la source
4

Ramener une explosion 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 }
Sam Potts
la source
3

Je pense que cela pourrait t'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'avais 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/

Shubham Kumar
la source
1

Changez la fonction de votre plugin pour prendre un deuxième 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);

    ...
});
SLaks
la source
0

Un exemple un peu tardif, 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);
    }
}
Draka
la source