Question

首次初始化时，大多数jQuery插件都绑定/绑定到DOM节点。

$('#foo').bar({options: ...});

如何检查当前哪些插件或对象绑定到#foo等DOM节点？

if($('#foo').bar)
if($.inArray('bar', $('#foo').eq(0)))
if($('#foo').eq(0).indexOf('bar'))
if($('#foo').hasOwnProperty('bar'))

例如，可以将事件绑定到像这样的对象

console.log($('#foo').data('events'));

Answer 1

除非插件本身定义了一些改变它正在处理的元素的方法，否则它是不可能的。例如：

$.fn.extend({
  foo: function() { console.log("I am foo!"); }
});

$('#bar').foo();

在这里，我定义了一个完整的（更好，更少）jQuery插件，它甚至不尝试与其调用元素进行交互。仍然可以在任何jQuery包装的元素集合中使用它，因为任何jQuery包装的元素集合在其原型中都有因为这一行（来自{{1}） }）：

jquery.js

...在jQuery.fn = jQuery.prototype = { ... }被调用以插入该插件后，没有任何双关语。

但即使我的插件需要以某种方式更改其调用元素，例如：

$.fn.extend

...基本上，我仍然需要处理一些外部事件（DOM Mutation），而不仅仅依赖于一些内部的jQuery日志记录。

Answer 2

就我而言，我试图检测的插件恰好将一些数据添加到元素$(element).data()存储中。我也看到插件用他们的名字添加类或ID，或者在其中添加名称。

以下是我目前正在解决此问题的代码。可能不适用于大多数插件。

$.fn.extend({
    isPluginBound: function(pluginName)
    {
        if(jQuery().pluginName)
        {
            var name = pluginName.toLowerCase();

            return this.data(pluginName) || this.data(name)
                || this.attr('class').toLowerCase().indexOf(name) !== -1 // vs hasClass()
                || this.attr('id').toLowerCase().indexOf(name) !== -1;
        }
    }
});

要使用它，只需致电$('#foo').isPluginBound('bar');

Answer 3

据我所知，所有jQuery Widgets都将其实例附加到他们的DOM节点。即时通讯在我的项目中使用follwing扩展。在一个你不知道名字的小部件上调用一个方法也很有用（例如，调用一个扩展小部件的基本方法）

// returns first found widget instance of the first element or calls method on first widget instance of all elements
$.fn.widget = function ( method , option, value ) { 
  var wi;
  // iterate all elements 
  this.each( function() {
    var wii;
    // iterate all attached data elements, look for widget instances
    $.each( $(this).data(), function( key, data ){ 
      if ( "widgetName" in data ){ wii = data; return false } 
    })
    // if there is a widget instance but no method specified
    if ( wii && !method ) {
      wi = wii;
      return false
    }
    // if there is a widget and there is an object found with the method as the key
    else if ( wii && ( method in wii ) ) {
      // if it is truly a method of that instance, call that instance
      if ( $.isFunction( wii[method] ) ) {
        wi = wii[method].call( wii, option, value )
      } 
      // else, it is maybe a value stored in the instance you seek?
      else {
        wi = wii[method]
      }
    }
  })
  return ( wi === undefined ) ? this : wi ;
}

如果检查jQuery插件已经绑定到DOM节点，你怎么办？

3 个答案: