jQuery Vs Prototype (Shallow dive 01)

I use Prototype, I haven’t used jQuery, but realise that everyone else is. So here’s my first shallow dive into the differences between them:

Prototype: The $(‘someId’|DOM Object) functionality of Prototype returns a DOM element object that has been extended to have a variety of new utility functions. $$(CSS Selector) returns an array of Prototype extended DOM elements.  The ultimate upshot is that the DOM object becomes super powered, and you just call methods on it.

jQuery: The $(CSS Selector|DOM object|null) returns a jQuery Object. The jQuery object has a bunch of useful utility functions. The jQuery object also acts like an array (in the code they use this[0] to attach a 0’th element to the jQuery object, and similar techniques later for longer arrays – making me thing it’s really just using numbered properties, with some prototypes array functionality chucked in), containing all of the DOM objects specified by the passed in CSS Selector/DOM Object etc.

I haven’t gone into all the extended functionality, but I’m sure all the usual suspects are there (DOM manipulation, AJAX, Event binding etc).

The Key thing here to me is that with Prototype I have the object and can run the functions (methods) attached to it. With jQuery I have this object which I can either access to return my DOM Objects, or use the functions it provides. Each of the functions it provides chain themselves (each functions return value is the jQuery object), so as long as you’re chaining jQuery object to jQuery object you’ll be good. Just don’t leave jQuery and do something else.

I’m assuming therefore that the internal jQuery functions act on the complete pseudo array of DOM elements.

Many of the functions seem to take callback functions, most of which would see to be bound in such a way that the “this” property of the callback function point to the individual element. This is implicit in code like this:

    $("p").click(function () {     $(this).slideUp();     });

$(“p”) – Creates jQuery Object with all of the DOM’s Paragraph elements attached to the object in an array like fashion.

.click() – A function (method) of the jQuery object that binds each of the paragraph DOM objects to a click event. In the example it is fed an anonymous function as an argument.

this – The “this” inside the anonymous function points to the element on which the click occurred. It isn’t a jQuery object it’s a DOM object. I’m assuming it’s been bound this way by jQuery, although maybe they do something clever with the returned Events object – same result either way.

$(this) – the returned DOM object has to be converted back into a jQuery object before further chaining can occur.

.slideUp() – A function on the jQuery object that makes the DOM object in question (the individual paragraph we clicked earlier) slide up.

Conclusion:

Prototype super powers the individual DOM element with new properties.

jQuery leaves the DOM objects as it, but instead provides an object that holds super properties and an array like collection of DOM object.

The result is that jQuery can act on many DOM nodes all at once. You don’t have to think about the singular node, rather just define the effects you want to happen to all the nodes defined by your selector.

On the downside that does mean that you don’t really want to come outside of jQuery and play with bog standard JavaScript because you loose all of that multiplicity. Prototype does keep you closer to the JavaScript world, just in an augmented way.

Hmmm…

Write a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>