JQuery - Widget公共方法

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));

- Steve

---

他们必须使用 $ .widget，还是您可以使用继承和 $ .fn？ - balupton

Answer 1

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

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

...但如果您想返回一个值，通过使用 data 方法调用会更好:

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

然而，使用第二种方式绕过了整个jQuery UI小部件模式，如果可能的话，应该尽量避免。

- cdata

Answer 2

略微偏离话题，我知道，但你可能想看一下jquery Entwine。

这提供了一种继承和多态的形式，可以使用简单的代码实现一些聪明的行为。听起来这会做到你正试图做的事情。

- Luke H

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");

- Jiaaro

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]();
            }
        }
    }

- Curt Williams

Answer 5

试试这个：

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

- Max Kramnik

Answer 6

这个怎么样？

$("#list").list.publicMethod

由于您正在使用键值对集扩展ui.list

- M A Hossain Tonu