Question

我知道这个问题已经过了几次，但答案似乎并不是我想要的。假设我有一个名为“jdropdown”的插件，它看起来像：

(function($){
    var options = {},
    methods = {},
    renderItem = function(){},

    $.fn.jdropdown = function(method){
        // plugin method despatcher
    });
 })(jQuery);

现在，当声明插件时，我想允许用户覆盖插件中的renderItem函数。我注意到jQuery UI通过允许通过数据属性访问项目来解决这个问题（在这个示例中可以看出：http://jqueryui.com/demos/autocomplete/#custom-data）但是每当我尝试自己制作这样的东西时，我就走到了尽头。我已经阅读了http://docs.jquery.com/Plugins/Authoring的“数据”部分无济于事（他们并没有真正描述这些东西是如何工作的，他们只是写了很多'FTW'并说明它为什么有用）。

是否有人可以告诉我如何使用我的元素的数据属性（插件锚）访问插件方法来覆盖它们，如下所示：

$('.someThing').jdropdown().data('jdropdown').renderItem = function(){}

谢谢，

Answer 1

创建一个闭包并保存原始插件以供将来重用;
使用相同的名称重新创建插件;

执行您想要的所有操作并调用原始插件。

(function(){
    var originalPlugin = $.fn.pluginname;

    $.fn.pluginname = function(options) {

        var defaults = {
            someOption: 'string',
            anotherOption: { /* some object, if you need it ... */ }
        }

        var options = $.extend(defaults, options);
        var $this = $(this);
        $this.css('background-color', 'red'); // for example

        /* do something with '$this' applying any jquery */

        originalPlugin.apply(this, arguments);
    }
})();

Answer 2

将其作为选项传递。

(function($){
    var options = {
       renderItem: function(){}
    };

    $.fn.jdropdown = function(method){
        $.extend(options, method);
        // plugin method despatcher
    };
 })(jQuery);

然后使用它：

$('.someThing').jdropdown({
    renderItem: function(){
        //something....
    }
});

简单示例：http://jsfiddle.net/maniator/GxGz9/

像在jQuery UI中一样覆盖jQuery插件函数

2 个答案: