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

夸大，对于插件，网上有最好的教程如下：

https://tutsplus.com/author/jeffreyway/?q=true&filter_topic=35

我见过他的jquery插件视频。真的很高兴看到并从中学习。

Answer 2

正如你所说'对我来说似乎很脏'，这正是你提到的jQuery页面所说的：

在任何情况下，任何一个插件都不应声称不止一个 jQuery.fn对象中的命名空间。

(function( $ ){

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

})( jQuery );

可链接性就是你的回报。如果要从插件中链接方法，则必须返回包含方法的对象。小提琴：http://jsfiddle.net/ma4nj/

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

如果你看一下add（）函数你可以看到我再次返回了实例，所以这里没有什么新东西，正如我刚刚解释的那样，我这样做了所以这些方法是可链接的。

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

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

jQuery插件开发：如何正确使用可链接性？

2 个答案: