jQuery Plugin: Hinzufügen von Rückruffunktionen


86

Ich versuche, meinem Plugin eine Rückruffunktion zu geben, und ich möchte, dass es auf eine etwas traditionelle Art und Weise funktioniert:

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

oder

myPlugin({options}, anotherFunction());

Wie gehe ich mit diesem Parameter im Code um? Wird es als eine vollständige Einheit behandelt? Ich bin mir ziemlich sicher, dass ich weiß, wo ich den ausführenden Code platzieren würde, aber wie kann ich den Code ausführen? Ich kann nicht viel Literatur zu diesem Thema finden.


2
Ihre zweite Syntax ruft die Funktion auf, anstatt sie zu übergeben. Sie müssen die()
SLaks

6
Persönlich denke ich, dass es besser ist, wenn Sie den Rückruf als Teil des Parameters "options" angeben. Dies gilt insbesondere dann, wenn sich herausstellt, dass es mehrere Gründe gibt, einen Rückruf zu liefern.
Pointy

1
Wie würde so etwas aussehen, Pointy? Möchten Sie eine Antwort-Antwort geben?
dclowd9901

Antworten:


167

Führen Sie einfach den Rückruf im Plugin aus:

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

Sie können den Rückruf auch im Optionsobjekt haben:

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

};

Verwenden Sie es so:

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

Nur eine Ergänzung für diese Antwort. Es gibt einen Beitrag, der dies erklärt: jquery-howto.blogspot.com/2009/11/…
RaphaelDDL

@ David Wie man Rückrufparameter hinzufügt, möchte ich dies tun$('.elem').myPlugin({ callback: function (param) { // some action } });
Jeaf Gilbert

2
@JeaffreyGilbert Du solltest auch den jQuery-Kontext mitbringen, das würde ich tunoptions.callback.call(this, param);
David Hellsing

@ David Ich möchte zwei Rückrufe, genannt animateBeforeund animateAfter. Bitte sagen Sie mir, wie Sie Ihre Lösung verwenden sollen.
user007

5

Ich weiß nicht, ob ich Ihre Frage richtig verstehe. Aber für die zweite Version: Dies würde anotherFunctionsofort aufrufen .

Grundsätzlich sollte Ihr Plugin eine Funktion sein, die so aussieht:

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

Sie haben eine Funktion zur Verfügung zu stellen Objekts als Rückruf, also entweder function(){...}oder anotherFunction(ohne ()).


4

Eine Explosion aus der Vergangenheit zurückbringen.

Beachten Sie Folgendes, wenn Sie zwei Argumente übergeben haben, zum Beispiel:

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

Dann rufen Sie das Plugin ohne das Argument options auf, aber mit einem Rückruf stoßen Sie auf folgende Probleme:

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

Ich benutze dies, um es etwas flexibler zu machen:

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

3

Ich denke, das könnte dir helfen

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

Ich hatte einen Artikel über das Erstellen Ihres eigenen jQuery-Plugins geteilt. Ich denke, Sie sollten überprüfen, ob http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/


1

Ändern Sie Ihre Plugin-Funktion, um einen zweiten Parameter zu übernehmen. Unter der Annahme, dass der Benutzer eine Funktion übergibt, kann dieser Parameter als reguläre Funktion behandelt werden.
Beachten Sie, dass Sie den Rückruf auch zu einer Eigenschaft des Optionsparameters machen können.

Beispielsweise:

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

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

    ...
});

0

Ein Beispiel etwas spät, aber es kann nützlich sein. Die Verwendung von Argumenten kann dieselbe Funktionalität erzeugen.

$.fn.myPlugin = function() {
    var el = $(this[0]);
    var args = arguments[0] || {};
    var callBack = arguments[1];
    .....
    if (typeof callback == 'function') {
        callback.call(this);
    }
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.