Hi World!
I want to start my blog by talking about jQuery. I like jQuery but I’m not satisfied with the whole ‘black box’ notion that one doesn’t have to know how it works to use it. Because of that most of the information available on jQuery only explains the interface. I want to dissect it fully to see what makes it tick. If you look at the source file there’s about 1000 lines of confusing code. So to start learning I striped it down to what I feel is a good basic structure.
Here it is:
//this jQuery gets returned a jquery object,
//this jQuery will get exposed as a global
var jQuery = (function() {
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init
//constructor 'enhanced'
return new jQuery.fn.init(selector, context, rootjQuery);
},
rootjQuery;
//Next comes adding a whole bunch of functions to
//the fn prototype
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
if ( !selector ) {
return this;
}
},
//I screwed with the core!
yo:function(){alert("yo")},
};
// Give the init function the jQuery prototype for
//later instantiation this is the piece of code that
//makes it all possible. you have init's prototype
//point to jQuery's prototype, so that init can
//access the functions attached to it!
jQuery.fn.init.prototype = jQuery.fn;
// Expose jQuery to the global object
return jQuery;
})();
//this is the end of the very first immediate function
So here's a run-down of what's going on. First, a variable named 'jQuery' is created in the global space. And it's assigned the return value of an immediate function. The return value will be a complex object that can be used to create other objects. What follows is a more detailed explanation.
Inside the immediate function there's a local variable also called 'jQuery,' of course different from the one in the global space. This variable points to a function that takes a selector and a context as parameters. If you've used the jQuery object before, then you know that you pass it this information in order to select a set of html elements. While this function is local to the immediate function it's contained in, eventually it will get returned to the jQuery variable in the global space. And this is how you will get to access it.
This function returns an object. But the curious thing is that the object jQuery returns is attached to itself:
return new jQuery.fn.init(selector, context, rootjQuery)
Further down the code we see that jQuery.fn points to the prototype of jQuery. Then an object literal is assigned to jQuery.fn with one of it's members being the init method used above.
I simplified the inside of the 'init' function quite a bit. In fact I made it so it only works if there is no selector. The reason I did this is because I'm not interested in how a set of html elements gets selected right now. Here I just want to understand how by simply using the code "jQuery()" in my own script I get returned an object with a whole bunch of functions attached to it. In addition to the 'init' method normally you'd see a whole bunch of other methods here like 'ready', 'eq', 'first', 'last' and so on. But for simplicity sake I replaced them all with my 'yo' method. So the object returned to you when you use jQuery really is it's 'init' member. But if that's true then how come the 'init' object has access to all of the functions attached to the jQuery object, like 'yo' for instance. The answer to that is in this line:
jQuery.fn.init.prototype = jQuery.fn;
The 'init' object's prototype actually points to the 'jQuery' object's prototype.
And that's it for now. I understand this probably isn't the best explanation but I'd be happy to answer any questions to help clear it up. In my next post perhaps I'll take a closer look at how the 'init' method works.
Thank you for reading.