2010-03-28 14 views
80

Estoy tratando de dar mi funcionalidad plug-in de devolución de llamada, y me gustaría para que funcione de una manera un tanto tradicional:jQuery Plugin: Adición de funcionalidad de devolución de llamada

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

o

myPlugin({options}, anotherFunction()); 

¿Cómo manejo ese parámetro en el código? ¿Se trata como una sola entidad? Estoy bastante seguro de que sé dónde colocaría el código de ejecución, pero ¿cómo puedo obtener el código para ejecutar? Parece que no puedo encontrar mucha literatura sobre el tema, así que gracias de antemano por su ayuda.

+2

Su segundo la sintaxis llama a la función en lugar de pasarla. Necesita eliminar '()' – SLaks

+6

Personalmente, creo que es mejor que la devolución de llamada se especifique como parte del parámetro "opciones". Eso es especialmente cierto si se desarrolla que hay más razones que una para proporcionar una devolución de llamada. – Pointy

+1

¿Cómo se vería algo así, Pointy? ¿Cuidar para dar una respuesta-respuesta? – dclowd9901

Respuesta

159

Sólo ejecutar la devolución de llamada en el 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 
    } 
}; 

También puede hacer que la devolución de llamada en las opciones del objeto:

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

}; 

usarlo como esto:

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

Muchas gracias, señor. Funciona de maravilla. – dclowd9901

+0

Solo un complemento para esta respuesta. Hay una publicación que explica esto: http://jquery-howto.blogspot.com/2009/11/create-callback-functions-for-your.html – RaphaelDDL

+0

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

1

Cambie su función de complemento para tomar un segundo parámetro. Suponiendo que el usuario pasa una función, ese parámetro puede tratarse como una función regular.
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); 

    ... 
}); 
5

No sé si entiendo su pregunta correctamente. Pero para la segunda versión: esto llamaría anotherFunction inmediatamente.

Básicamente su plugin debe ser algún tipo de función que tiene este aspecto:

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

Usted tiene que proporcionar una función objeto como devolución de llamada, así que o function(){...} o anotherFunction (sin ()).

4

Traer una ráfaga del pasado.

A tener en cuenta que si usted tiene dos argumentos pasados, por ejemplo:

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

Posteriormente, se llama el plugin sin el argumento opciones pero con una devolución de llamada a continuación, se encontrará con problemas:

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

lo utilizo para que sea un poco más flexible:

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

un ejemplo poco tarde, bu t 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); 
    } 
} 
1

Creo que esto podría ayudarle a

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

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

Cuestiones relacionadas