javascript - Regarding jQuery plug-in development, defaults defines a method with an empty object. How to add methods to this empty method when called externally?

Question

This is a simple plug-in written by myself. The problem is commented in the code below

(function($, window, document, undefined) {
    // 创造一个公共变量来构建一个私有方法
    var privateFunction = function() {
        // 不是很明白这个私有方法要如何使用，具体有什么用，找了一下资料也不是很明白
    }
    var methods = {
        nTab: function(options) {
            return this.each(function() {
                // 关于 data() 有没有必要用在这里，我理解 data() 函数是用来保存插件默认没有的参数或方法用的。不知道这样理解对不对。和我预留一个onSomeEvent 函数来增加一些功能有什么区别？
                var $this = $(this);
                var defaults = {
                    tabTitle: '.product-tab-title li',
                    tabContent: '.product-tab-content',
                    tabTitleState: 'active',
                    tabContentBlock: 'block',
                    tabContentNone: 'none',
                    eventType: 'click',
                    onSomeEvent: function() {} // 这个为空的方法我预留处理打算以后遇到需要添加功能的时候使用，但怎么弄都不知道具体的使用方法
                };
                var settings = $.extend({}, defaults, options);
                $this.find(settings.tabTitle).on(settings.eventType, function() {
                    index = $(this).index();
                    $(this).addClass(settings.tabTitleState).siblings().removeClass(settings.tabTitleState);
                    $(settings.tabContent).eq(index).addClass(settings.tabContentBlock).removeClass(settings.tabContentNone)
                                                    .siblings(settings.tabContent).addClass(settings.tabContentNone).removeClass(settings.tabContentBlock);
                });
            });
        }
    };
    $.fn.userInCommonUseJsPlugin = function() {
        var method = arguments[0];
        if(methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else/* if( typeof(method) == 'object' || !method ) {
            method = methods.init;
        } else */{
            $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
            return this;
        }
        return method.apply(this, arguments);
    }
})(jQuery, window, document);

This is my code for external calls

$(function(){
            $('.nTab').userInCommonUseJsPlugin('nTab', {
                // 我想找这里写一个onSomeEvent: function() {}来增加插件没有的功能，该如何实现
            });
        })

The problem is commented in the above code, I hope you can give me some advice! ! !

Answer 1

I haven’t written a jquery plug-in for a long time. I should use the $.extend method to extend the external added value to the internal part

Answer 2

Already found one of the answers, about the use of callback functions
http://learn.jquery.com/plugi...

How to write the callback function in the plug-in

 var defaults = {
    // We define an empty anonymous function so that
    // we don't need to check its existence before calling it.
    onImageShow : function() {},
 
    // ... rest of settings ...
 
};
 
// Later on in the plugin:
 
nextButton.on( "click", showNextImage );
 
function showNextImage() {
 
    // Returns reference to the next image node
    var image = getNextImage();
 
    // Stuff to show the image here...
 
    // Here's the callback:
    settings.onImageShow.call( image );
}

Use callback function when calling externally

$( "ul.imgs li" ).superGallery({
    onImageShow: function() {
        $( this ).after( "<span>" + $( this ).attr( "longdesc" ) + "</span>" );
    },
 
    // ... other options ...
});