Wtyczka jQuery: dodawanie funkcji oddzwaniania

86

Próbuję dać mojej wtyczce funkcję zwrotną i chciałbym, aby działała w nieco tradycyjny sposób:

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

lub

myPlugin({options}, anotherFunction());

Jak obsłużyć ten parametr w kodzie? Czy jest traktowany jako jeden pełny byt? Jestem prawie pewien, że wiem, gdzie umieścić kod wykonawczy, ale jak mam go wykonać? Wydaje się, że nie mogę znaleźć dużej literatury na ten temat.

dclowd9901
źródło
2
Twoja druga składnia wywołuje funkcję zamiast ją przekazywać. Musisz usunąć()
SLaks
6
Osobiście uważam, że lepiej będzie, jeśli callback będzie określony jako część parametru „options”. Jest to szczególnie ważne, jeśli okaże się, że istnieje więcej powodów niż jeden do dostarczenia połączenia zwrotnego.
Pointy
1
Jak by coś takiego wyglądało, Pointy? Chcesz udzielić odpowiedzi-odpowiedzi?
dclowd9901

Odpowiedzi:

167

Po prostu wykonaj callback we wtyczce:

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

Możesz również mieć wywołanie zwrotne w obiekcie opcji:

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

};

Użyj tego w ten sposób:

$('.elem').myPlugin({
    callback: function() {
        // some action
    }
});
David Hellsing
źródło
Tylko dodatek do tej odpowiedzi. Jest post, który to wyjaśnia: jquery-howto.blogspot.com/2009/11/…
RaphaelDDL
@David Jak dodać parametr callback, chcę to zrobić$('.elem').myPlugin({ callback: function (param) { // some action } });
Jeaf Gilbert
2
@JeaffreyGilbert Powinieneś także przynieść kontekst jQuery, zrobiłbym tooptions.callback.call(this, param);
David Hellsing
@David Chcę dwa wywołania zwrotne, zadzwoniłem animateBeforei animateAfter. proszę powiedz mi, jak korzystać z twojego rozwiązania?
user007
5

Nie wiem, czy dobrze rozumiem twoje pytanie. Ale w przypadku drugiej wersji: to zadzwoni anotherFunctionnatychmiast.

Zasadniczo twoja wtyczka powinna być jakąś funkcją, która wygląda tak:

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

Musisz podać obiekt funkcji jako wywołanie zwrotne, więc albo function(){...}albo anotherFunction(bez ()).

Felix Kling
źródło
4

Przywraca podmuch z przeszłości.

Warto zauważyć, że jeśli masz przekazane dwa argumenty, na przykład:

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

Następnie wywołujesz wtyczkę bez argumentu opcji, ale z wywołaniem zwrotnym, wtedy napotkasz problemy:

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

Używam tego, aby uczynić go nieco bardziej elastycznym:

if($.isFunction(options)) { callback = options }
Sam Potts
źródło
3

Myślę, że to może ci pomóc

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

Udostępniłem artykuł o tworzeniu własnej wtyczki jQuery. Myślę, że powinieneś sprawdzić, czy http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/

Shubham Kumar
źródło
1

Zmień funkcję wtyczki, aby przyjmowała drugi parametr. Zakładając, że użytkownik przekazuje funkcję, parametr ten można traktować jako zwykłą funkcję.
Zauważ, że możesz również ustawić wywołanie zwrotne jako właściwość parametru options.

Na przykład:

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

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

    ...
});
SLaks
źródło
0

Przykład trochę późno, ale może się przydać. Używanie argumentów może stworzyć taką samą funkcjonalność.

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