访问jQuery插件变量的更短方法？

Question

我正在使用此设置来允许访问jQuery插件之外的变量：

(function($){

  $.fn.myplugin = function() {
    return this.each(function() {
      // plugin code here
      console.log($.fn.myplugin.myvar);
    });
  };

  $.fn.myplugin.myvar = { ... };

})(jQuery);

我可以使用$.fn.myplugin.myvar访问myvar内部和外部的$.fn.myplugin.myvar 。 但这很冗长...我觉得必须有一种方法可以使用较短的名称（如this.myvar访问插件中的变量。 该示例无效，因为this引用了当前元素。 但是还有另一种更简单地访问变量的方法吗？

Answer 1

$.fn是jQuery prototype的别名，因此除非您将该插件保存在变量中，否则我认为没有更简单的方法。

jQuery.fn是什么意思？

Answer 2

gdoron的答案是最简单的解决方案...您还可以考虑以面向对象的风格编写插件，例如

function MyPlugin(element) {
    this.element = element;
}

MyPlugin.prototype.init = function() {
    //plugin code here
}

MyPlugin.myVar = { ... };

$.fn.myplugin = function() {
    return this.each(function() {
        var instance = $(this).data('myplugin');
        if (!instance) {
            var instance = new MyPlugin(this);
            $(this).data('myplugin', instance);
        }
        instance.init.apply(instance, arguments);
    });
}

然后，如果您需要访问任何实例属性或方法，则可以通过$('#someElement').data('myplugin'); 。 您还可以通过将第一个参数作为方法名称，然后是方法参数来使相同的方法可用，例如jQuery UI的工作方式，但是实现起来稍微复杂一些。 如果您有兴趣，可以使用Google的“ jQuery小部件模式”。

Answer 3

我认为在定义函数（ demo ）时分配变量会更容易：

var myplugin;
(function($){

  myplugin = $.fn.myplugin = function() {
    return this.each(function() {
      // plugin code here
      console.log(myplugin.myvar);
    });
  };

  myplugin.myvar = { test: true };

})(jQuery);