Plug-in jQuery: Adicionando funcionalidade de retorno de chamada


86

Estou tentando dar ao meu plug-in a funcionalidade de retorno de chamada e gostaria que ele operasse de uma maneira um tanto tradicional:

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

ou

myPlugin({options}, anotherFunction());

Como faço para lidar com esse parâmetro no código? É tratado como uma entidade completa? Tenho quase certeza de que sei onde colocaria o código executório, mas como faço para que o código seja executado? Não consigo encontrar muita literatura sobre o assunto.


2
Sua segunda sintaxe chama a função em vez de passá-la. Você precisa remover o()
SLaks

6
Pessoalmente, acho melhor você especificar o retorno de chamada como parte do parâmetro "options". Isso é especialmente verdadeiro se descobrir que há mais motivos de um para fornecer um retorno de chamada.
Pointy,

1
Como ficaria algo assim, Pointy? Importa-se de fornecer uma resposta-resposta?
dclowd9901

Respostas:


167

Basta executar o callback no 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
    }
};

Você também pode ter o retorno de chamada no objeto de opções:

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

};

Use-o assim:

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

Apenas um acréscimo para esta resposta. Há uma postagem que explica isso: jquery-howto.blogspot.com/2009/11/…
RaphaelDDL

@David Como adicionar o parâmetro de retorno de chamada, eu quero fazer isso$('.elem').myPlugin({ callback: function (param) { // some action } });
Jeaf Gilbert

2
@JeaffreyGilbert Você deve trazer o contexto jQuery também, eu o fariaoptions.callback.call(this, param);
David Hellsing

@David, quero dois retornos de chamada, chamados animateBeforee animateAfter. por favor me diga como usar sua solução ??
user007

5

Não sei se entendi sua pergunta corretamente. Mas para a segunda versão: isso ligaria anotherFunctionimediatamente.

Basicamente, seu plug-in deve ser algum tipo de função semelhante a esta:

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

Você deve fornecer um objeto de função como retorno de chamada, portanto function(){...}ou anotherFunction(sem ()).


4

Trazendo de volta uma explosão do passado.

É importante notar que se você tiver dois argumentos passados, por exemplo:

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

Em seguida, você chama o plug-in sem o argumento de opções, mas com um retorno de chamada, então você terá problemas:

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

Eu uso isso para torná-lo um pouco mais flexível:

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

3

Eu acho que isso pode te ajudar

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

Eu compartilhei um artigo sobre como criar seu próprio plug-in jQuery. Acho que você deveria verificar se http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/


1

Altere a função do plugin para usar um segundo parâmetro. Supondo que o usuário passe uma função, esse parâmetro pode ser tratado como uma função regular.
Observe que você também pode tornar o retorno de chamada uma propriedade do parâmetro options.

Por exemplo:

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

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

    ...
});

0

Um exemplo um pouco tarde, mas pode ser útil. O uso de argumentos pode criar a mesma funcionalidade.

$.fn.myPlugin = function() {
    var el = $(this[0]);
    var args = arguments[0] || {};
    var callBack = arguments[1];
    .....
    if (typeof callback == 'function') {
        callback.call(this);
    }
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.