jQuery vs Prototype – Document Load: jQuery wins
Recently I started using jQuery instead of Prototype for my web applications. When I first started using a javascript library I picked Prototype because to be honest jQuery intimidated me, there was a lot of mystery about it. Well I took another look at it a few days ago and I was floored, boy I was missing out. jQuery byte for byte in my opinion kicks prototypes butt.
Take for example attaching a function to the document load and adding an onclick action to a link.
Pototype:
// Initially set everything up
init = function (){
// If there is an expand dom element
if ($('expand')){
Event.observe($('expand'), 'click', ExpandMenu, false);
}
} // Attach the onload function
Event.observe(window, 'load', init, false);
jQuery:
// Initially set everything up
$(document).ready(function(){
// On click event
$("#expand").click(function(){
// Function actions here
});
});
It may not seem like a great deal of code reduction but scanning the code from top down (say if you were a developer brought in to fix a bug) shows how more fluid jQuery is in terms of execution flow. Prototype jumps all over the place…
- First define the initializer function
- Next find the element on the page
- Set an observer on it and direct it yet another function
- Last but not least attach the initializer to the document load
It seems that is the exact opposite order of its execution, jQuery on the other hand…
- Create a function and attach it to the document ready state
- Create a function and attach it to a dom element on click
- Done.
First round goes to: jQuery
In: main · Tagged with: elegant, javascript, jquery, optimization, prototype, versus
on June 25, 2010 at 4:16 pm
Permalink
Wait, isn’t this the regular way to observe document load event in Prototype?
document.observe(“dom:loaded”, function() {
//do stuff
});
Just as clean.
on October 27, 2011 at 8:37 am
Permalink
right veggen.
Everyone (including Nick) who wants can read it here:
http://www.prototypejs.org/api/document/observe.