jQuery 插件：添加回调功能

Posted 2023-02-19

【中文标题】jQuery 插件：添加回调功能

【英文标题】：jQuery Plugin: Adding Callback functionality

【发布时间】：2011-02-01 19:53:51

【问题描述】：

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

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

或

myPlugin(options, anotherFunction());

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

【问题讨论】：

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

我个人认为最好将回调指定为“选项”参数的一部分。如果提供回调的原因不止一个，则尤其如此。

这样的东西看起来怎么样，Pointy？愿意提供答案吗？

【参考方案1】：

只需执行插件中的回调：

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

你也可以在选项对象中设置回调：

$.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/…

@David 如何添加回调参数，我想做这个$('.elem').myPlugin( callback: function (param) // some action );

@JeaffreyGilbert 你也应该带上 jQuery 上下文，我会做options.callback.call(this, param);

@David 我想要两个回调，称为animateBefore 和animateAfter。请告诉我如何使用您的解决方案？？

【参考方案2】：

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

基本上你的插件应该是某种看起来像这样的函数：

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

你必须提供一个函数object作为回调，所以要么function()...要么anotherFunction（没有()）。

【参考方案3】：

带回过去的爆炸。

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

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

然后你在没有选项参数的情况下调用插件但使用回调然后你会遇到问题：

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

我用它来让它更灵活一点：

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

【参考方案4】：

我想这可能对你有帮助

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

【参考方案5】：

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

例如：

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

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

    ...
);

【参考方案6】：

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

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