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中，您可以通过两种方式转到特定幻灯片：

使用意向外部链接的$('.anythingSlider').anythingSlider(2);。但是这种方法实际上使用下面的方法来执行操作。
第二种方式，显示如何通过数据访问子功能，如下所示：$('.anythingSlider').data('AnythingSlider').gotoPage(2);

也许有更简单/更好的方法，但我认为作者对这种方法有最好的解释/推理。所以@Doug Neiner（如果有效），给我们一个想法：）

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

1 个答案: