Create JQuery like plugin structure in custom javascript

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 :(

OK, follow me here...I'm thinking I need to do something like function Foo() {this.fn = function(script) {this.prototype.script;}}; — farina
– farina, Commented Apr 5, 2011 at 0:11

David Tang · Accepted Answer · 2011-04-05 00:05:30Z

5

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;

edited Apr 5, 2011 at 0:05

answered Apr 4, 2011 at 23:58

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smdrager · Accepted Answer · 2011-04-05 00:04:32Z

3

To follow up on Box9's great answer, you should also return the object on which you are performing the action.

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

     return this; //return the object's instance
};

This will enable you to chain functions modifying the same object. This is part of what makes jQuery so popular--it uses a fluent interface which allows for more expressive syntax when chaining functions and plugins. http://en.wikipedia.org/wiki/Fluent_interface

This maybe not be what you were asking for, but it is particularly helpful when creating many functions extending an object.

myFooInstance.DoSomething(5).DoAnotherThing('hello').YetAnother();

answered Apr 5, 2011 at 0:04

smdrager

7,4276 gold badges41 silver badges50 bronze badges

Collectives™ on Stack Overflow

Create JQuery like plugin structure in custom javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related