jQuery Plugin prototype with addons - jquery-plugins

Question

I create a free jQuery plugin and what I would like to do is to create some add-ons that will be able for my clients under payment.
So, let's suppose that the free jQuery plugin that I offer for free append hello world into an html div tag and I would like to create an add-on that makes the div background color red.
Free Version of plugin:
(function(window, $) {
var example = function(elem, options) {
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data('example-options');
};
example.prototype = {
defaults: {
message: 'Hello world!'
},
init: function() {
this.config = $.extend({}, this.defaults, this.options, this.metadata);
this.displayMessage();
return this;
},
displayMessage: function() {
this.$elem.append('<h1>'+this.config.message+'</h1>');
}
}
example.defaults = example.prototype.defaults;
$.fn.example = function(options) {
return this.each(function() {
new example(this, options).init();
});
};
window.example = example;
})(window, jQuery);
And I would like to create an addon that will be in a different js file, like this:
example.prototype = {
bgColor: function() {
this.$elem.css('background-color', '#f00');
}
};
How can I do this?

Answer 1

Rather than replacing the default prototype that you have created, simply add to it and override methods that you wish to change. For example, you can add your bgColor method to the prototype as follows:
example.prototype.bgColor = function() {
this.$elem.css('background-color', '#f00');
};
To override methods to provide enhanced functionality, you can do the same:
example.prototype.displayMessage = function() {
this.$elem.append('<h1>This message comes from the add-on</h1>');
}
Note that for this to work, the add-on js file is included after the default plugin js file.