Addisu Hailegiorgis Desta

Learning Advanced JavaScript concepts from jQuery Source Code April 8, 2011

Posted by addisu in Java Script and jQuery.
trackback

One of the thing I was so lazy in my career was not considering JavaScript as serious thing. Yeah, it is on my resume and I know stuffs like doing simple validations and so on. But I thought, what is the big deal to spend that much time on it.

But in the past two years or so, I realized I cannot get away with my “basic” knowledge of JScript to do Complex web applications. Any Web 2.0 requires a real deal of advanced JavaScript knowledge. My first hands-on experience on JQuery was since last year, and dude it is so cool thing. I couldn’t believe such a minified code do all these stuffs. Anyways, looking at the Source Code of jQuery, I realized I should have probably spent a lot of time on JS in my past years. I know things like functions are useful to implement Object Oriented style that we developers used to boast off; and I knew that so that I can answer questions during interviews. However, I never wrote any serious stuff with them.

Now, jQuery latest source code is my favorite link on my browser. ( http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js ) Every now and then, I just look at the code to understand what they have done inside. I know these may not be a big deals, but I will just write them here as I come across interesting things to myself.

Self-calling function:

/*!
* jQuery JavaScript Library v1.5.2
* http://jquery.com/
* …
* …
* …
* Date: Thu Mar 31 15:28:23 2011 -0400
*/

(function( window, undefined ) {

/////////

// every thing is here

// code goes here

///////

})(window);

=======================================

So, this is basically a self-initialization way…?? Then, I learnt that this is a common pattern already.

(function() {

/////////
//code goes here
///////

})();

==================================

So, inside there they initialized jQuery variable and others stuffs; that is cool!

Checking isReady (jQuery.isReady) and setTimeout

While trying to understand this implementation, I got caught with the usage of “setTimeout”. One of it is the following for the case of IE Scroll bar checking.

============================================

// The DOM ready check for Internet Explorer

function doScrollCheck() {

if ( jQuery.isReady ) {

return;

}

try {

// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/

document.documentElement.doScroll(“left”);

}  catch(e) {

setTimeout( doScrollCheck, 1 );
return;

}

// and execute any waiting functions

jQuery.ready();

}

=============================================

So, basically this is calling “doScrollCheck” itself until the Scrollbar is ready.

1. If jQuery is already ready, exit.
2. Otherwise, try checking Scrollbar, if successful then jQuery is ready
3. But if fail (i.e. catch(e) ), then wait 1 millisecond and call itself (another instance) and exit without saying “jQuery.ready();”

I think, I can think of this applicable to common problems …