JQuery - 小部件公共方法

Question

如果我创建一个 JQuery 小部件（下面的代码示例），然后定义一个“公共”方法，除了使用以下形式之外，还有其他方法来调用该方法吗？

$("#list").list("publicMethod"); 

我想创建一系列定义相同方法（基本上实现相同接口）的小部件，并且能够在不知道我当前正在调用哪个小部件的情况下调用该方法。在当前表单中，我需要知道我正在“列表”小部件上执行该方法。

---

下面是使用“public”方法创建小部件的示例。

 (function($) {
    var items = [];
    var itemFocusIdx = 0;

    $.widget("ui.list", {
        // Standard stuff
        options : { ... },
        _create : function() { ... },
        destroy : function() { ... },

        // My Public Methods
        publicMethod : function() { ... }
        ...
    });
}(jQuery));

Answer 1

jQuery UI 小部件使用 jQuery 的 $.data(...) 方法间接将小部件类与 DOM 元素关联起来。在小部件上调用方法的首选方法正是 Max 所描述的...

$('#list').list('publicMethod');

...但是如果您想获取返回值，则通过 data 方法以这种方式调用它会更好：

$('#list').data('list').publicMethod();

但是，使用第二种方式回避了整个 jQuery UI 小部件模式，如果可能的话应该避免。

Answer 2

我知道有点偏离主题，但您可能想看看 jquery Entwine。

这提供了一种继承和多态性的形式，允许使用简单的代码实现一些巧妙的行为。听起来这会做你想做的事情。

Answer 3

假设您有 list、list2 和 superList...让我们为它们中的每一个调用“publicMethod”：

$.fn.callWidgetMethod = function(method) {
  var $this = this,
      args = Array.prototype.slice.call(arguments, 1);

  // loop though the data and check each piece of data to
  // see if it has the method
  $.each(this.data(), function(key, val) {
    if ($.isFunction(val[method])) {
      $this[key].apply($this, args);

      // break out of the loop
      return false;
    }
  });
}

$("#some-element").list();
$("#another-element").list2();
$("#hydrogen").superList();

$("#some-element").callWidgetMethod("publicMethod");
$("#another-element").callWidgetMethod("publicMethod");
$("#hydrogen").callWidgetMethod("publicMethod");

Answer 4

这个解决方案的灵感来自于 @Jiaaro 的解决方案，但我需要一个返回值并作为 JavaScript 函数实现，而不是扩展 jQuery：

var invokeWidgetMethod = function(methodName, widgetElem)
    {
        var $widgetElem = $(widgetElem),
            widgetData = $widgetElem.data(),
            dataName,
            dataObject;

        for(dataName in widgetData)
        {
            dataObject = widgetData[dataName];
            if ($.isFunction(dataObject[methodName])) {
                return dataObject[methodName]();
            }
        }
    }

Answer 5

试试这个：

$("#list").list("publicMethod");

Answer 6

这个怎么样：

$("#list").list.publicMethod

当您使用键：值对集扩展 ui.list 时