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

【问题标题】：Shorter way to access jQuery plugin variables?访问 jQuery 插件变量的更短方法？
【发布时间】：2013-02-24 20:39:50
【问题描述】：

我正在使用这个设置来允许访问 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。但这很冗长...我觉得必须有一种方法可以使用较短的名称访问插件内部的变量，例如this.myvar。该示例不起作用，因为 this 指的是当前元素。但是还有其他更简单的访问变量的方法吗？

【问题讨论】：

标签： jquery variables jquery-plugins scope

【解决方案1】：

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

What does jQuery.fn mean?

【讨论】：

是的，在声明插件函数之后，您可以将它分配给像exports 这样的变量，例如，遵循 CommonJS 约定：var exports = $.fn.myplugin; exports.myvar = ...

【解决方案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 小部件模式”。

【讨论】：

请注意，如果 myVar 是特定于实例的，则应在 MyPlugin 构造函数中声明，例如this.myVar = {...}

【解决方案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);

【讨论】：