jquery - 如何扩展 jQuery 插件的方法？

Question

在下面的代码中，我尝试扩展我的测试插件。我想向现有插件添加新的方法定义。

(function($) {
    var settings = {
        bg: 'white'
    };

    var methods = {
        init: function(options) {
            options = $.extend({}, options, settings);
            return this.each(function () {
                $(this).data("test", options);
            });
        },
        whiten: function() {
            var options = this.data("test");
            this.css('background-color', options.bg);
        }
    };

    $.fn.test = function(method) {
        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');
        } 
    }  

})(jQuery);

// New Method Definition
 var methods = {     
        newMethod: function(){
            alert('umut');   
      }
 };


// Extending test plugin with newMethod
$.fn.extend(true,$.fn.test, methods );

$(document).ready(function() {
    $('ul').test().css('background-color', 'wheat');
    $('#go').click(function() {
        $('ul').test("whiten");
        // Calling newMethod
        $('ul').test("newMethod");    
    });
});

但是我在 firebug 控制台遇到以下错误:

uncaught exception: Method newMethod does not exist

如何延长

var methods = {
}

阻止我的测试插件？

这是 jsfiddle link .

Answer 1

对于那些使用 jQuery 团队推荐的插件结构的人来说，添加方法会很困难，因为 $.fn 对象中只添加了一个函数，因此也只有一个公共(public)函数。因此，就我而言，我认为最好的解决方案是向插件添加一个扩展methods变量的方法。这可以像任何其他功能一样从插件外部访问。示例如下:

(function($) {
    var settings = {
        bg: 'white'
    };

    var methods = {
        init: function(options) {
            options = $.extend({}, options, settings);
            return this.each(function () {
                $(this).data("test", options);
            });
        },
        whiten: function() {
            var options = this.data("test");
            this.css('background-color', options.bg);
        },
        extendMethods: function(newMethods) {
            $.extend(true, methods, newMethods);
            return $(this);
        }
    };

    $.fn.test = function(method) {
        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');
        } 
    }  

})(jQuery);

瞧!然后你只需要像这样调用它:

$.fn.test('extendMethods',{...Methods object here...});

注意:我知道这需要您首先编辑插件代码，但不需要添加太多内容，并且在许多情况下可能是可行的。希望它对某人有帮助!