在插件初始化后向插件添加回调

Question

我写了一个简单的 jQuery 插件。我的插件使用 'forward' 按钮创建了一个 HTML 元素。该按钮执行一些操作，并且可以调用回调，如果用户设置的话。

我可以在初始化阶段添加回调，例如（选项 1）：

$('selector').myPlugin({onForward: function(){console.log('forward'); } });

这很好。

但是当我尝试在创建插件后设置回调时（选项 2）：

var $plugin = $('selector').myPlugin();
$plugin.myPlugin('onForward',function(){console.log('forward'); });

插件没有触发回调。

我有一个 'defaults' 变量，用于保存回调。

var defaults = {
 onForward:         function (){}, // initialize with empty callback
}

当我用 "onForward" 方法设置它时，使用调试器，我可以看到 defaults.onForward 的值是用新的回调设置的，但是当按钮被触发时，似乎像按钮 'forgot' 我之前设置的方法并使用初始化中的默认空方法。

这是插件代码的片段：

    (function($){
    $.fn.myPlugin = function(methodOrOptions){

        var $self = $(this);
        var defaults = {
                onForward:      function (){},
        };
        var methods = {
                init: function(options){
                    $.extend(defaults,options);
                    $self.find('button#forward').on('click',events.forward); 
                    return $self;
                },
                onForward: function(callback){
                    defaults.onForward      = callback; // setting the callback after initialization
                },

        };
        var events = {
                forward: function(){
                    // do stuff and call the callback
                    defaults.onForward();
                }
        }
        if(methods[methodOrOptions]){
            return methods[methodOrOptions].apply(this,Array.prototype.slice.call( arguments, 1 ));
        }
        else if(typeof(methodOrOptions) === 'object' || !methodOrOptions ){
            return methods.init.apply(this,arguments)
        }
        else{
            console.log('error: method: '+methodOrOptions+' does not exists');
        }

})(jQuery);

我做错了什么？？谢谢

Answer 1

问题似乎在于，每次调用 myPlugin() 函数时，您实际上都获得了 defaults 的新实例。因此，您在第一次调用中修改的实例实际上与您在第二次调用中修改的实例不同。

为了避免这种情况，您必须将默认值存储在组件的 data() 对象中，然后在每个函数调用的新时间单位中调用它：

$self.data("defaults", defaults)

要在 on forward 方法中再次获取它，您必须执行以下操作：

onForward: function(callback){
   var $self = $(this);                    
   $self.data("defaults").onForward = callback; 
}

您的事件处理程序应该看起来像这样：

 var events = {
     forward: function(){
        $self.data("defaults").onForward();
     }
 }

在此处查看工作 fiddle：http://jsfiddle.net/s4rjh9a4/1/

在插件初始化后向插件添加回调

adding callback to plugin, after plugin initialization

jquery

jquery-plugins