jQuery插件开发: how to use chainability right?

Question

我正在尝试制作一个简单的 jQuery 插件。我想像这样调用它的链接方法:

$("#div").myPlugin({
    /* options */
}).add(".span", {
    /* options */
}).add(".span", {
    /* options */
}).run();

我找到了一些像这样的调用的基本教程:

$("#div").myPlugin("add", "foo");

或

container = $("#div").myPlugin();
container.myPlugin.add("foo");
container.myPlugin.run();

但这不是我想要的。各地的基本教程几乎都是一样的，我不知道我必须谷歌什么。

jQuery 教程展示了如何 maintain chainability 。

我知道的唯一方法是为每个方法编写一个插件，但这对我来说似乎很脏。

jQuery.fn.myPlugin = function(); // returns this
jQuery.fn.myPluginAdd = function(); // returns this
jQUery.fn.myPluginRun = function();
$("#div").myPlugin().myPluginAdd("item1").myPluginRun();

提前致谢!

Answer 1

正如您所说“这对我来说似乎很脏”，这正是您提到的 jQuery 页面所说的:

Under no circumstance should a single plugin ever claim more than one namespace in the jQuery.fn object.

(function( $ ){

  $.fn.tooltip = function( options ) { 
    // THIS
  };
  $.fn.tooltipShow = function( ) {
    // IS
  };
  $.fn.tooltipHide = function( ) { 
    // BAD
  };
  $.fn.tooltipUpdate = function( content ) { 
    // !!!  
  };

})( jQuery );

可链性取决于您的返回。如果您想链接插件中的方法，您将必须返回一个包含您的方法的对象。 fiddle :http://jsfiddle.net/ma4nj/

如您所见，当您第一次调用 yourPlugin() 时，将返回一个包含您的插件方法的对象。这样您就可以将 yourPlugin 与 Methods 类中的其他方法链接起来。

如果您查看 add() 函数，您会发现我再次返回了实例，所以这里没有什么新内容，正如我刚才所解释的，我这样做是为了使方法可以链接。

尝试一下，尝试添加您自己的方法。请记住，您将无法使用该技术将您的插件方法与 jQuery 链接起来。实际上，如果您在插件中添加一个方法来禁用插件链，就像这样: http://jsfiddle.net/ma4nj/1/

可能有更好的方法来完成我所做的事情，但无论如何我希望这会有所帮助。