代码之家 › 专栏 › 技术社区 › dclowd9901

jquery插件:添加回调功能

callback function jquery

dclowd9901 · 技术社区 · 15 年前

我试图给我的插件回调功能,我希望它以一种有点传统的方式操作:

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

或

myPlugin({options}, anotherFunction());

如何在代码中处理该参数?它被视为一个完整的实体吗?我很肯定我知道将要执行的代码放在哪里,但是如何让代码执行呢?我似乎找不到很多关于这个话题的文献。

6 回复 | 直到 7 年前

163

David Hellsing 15 年前

只需在插件中执行回调:

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

Felix Kling 15 年前

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

基本上你的插件应该是这样的函数:

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

你必须提供一个功能对象作为回拨,所以 function(){...} 或 其他功能 (没有 () )

Sam Potts 13 年前

把过去的爆炸带回来。

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

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

然后在不使用options参数但使用回调函数的情况下调用插件,将遇到以下问题:

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

我用这个让它更灵活一点:

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

Shubham Kumar 10 年前

我想这对你有帮助

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

SLaks 15 年前

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

例如:

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

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

    ...
});

Draka 12 年前

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

$.fn.myPlugin = function() {
    var el = $(this[0]);
    var args = arguments[0] || {};
    var callBack = arguments[1];
    .....
    if (typeof callback == 'function') {
        callback.call(this);
    }
}