将回调传递到我的jquery插件时出现问题

将回调传递到我的jquery插件时出现问题,jquery,jquery-plugins,Jquery,Jquery Plugins,我正在尝试开发一个插件,它将回调作为init的第一个参数。我试图修改官方的插件代码。我不明白为什么这里出了问题: 插件: (function( $ ){ var methods = { init : function( callback, options ) { // Create some defaults, extending them with any options that were provided va

我正在尝试开发一个插件,它将回调作为init的第一个参数。我试图修改官方的插件代码。我不明白为什么这里出了问题:

插件:

(function( $ ){

    var methods = {

        init : function( callback, options ) { 

            // Create some defaults, extending them with any options that were provided
            var settings = $.extend( {
                'location'         : 'top',
                'background-color' : 'blue'
                }, options);


            return this.each(function() {        

                $this.click(function(e) {

                    e.stopPropagation();
                    var $target = $(e.target);
                    if (callback) 
                        callback($target);
                });

            });
        },

    };

    $.fn.myplugin = function( method ) {

        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.myplugin' );
        }

    };

})( jQuery );
// Create callback function
var callback = function(){alert('hey');};

$('#my-control').myplugin(callback,{'width':'600px'}); 
调用插件:

(function( $ ){

    var methods = {

        init : function( callback, options ) { 

            // Create some defaults, extending them with any options that were provided
            var settings = $.extend( {
                'location'         : 'top',
                'background-color' : 'blue'
                }, options);


            return this.each(function() {        

                $this.click(function(e) {

                    e.stopPropagation();
                    var $target = $(e.target);
                    if (callback) 
                        callback($target);
                });

            });
        },

    };

    $.fn.myplugin = function( method ) {

        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.myplugin' );
        }

    };

})( jQuery );
// Create callback function
var callback = function(){alert('hey');};

$('#my-control').myplugin(callback,{'width':'600px'}); 
错误:

(function( $ ){

    var methods = {

        init : function( callback, options ) { 

            // Create some defaults, extending them with any options that were provided
            var settings = $.extend( {
                'location'         : 'top',
                'background-color' : 'blue'
                }, options);


            return this.each(function() {        

                $this.click(function(e) {

                    e.stopPropagation();
                    var $target = $(e.target);
                    if (callback) 
                        callback($target);
                });

            });
        },

    };

    $.fn.myplugin = function( method ) {

        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.myplugin' );
        }

    };

})( jQuery );
// Create callback function
var callback = function(){alert('hey');};

$('#my-control').myplugin(callback,{'width':'600px'}); 
jQuery.myplugin上不存在方法函数(){alert('hey');}

这一行:

else if ( typeof method === 'object' || ! method ) {
正在导致触发
$.error
条件(在下一个
else
子句中),因为您正在检查方法名称或选项对象,并且没有考虑传入函数类型的参数

我建议将
回调
选项作为
选项
对象的一部分:

(function($) {

    var methods = {

        init: function(options) {
            console.dir(arguments);
            // Create some defaults, extending them with any options that were provided
            var settings = $.extend({
                'location': 'top',
                'background-color': 'blue'
            }, options);


            return this.each(function() {

                $(this).click(function(e) {

                    e.stopPropagation();
                    var $target = $(e.target);
                    if (settings.callback) settings.callback($target);
                });

            });
        },

    };

    $.fn.myplugin = function(method) {

        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.myplugin');
        }

    };

})(jQuery);
用法:

var callback = function(){alert('hey');};
$('#my-control').myplugin({'width':'600px', callback: callback}); 
示例:

var callback = function(){alert('hey');};
$('#my-control').myplugin({'width':'600px', callback: callback});