jQuery - 小部件公共方法

Posted 2023-02-21

技术标签:

【中文标题】jQuery - 小部件公共方法【英文标题】：JQuery - Widget Public Methods 【发布时间】：2011-02-16 01:12:49 【问题描述】：

如果我创建一个 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));

【问题讨论】：

他们必须使用 $.widget，还是您愿意使用继承和 $.fn？ 【参考方案1】：

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

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

...但是如果你想输入一个返回值，你会更幸运地通过 data 方法调用它：

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

但是，使用第二种方式会避开整个 jQuery UI 小部件模式，应该尽可能避免使用。

【讨论】：

【参考方案2】：

我知道，这有点离题，但你可能想看看 jquery Entwine。

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

【讨论】：

【参考方案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");

【讨论】：

【参考方案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]();

【讨论】：

【参考方案5】：

试试这个：