Shorter way to access jQuery plugin variables?

Question

I am using this set-up to allow accessing the variable outside the jQuery plugin:

(function($){

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

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

})(jQuery);

I can access myvar inside and outside the plugin using $.fn.myplugin.myvar. But it's quite verbose... I feel like there must be a way to access the variable inside the plugin with a shorter name, like this.myvar. That example doesn't work as this refers to the current element. But is there another way to access the variable more simply?

score 3 · Accepted Answer · edited May 23 '17 at 12:33

3

$.fn is an alias to the jQuery's prototype, so I don't think there is a simpler way, unless you save that plugin in a variable.

What does jQuery.fn mean?

edited May 23 '17 at 12:33

Community

1
1

answered Feb 24 '13 at 20:42

gdoron

147,333
58
291
367

1

Yes, after declaring the plugin function you could assign it to a variable like `exports`, for example, following the CommonJS convention: `var exports = $.fn.myplugin; exports.myvar = ...` – Matt Browne Feb 24 '13 at 20:46

score 1 · Answer 2 · answered Feb 24 '13 at 20:56

gdoron's answer is the simplest solution...another thing you could consider would be writing your plugin in an object-oriented style, e.g.

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);
    });
}

Then if you needed to access any of the instance properties or methods, you could do so via $('#someElement').data('myplugin');. You could also make the same methods available by letting the first parameter be the method name, followed by the method arguments, like how jQuery UI works...but that gets slightly more complicated to implement. If you're interested, Google "jQuery widget pattern."

Note that if `myVar` were instance specific, it should be declared within the `MyPlugin` constructor, e.g. `this.myVar = {...}` — Matt Browne, Feb 24 '13 at 20:57

score 0 · Answer 3 · answered Feb 24 '13 at 20:57

I think it'd just be easier to assign the variable when you define the function (demo):

var myplugin;
(function($){

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

  myplugin.myvar = { test: true };

})(jQuery);

Shorter way to access jQuery plugin variables?

3 Answers3