javascript - 编写 jQuery 插件的最佳方式 - 如果有这样的方式？

Question

有很多方法可以编写插件，即 here's a nice example我最近经常看到的是以下代码模式，Doug Neiner 使用了它 here ;

(function($){
   $.formatLink = function(el, options){
    var base = this;
    base.$el = $(el);
    base.el = el;
    base.$el.data("formatLink", base);
    base.init = function(){
       base.options = $.extend({}, $.formatLink.defaultOptions, options); 
       //code here
    }                 
    base.init();
   };

   $.formatLink.defaultOptions = { };

   $.fn.formatLink = function(options){
      return this.each(function(){
       (new $.formatLink(this, options));
      });
   };
})(jQuery);

那么，谁能告诉我使用上面的模式而不是下面的模式的好处。我看不出为 jQuery 堆栈中的每个元素调用 $.extend 函数的意义(上图)，下面的示例只执行一次，然后在堆栈上工作。

为了测试它，我创建了两个插件，使用两种模式，它们将样式应用于大约 5000 li 元素，下面的代码花费了大约 1 秒，而上面的模式花费了大约 1.3 秒。

(function($){
   $.fn.formatLink = function(options){
       var options = $.extend({}, $.fn.formatLink.defaultOptions, options || {});

       return this.each(function(){
        //code here
       });
    });

$.fn.formatLink.defaultOptions ={}
})(jQuery);

Answer 1

我知道 Doug 在编写 Anything Slider 时使用了这种格式，我认为这样做是为了公开内部函数并使其在插件初始化后更容易调用它们。例如，在 Anything Slider 中，您可以通过两种方式转到特定幻灯片:

1. 使用 $('.anythingSlider').anythingSlider(2); 用于外部链接。但是这个方法实际上使用了下面的方法来执行 Action 。
2. 第二种方式显示了如何通过数据访问子函数，方法如下:$('.anythingSlider').data('AnythingSlider').gotoPage(2);

也许有更简单/更好的方法，但我认为作者对此方法有最好的解释/推理。所以@Doug Neiner(如果可行的话)，给我们一个想法:)