如何为 jQuery 插件编写方法？答案

【问题标题】：How to write a method for a jQuery plugin?如何为 jQuery 插件编写方法？
【发布时间】：2010-02-23 21:39:29
【问题描述】：

我编写了一个相当基本的 jQuery 插件，它接受一个无序列表并创建一个漂亮的多选列表。将其称为“multiSelector”，插件声明如下所示：

jQuery.fn.multiSelector = function(options) {
    // plugin code
}

该插件实际上是在一个包含无序列表的 div 上运行的（出于 CSS 原因等），因此该插件的典型用法如下所示：

var $listDiv = $('#listDiv') // div that contains unordered list
$listDiv.multiSelector();

它工作得很好，所以我在创建插件时没有任何问题。但是，我现在想做的是为用户提供一种从他们的列表中获取所有选定项目的方法。我在网上寻找如何从这个插件创建函数，但我似乎真的找不到任何方法来使用函数扩展它。

最好做这样的事情，其中 'itemArray' 是基于列表项的 id（或其他内容）的字符串数组：

var itemArray = $listDiv.multiSelector().getSelected();

我意识到我在这里的逻辑可能有问题，但我只是在寻找一些关于如何实现这一点的指导。也许我需要编写一个新的 jQuery 函数来处理这个特定的任务，或者我仍然可以以某种方式将它附加到这个 multiSelector 插件上。任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： jquery function plugins

【解决方案1】：

我建议添加调用方法的选项作为插件的参数。这是大多数（所有？）jQuery UI 插件处理它的方式。

jQuery.fn.multiSelector = function( options ) {
   if (typeof options === "string") {
      if (options == "selected") {
         ...return the selected elements
      }
      return null;
   }

   options = $.extend( {}, $.fn.multiSelector.defaults, options );

   ... rest of plugin body...
}

然后称它为

var selected = $('.selector').multiSelector('selected');

【讨论】：

实际上，大多数 插件会返回被修改的 dom 元素（在 OP 的示例中为#listdiv）。这允许函数链接。不过，您的方法仍然有效。
@Joel -- 抱歉，如果我不清楚。是的，插件应该返回 jQuery，除非传递了一个方法名来执行。因此，没有参数或当传递一个选项对象时，它像正常一样工作，并在传入的 jQuery 元素上设置插件。当在一组已经使用插件设置的元素上传递方法名称时，它执行方法并返回方法的结果。
@tvanfosson，感谢您的回答。这很可能是我将使用的方法。但我想知道if (typeof options === "string") { 之后是否应该有一个“else”，只是为了处理“选项”实际上是选项列表而不是方法调用的情况下的其余逻辑。你怎么看？
有一个“隐含的”else——如果它不接受 if，那么它就会继续。如果它确实接受了 if，那么它总是从函数中提前返回。这可能不清楚，因为我无法填写有关如何返回所选元素的详细信息，但它应该涉及从函数返回。
有道理。我想，对我来说，从函数中提前返回感觉有点笨拙。我只想看到一个完整的逻辑链，而不是从同一路径有多个返回点。但这只是我。呈现的方式应该可以很好地工作，这就是我将使用的。再次感谢！

【解决方案2】：

您需要让您的multiSelector 函数返回一个包含getSelected 函数的对象。

例如：

jQuery.fn.multiSelector = function(options) {
    var self = this;

    return {
        getSelected: function() { 
            return self.children('.Selected');
        },
        //Other methods
    };
}

请注意，在返回的方法中，this 关键字将引用返回的对象 ypu，而不是原始的 jQuery 对象。要解决此问题，您需要保存对原始 this 对象的引用（在我的示例中为 self）

还请注意，这会破坏方法链接，这意味着您将无法编写$(...).multiSelector().fadeIn()。（显然）

【讨论】：

坏主意；根据 jQuery 约定，您应该始终返回用于方法链接的 jQuery 对象。
有些插件可以这样做。
@meagar：除了这使得 OP 无法做他想做的事。不是每个 jQuery 方法，更不用说插件，都返回 jQuery 对象。

【解决方案3】：

如果您的插件返回一个 jQuery 对象，那么您只需编写另一个 jQuery 函数来执行“getSelected”操作。

【讨论】：

【解决方案4】：

我通常会看到这样实现的属性：

$listDiv.multiselector('option', 'property'); // 得到 $listDiv.multiselector('option', 'property', 'value'); // 设置

我想你可以对“选定”属性做类似的事情。有点麻烦，我意识到。

例如，请参阅UI/Droppable's "methods"，它们都可以通过.droppable("method_name") 访问。

您不应该做的是返回一个具有 getSelected() 方法的对象，正如几个答案所暗示的那样（除非您将所述方法添加到 jQuery 对象中）。 jQuery 插件应该返回 jQuery 对象，从长远来看，偏离这一点会让您感到悲痛，并使您的代码更难使用。

【讨论】：

【解决方案5】：

通常，插件通常会通过允许用户将特定字符串作为参数传递给插件方法来提供此功能，这将导致插件返回通常的 jQuery 对象以外的其他内容。例如，

$('#listDiv').multiSelector('getSelected') // will return an array of strings

【讨论】：