Question

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

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

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

以下是使用“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');

...但是如果你想要一个返回值，你可以通过数据方法以这种方式调用它：

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

然而，使用第二种方法是对整个jQuery UI小部件模式进行侧面步骤，如果可能的话应该避免使用。

Answer 2

我知道，稍微偏离主题，但你可能想看看jquery Entwine。

这提供了一种继承和多态的形式，它允许使用简单的代码进行一些聪明的行为。这听起来像你要做的那样。

Answer 3

假设您有list，list2和superList ...让我们为每个人打电话给“公共方法”：

$.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

试试这个：

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

Answer 5

这个解决方案的灵感来自@ 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 6

这个怎么样：

$("#list").list.publicMethod

当您使用key：value pair set

扩展ui.list时

JQuery - Widget公共方法

6 个答案: