About Addy Osmani's jQuery plugin pattern: calling functions

Question

I'm using Addy Osmani's excellent jQuery plugin pattern to write a jQuery plugin (http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns), but there's something that confuses me about the way he adds functions to the prototype:

// The actual plugin constructor
function Plugin( element, options ) {
    this.element = element;

    // jQuery has an extend method that merges the
    // contents of two or more objects, storing the
    // result in the first object. The first object
    // is generally empty because we don't want to alter
    // the default options for future instances of the plugin
    this.options = $.extend( {}, defaults, options) ;

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
}

Plugin.prototype.init = function () {
    // Place initialization logic here
    // We already have access to the DOM element and
    // the options via the instance, e.g. this.element
    // and this.options
};

In this section he calls "this.init()", which is a function added to the Plugin's prototype, but if I add my own functions to the prototype, I can't call it from anywhere where 'this' changes scope.

E.g.

Plugin.prototype.foo = function() {};

can't be called from:

$('.some-class).each(function() {
  this.foo();
});

because 'this' refers to each element in the selection.

How do I call methods and functions from the plugin in a standard way? These approaches don't work either:

Plugin.foo();
this.foo();

Edit: actual code:

;(function ($, window, document, undefined) {

    var pluginName = 'slider',
        defaults = {
            speed: 1000,
            pause: 5000
        };


    function Plugin(element, options) {

        this.element = element;
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }


    Plugin.prototype.init = function () {

        var $slider,
            $controls;

        $slider = $(this.element);
        $controls = $slider.find('.slider__controls');

        $controls.each(function(index) {

            // How do I call 'showControl();'?

        });

    };


    Plugin.prototype.showControl = function() {

        // Do things.

    };


    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    }

})(jQuery, window, document);

You cannot call `init` from the jQuery `each()` either. You can call your methods from the constructor as well. — Bergi, Feb 19 '14 at 19:02
Where did you create the `new Plugin` instance? Show us your full code, please. — Bergi, Feb 19 '14 at 19:04

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

See How to access the correct `this` context inside a callback?:

Plugin.prototype.init = function () {
    var $slider = $(this.element),
        $controls = $slider.find('.slider__controls'),
        pluginInstance = this;

    $controls.each(function(index) {
        pluginInstance.showControl(this);
    });
};

edited May 23 '17 at 12:28

Community

1
1

answered Feb 19 '14 at 19:42

Bergi

630,263
148
957
1,375

Excellent, that's the trick. i knew it was an issue with 'this', but being new to this pattern I didn't fully grasp why ;-) – Reinier Kaper Feb 19 '14 at 19:59

About Addy Osmani's jQuery plugin pattern: calling functions

1 Answers1