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

Question

我写了一个简单的jQuery插件。我的插件创建一个HTML元素与‘前进’按钮。该按钮可以执行一些操作，如果用户设置了回调，则可以调用回调。

我可以在初始化阶段添加一个回调，如(选项1)：

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

那就很好了。

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

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

插件没有触发回调。

我有一个“默认值”变量，用于保存回调。

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

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

下面是插件代码的一个片段：

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

我做错什么了?？Thx

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();
     }
 }

见此处工作小提琴：http://jsfiddle.net/s4rjh9a4/1/