Question

I’m following the guidelines for plugin authoring on jquery’s website, but I’m having trouble figuring out how to call a main plugin method from another method within the same plugin.

I have a plugin like this:

(function($){
var methods = {
    init: function(options) {
        var settings = {};

        //this == context element of plugin, already jquery
        return this.each(function() {
            var $this = $(this);
            if( options ) {
                settings = $.extend({}, settings, options);
            }
            var data = $this.data('PluginData');
            if(!data) {
                //set up                    
            }

        });
    },
    some_fn: function() {
        //do some stuff
    },
    another_fn: function() {
        //do other stuff, then somehow call some_fn(), maybe via methods.some_fn() ?    
    }
};

jQuery.fn.SomePlugin = function(method) {
    if(methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call( arguments, 1));
    } else if (typeof(method) == 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        console.log('there was an error');
    }
};
})(jQuery);

This is pretty much the skeleton code from jquery. However, what I’m having trouble with is figuring out the best way to create a “utility” function that is just for my plugin methods, or how to call one plugin method from another.

For example, in my plugin, I have 3 methods, init, some_fn, and another_fn. When I call $('#el').SomePlugin('another_fn'), within another_fn, I’d like to call some_fn. How can I do this? Calling methods.some_fn() will probably work, however, then this is dependent on the order the methods are defined within the methods object, correct? So I could call some_fn from another_fn, but not vice versa?

Additionally, what’s the correct way to create a utility function that all the methods in my plugin can use, so that I am not cluttering the global namespace? Do I just define the utility functions at the beginning of my plugin, right before the call to var methods?

EDIT: Thanks to Matt Ball, I have confirmed that methods.some_fn() DOES work for calling other main methods. Now I just want to know what the best practice for creating a (private) utility function is

Answer 1

For a best practice you should check out: http://jqueryboilerplate.com
They give examples for exactly your question. 🙂

For your example you could take advantage of the scope of the init function:

(function($){
var methods = {
    init: function(options) {
        var settings = {};

        var privateMethod = function(){ ... }

        //this == context element of plugin, already jquery
        return this.each(function() {
            var $this = $(this);
            if( options ) {
                settings = $.extend({}, settings, options);
            }
            var data = $this.data('PluginData');
            if(!data) {
                //set up                    
            }

        });
    },
    some_fn: function() {
        //call private function
        privateMethod()
        // do some stuff
    }
};

jQuery.fn.SomePlugin = function(method) {
    if(methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call( arguments, 1));
    } else if (typeof(method) == 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        console.log('there was an error');
    }
};
})(jQuery);