3

我正在尝试制作一个简单的 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 教程展示了如何维护可链接性。

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

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

提前致谢！

4

2 回答 2

1

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

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

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

于 2013-01-11T04:38:30.947 回答
1

正如您所说的“这对我来说似乎很脏”，这正是您提到的 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/

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

于 2013-01-11T08:55:27.847 回答