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

Question

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

(function($){

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

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

})(jQuery);

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

Answer 1

$.fn是 jQuery's 的别名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);