Question

I DO NOT WANT TO CREATE A JQUERY PLUGIN

Let’s say I have something like this:

// In folib.js
function Foo() {this.Prop = function() {//do something}};

So my users can reference my JavaScript library and instantiate my object all day

// In consumer
foo = new Foo();
alert(foo.Prop);

Now, I want to create a JQuery like plugin system for my class, whereas I can create plugin script libraries which extend Foo().

I think I should be doing something like this…

(function( foo ){
    foo.myPlugin = function() {  
       // Do your awesome plugin stuff here
    };
})(Foo);

But I can’t get that working. Any ideas on how this is done in JQuery? I can’t figure it out 🙁

Answer 1

Using prototype:

Foo.prototype.myPlugin = function () { /* Do plugin stuff */ };

Then you will be able to access the plugin like so:

var foo = new Foo();
alert(foo.myPlugin);

Prototypes work when used in conjunction with new: the new object (foo) has a hidden pointer to the prototype object of the function it was constructed from (Foo). If a property isn’t found on the new object, JS will search for it in the prototype. For more information, read this.

jQuery does a similar thing by providing a fn property which points to prototype:

Foo.fn = Foo.prototype;