Complemento jQuery: agregar funcionalidad de devolución de llamada


86

Estoy tratando de darle la funcionalidad de devolución de llamada de mi complemento y me gustaría que funcione de una manera algo tradicional:

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

o

myPlugin({options}, anotherFunction());

¿Cómo manejo ese parámetro en el código? ¿Se trata como una entidad completa? Estoy bastante seguro de saber dónde colocaría el código de ejecución, pero ¿cómo hago para ejecutar el código? Parece que no puedo encontrar mucha literatura sobre el tema.


2
Su segunda sintaxis llama a la función en lugar de pasarla. Debes eliminar los()
SLaks

6
Personalmente, creo que es mejor que especifique la devolución de llamada como parte del parámetro "opciones". Eso es especialmente cierto si se descubre que hay más motivos de uno para proporcionar una devolución de llamada.
Puntiagudo

1
¿Cómo se vería algo así, Pointy? ¿Le importaría dar una respuesta-respuesta?
dclowd9901

Respuestas:


167

Simplemente ejecute la devolución de llamada en el complemento:

$.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
    }
};

También puede tener la devolución de llamada en el objeto de opciones:

$.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);

};

Úselo así:

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

Solo un complemento para esta respuesta. Hay una publicación que explica esto: jquery-howto.blogspot.com/2009/11/…
RaphaelDDL

@David Cómo agregar el parámetro de devolución de llamada, quiero hacer esto$('.elem').myPlugin({ callback: function (param) { // some action } });
Jeaf Gilbert

2
@JeaffreyGilbert Deberías traer el contexto de jQuery también, yo lo haríaoptions.callback.call(this, param);
David Hellsing

@David Quiero dos devoluciones de llamada, llamado animateBeforey animateAfter. por favor dime cómo usar tu solución
user007

5

No sé si entiendo correctamente tu pregunta. Pero para la segunda versión: esto llamaría de anotherFunctioninmediato.

Básicamente, su complemento debería ser algún tipo de función que se vea así:

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

Debe proporcionar un objeto de función como devolución de llamada, por lo que function(){...}o anotherFunction(sin ()).


4

Recuperando una explosión del pasado.

Vale la pena señalar que si tiene dos argumentos pasados, por ejemplo:

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

Luego, llama al complemento sin el argumento de opciones, pero con una devolución de llamada, se encontrará con problemas:

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

Utilizo esto para hacerlo un poco más flexible:

if($.isFunction(options)) { callback = options }

3

Creo que esto podría ayudarte

// 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 );

Había compartido un artículo sobre la creación de su propio complemento jQuery. Creo que debería comprobar que http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/


1

Cambie la función de su complemento para tomar un segundo parámetro. Suponiendo que el usuario pasa una función, ese parámetro puede tratarse como una función normal.
Tenga en cuenta que también puede hacer que la devolución de llamada sea una propiedad del parámetro de opciones.

Por ejemplo:

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

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

    ...
});

0

Un ejemplo un poco tarde, pero puede ser útil. El uso de argumentos puede crear la misma funcionalidad.

$.fn.myPlugin = function() {
    var el = $(this[0]);
    var args = arguments[0] || {};
    var callBack = arguments[1];
    .....
    if (typeof callback == 'function') {
        callback.call(this);
    }
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.