登录

javascript - 关于jQuery插件开发,defaults 定义了一个对象为空的方法,在外部调用时如何向这个空的方法添加方法

这是一个自己写的一个简单插件,问题在下面代码中有注释

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

这是我外部调用时的代码

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

问题在上述代码里有注释,还望大神指教!!!

# JavaScript
伊谢尔伦 伊谢尔伦 2481 天前 749 次浏览

全部回复(2) 我要回复

  • 滿天的星座

    滿天的星座2017-07-05 11:04:42

    好久没写过jquery插件了,应该是用把外部添加值通过$.extend方法来拓充到内部

    回复
    0
  • 黄舟

    黄舟2017-07-05 11:04:42

    已经找到其中一个答案了,关于回调函数的使用
    http://learn.jquery.com/plugi...

    插件内回调函数写法

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

    外部调用时使用回调函数

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

    回复
    0
  • 取消 回复 发送