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的prototype的别名，所以我认为没有更简单的方法，除非你将该插件保存在变量中。

What does jQuery.fn mean?

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如何工作......但实现起来会稍微复杂一些。如果你有兴趣，谷歌“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);

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

3 个答案: