jQuery插件:添加回调功能


86

我正在尝试提供我的插件回调功能,并且我希望它以某种传统的方式运行:

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

要么

myPlugin({options}, anotherFunction());

如何在代码中处理该参数?它被视为一个完整的实体吗?我很确定我知道将执行代码放在哪里,但是如何获取执行代码?我似乎找不到关于该主题的大量文献。


2
您的第二种语法调用该函数而不是传递它。您需要删除()
SLaks

6
我个人认为您最好将回调指定为“ options”参数的一部分。如果它发现提供回调的原因比一个多,那就更是如此。
尖尖的

1
Pointy这样的样子如何?想提供答案吗?
dclowd9901 2010年

Answers:


167

只需在插件中执行回调:

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

您还可以在options对象中具有回调:

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

};

像这样使用它:

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

只是此答案的补充。有解释这一个帖子:jquery-howto.blogspot.com/2009/11/...
RaphaelDDL

@David如何添加回调参数,我想这样做$('.elem').myPlugin({ callback: function (param) { // some action } });
Jeaf Gilbert

2
@JeaffreyGilbert我也应该带上jQuery上下文options.callback.call(this, param);
David Hellsing 2012年

@David我想要两个回调,分别称为animateBeforeanimateAfter。请告诉我如何使用您的解决方案?
user007

5

我不知道我是否正确理解您的问题。但是对于第二个版本:这将anotherFunction立即调用。

基本上,您的插件应该是某种如下形式的功能:

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

你必须提供一个函数对象回调,所以无论是function(){...}anotherFunction(无())。


4

带回过去的爆炸声。

值得注意的是,如果您传递了两个参数,例如:

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

然后调用不带options参数但带有回调的插件,那么您将遇到问题:

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

我使用它来使其更加灵活:

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

3

我认为这可能对您有帮助

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

我分享了一篇有关创建自己的jQuery插件的文章。我认为您应该检查一下 http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/


1

更改您的插件函数以使用第二个参数。假设用户传递了一个函数,则该参数可以视为常规函数。
请注意,您还可以使回调成为options参数的属性。

例如:

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

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

    ...
});

0

一个例子有点晚,但是它可能是有用的。使用参数可以创建相同的功能。

$.fn.myPlugin = function() {
    var el = $(this[0]);
    var args = arguments[0] || {};
    var callBack = arguments[1];
    .....
    if (typeof callback == 'function') {
        callback.call(this);
    }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.