jquery - 从 jQuery 原型函数 ($.fn) 获取实例/引用

Question

我写了一个使用原型的 jQuery 插件。

例子：

  function MyWidgetConstructor(element) {

    this.id = 'test';
    this.$element = $(element);
    this.$element.data('instance', this);

  }

  MyWidgetConstructor.prototype.sayHello = function() {
    alert('Hello, my ID is: ' + this.id);
  }

  $.fn.myWidget= function() {
    return this.each(function() {
      new MyWidgetConstructor(this);
    });
  };

我使用 data 属性来保存对小部件的引用。这样我可以使用实例变量调用原型方法，如下所示：

    jQuery('#myInstance').myWidget();
    jQuery('#myInstance').data('instance').test();

但是，这并不总是有效。是否有另一种获取参考的方法（可能不使用数据属性）？

Answer 1

我找到了另一种方法！可以使用全局实例数组来管理不同的实例。

例子：

(function ($) {

    window.InstanceCollection = window.InstanceCollection || {};

    $.fn.myWidget = function () {
        return this.each(function () {
            new MyWidgetConstructor(this);
        });
    };       

    function MyWidgetConstructor(element) {
        this.id = 'test';
        window.InstanceCollection[this.id] = this;
    }

    MyWidgetConstructor.prototype.sayHello = function () {
        alert('Hello, my ID is: ' + this.id);
    }

})(jQuery)

jQuery(function ($) {
    $('#myInstance').myWidget();
    window.InstanceCollection['test'].sayHello();
})