jquery - 像 jQuery UI 中一样重写 jQuery 插件函数

Question

我知道这个问题已经被问了好几次了，但答案似乎并不正是我想要的。假设我有一个名为“jdropdown”的插件，如下所示:

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

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

现在，在声明插件时，我希望允许用户覆盖插件中的 renderItem 函数。我注意到 jQuery UI 通过允许通过 data 属性访问项目来解决这个问题(如本例中所示: http://jqueryui.com/demos/autocomplete/#custom-data )，但每当我尝试自己制作类似的东西时，我都会陷入死胡同。我已阅读以下内容的“数据”部分:http://docs.jquery.com/Plugins/Authoring无济于事(他们并没有真正描述东西如何运作得那么好，他们只是写了很多“FTW”并说明为什么它有用)。

有谁可以告诉我如何使用我的元素(插件 anchor )的数据属性来访问插件方法来覆盖它们，如下所示:

$('.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);
      }
  })();