jquery - Superfish 插件 : $. fn.extend({...}) -- 这段代码是如何工作的？

Question

Superfish JS 是 here .

相关代码如下:

$.fn.extend({
    hideSuperfishUl : function() {
        // ...code here...
        return this;
    },
    showSuperfishUl : function(){
        // ...code here...
        return this;
    }
});

问题:

$.fn.extend({...}); 是否允许用户覆盖 hideSuperfishUl 和 showSuperfishUl 函数？如果是这样，调用插件时更改这些方法的语法是什么样的:

<script> 

    $(document).ready(function() { 
        $('ul.sf-menu').superfish(); // How to override hideSuperfishUl &/or showSuperfishUl?
    }); 

</script>

Superfish 是不久前编写的...这仍然是允许用户覆盖插件功能功能/方法/其他的最佳方式吗？如果没有，有没有“最好”的方法？

Answer 1

尝试在这里回答我自己的问题...如果我在下面写的任何内容有误，请纠正我!;)

<小时/>

This article说的是:

Extend

In my opinion, this is the least idiomatic way to create a jQuery plugin. It uses the jQuery.fn.extend method instead of jQuery.fn.pluginName:

(function($){
  $.fn.extend({
      myPlugin: function() {
          return this.each(function(){
              // do something
          });
      },
      myOtherPlugin: function() {
          return this.each(function() {
              // do something
          });
      }
  });
})(jQuery);

You will find this structure helpful if you need to add a large number of plugin methods to jQuery. I would contend, however, that if your plugin needs to add that many methods, there may be a better way to structure its implementation.

I feel the extend method is used more by programmers transitioning from other JS libraries. I personally find the simple $.fn.pluginName
= structure to be easier to read, and more in line with what you will normally see in jQuery plugins.

Superfish JS 使用与上面引用中相同的代码；长话短说，showSuperfishUl() 和 hideSuperfishUl() 是 jQuery $.fn 命名空间中的附加插件。

我能够像这样覆盖所述函数:

jQuery(function(){

    $.fn.showSuperfishUl = function() {
        console.log('OMG');
        return this;
    };

    $.fn.hideSuperfishUl = function() {
        console.log('BECKY');
        return this;
    };

    jQuery('ul.sf-menu').superfish();
});

下一步，this article说:

Provide public access to secondary functions as applicable

// plugin definition
$.fn.hilight = function(options) {
  // iterate and reformat each matched element
  return this.each(function() {
      var $this = $(this);
      // ...
      var markup = $this.html();
      // call our format function
      markup = $.fn.hilight.format(markup);
      $this.html(markup);
  });
};
// define our format function
$.fn.hilight.format = function(txt) {
  return '<strong>' + txt + '</strong>';
};

We could have just as easily supported another property on the options object that allowed a callback function to be provided to override the default formatting. That's another excellent way to support customization of your plugin. The technique shown here takes this a step further by actually exposing the format function so that it can be redefined. With this technique it would be possible for others to ship their own custom overrides of your plugin נin other words, it means others can write plugins for your plugin.

结论:

$.fn.extend 和 $.fn.pluginName.function 相似，允许最终用户轻松覆盖功能；前者将新插件添加到 jQuery $.fn 命名空间，而后者是包含在单个 $.fn.pluginName 命名空间中的函数。

Summary and Best Practices说:

Don't clutter the jQuery.fn object with more than one namespace per plugin.

...因此，我选择的“最佳”技术是 $.fn.pluginName.function。