首頁  >  問答  >  主體

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() {}来增加插件没有的功能,该如何实现
            });
        })

問題在上述程式碼裡有註釋,還望大神指教! ! !

伊谢尔伦伊谢尔伦2663 天前869

全部回覆(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
  • 取消回覆