从应用插件的元素中获取插件对象引用

Question

请考虑以下代码。在这里，我有一个 jquery 插件myPlugin，我使用它更改了#targetElement的 UI

var myPluginVar = $('#targetElement').myPlugin();

我创建了一个按钮并在其上添加了单击事件侦听器

$('#myButton').click(function(){
    // HERE I want reference of myPlugin back.
}

现在在按钮触发器上，我想找回myPlugin对象。我不想使用myPluginVar.有没有办法获取应用插件的myPlugin使用元素的引用。

Answer 1

$.fn.myPlugin = function(){}将创建一个插件，可以在如下元素上调用： $("#example").myPlugin(); ，如您所知。

$.myPlugin = function(){}将创建一个可以像这样静态调用的插件：$.myPlugin(); .

因此，您所要做的就是在每次调用$.fn.myPlugin时设置$.myPlugin，以便它将引用使用的最后一个元素。

$.fn.myPlugin = function(){
  this.text("Hello, world!");
  
  var t = this;
  
  $.myPlugin = function() {
    return t;
  }
};
$("#test").myPlugin();
$("#button").click(function(){
  $.myPlugin().text("something else");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>
<button id="button">Click Me</button>

Answer 2

这取决于

你如何编写插件。

以下基本插件示例：

(function($){
    $.fn.myPlugin = function(){
        return this.text('Iam is myPlugin');
    };
}(jQuery));

那是插件(还(不能被引用，因为它没有将自己传递给任何东西。

但是，如果更改插件代码缩写为：

(function($){
    $.myPlugin = function(el){
        $(el).data('myPlugin', this);
        return $(el).text('Iam is myPlugin');
    };
    $.fn.myPlugin = function(){
        return new $.myPlugin(this);
    };
}(jQuery));

你可以调用插件自引用：

$('#targetElement').data('myPlugin');

offcourse 如果插件从未在 #targetElement 上初始化过，它将返回为未定义

但是，如果您已初始化 #targetElement，请使用：

$('#targetElement').myPlugin();

它将返回 $.myPlugin 对象