Monday, October 27, 2008

Extending jQuery the Object Oriented Way

Though I have used quite a few Ajax libraries in the last couple of years, nothing has impressed me like jQuery. However jQuery is not object oriented in the traditional sence. You cannot instantiate a jQuery object like this

var myobject = new jQuery();

or extend jQuery like this.

extend(MyClass, jQuery);

So what if you could object orientify jQuery? Imagine all your classes/widgets as extensions of jQuery. You could call all the jQuery functions from within your own 'this' like

But then you cannot extend jQuery because it does not have a constructor! It is itself an object. But thats where javascript comes to your rescue. Javascript does not differentiate an object from a class. And the jQuery object has some features that will come as a help. It has a prototype object and though it does not have a constructor it does have an init method. Some of you are already figuring where I am headed. But before we go ahead we need a function that will do a proper object oriented extend. And I will also add a namespace and call it "JX" for jQuery Extend. Here is the code.

JX.extend() is a function that will take in three parameters, a baseclass constructor, a superclass constructor and an object of functions to override any superclass methods. Now let us use this method to create a new Class called JX.Component that will be a base class for all our widgets.

I'm not buying that argument. jQuery's plugin architecture works very well to build large application, especially when combined with event-based programming. You don't need OO to build "complex" applications.

Your content is not as big a concern as your sensationalist blog title.

While I'm sure you want to drive traffic to your blog, using a title that somehow asserts that John (or anyone on the jQuery team) is keeping something from the jQuery community is a bit irresponsible.

You offered interesting content but the title was really less than stellar.

Thank you Santosh. Also, let me extend my apologies as I believe I came across too strong and overly sensitive. That's not what the jQuery project is about and we genuinely try to be objective. I think today was my day to have a bad moment.

First of all thanks for the article Santosh, it seems to have properly ended the day for us today.

As for the less pleasant comments the jQuery representative has left you, I'd like to remind them, that jQuery tries to sort of reinvent the wheel when it comes to object orientation, and while they, as experts in their own field, may appreciate, other people that may be still fond of classical oop, will definently get to appreciate your article, including the title.

I don't think jQuery is taking a very ... open ... aproach to all of this. It seems to be a lot like php, in the sense that, it turns smart developers away from learning oop, which is VERY useful, regardless if you want to spend the time learning the jquery alternative or not ...

oh that's nice, very much like extjs, but completely on top of jQuery. this is indeed similar to what i'm trying to achieve only that I'm just looking for a set of focused components, on top of jquery, that do only what we need them to do, and are based on proper object oriented concepts.

May I ask, do you have any plans for client side templating, similar to the broad functionality that XTemplate provides ( if you know it from ext ) ?