jquery guide

(function(){

The first non-commented line of jQuery begins with a self executing anonymous function. There's no real magic to it, all that's done is a function is being declared, and immediately executed. The benefits are that it gives you a new, private scope in which you can declare all the variables you want and not have them leak into the global namespace ( in a browser context, the window object ).

The next few statements may look cryptic but all that's happening is simple variable assignment, except that multiple variables are being declared.

var 
	// Will speed up references to window, and allows munging its name.
	window = this,
	// Will speed up references to undefined, and allows munging its name.
	undefined,
	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,
	// Map over the $ in case of overwrite
	_$ = window.$,

Since we are now in the scope of an anonymous function, which means we can declare variables that live within this function... if we reference a variable that doesn't live within this function scope, the interpreter has to look up beyond this function scope and try to access a variable from the outer scope. If we do this hundreds/thousands of times the interpreter for each iteration will have to look through this entire scope and then descend upwards to the outer scope. If we want to make this a little faster ( for benchmarking ) we just need to declare variables in our current function scope, hence the first two variable assignments which are to `window` and `undefined`.

The current execution context, or in other words at this point in time this function is owned by the window object, so the `this` keyword will refer to the window object, which is why window is assigned to `this`.

The undefined variable is just declared, not assigned anything but any unassigned variable is of course undefined by default, and again the reason this is being defined is so in those thousand or so iterations in a profile/benchmark the interpreter doesn't have to look in the outer scope, so we can have faster results in our tests.

If we had a previous jQuery script being included, or a custom object named jQuery, before we set the variable jQuery to reference our own function, we want to save any old reference and map it to _jQuery. So if we were to use the noConflict method, we have a copy of the reference to which we can point to again.

Same goes with saving a reference to $, so if for example a library which uses $ as a global variable ( such as jQuery, Prototype ) were included, we can save the reference to that function incase we want to restore the $ with noConflict()

	jQuery = window.jQuery = window.$ = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context );
	},

Ok, bare with me here. All that's happening is we're declaring 3 variables. First, the variable `jQuery` in this function scope, which is assigned to window.jQuery. The important thing to note is that in this function scope we have a separate jQuery variable, however because it's being assigned to window.jQuery they all point to the same function in the end, as window.jQuery points to window.$.

To reiterate, all you're doing is telling 3 variables, 2 of which are the global variables $ and jQuery to point to the same function.

Within the actual function body, we're returning a new object created by jQuery.prototype.init ( fn is really just the prototype ).

	// A simple way to check for HTML strings or ID strings
	// (both of which we optimize for)
	quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
	// Is it a simple selector
	isSimple = /^.[^:#\[\.,]*$/;

Two variables are assigned, the first is just a regex literal which tests whether a string matches '<p>' or '#foo'

>>> /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/.test('<p>')
true
>>> /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/.test('#foo')
true
>>> /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/.test('.className')
false
>>> /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/.test('[attribute]')
false
>>> /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/.test('p#foo')
false

The second variable, another regex, is used to test whether the selector string is a fairly simple CSS selector. Here are some actual tests..

>>> /^.[^:#\[\.,]*$/.test('#foo')
true
>>> /^.[^:#\[\.,]*$/.test('.foo')
true
>>> /^.[^:#\[\.,]*$/.test('foo')
true
>>> /^.[^:#\[\.,]*$/.test('[selected]')
true
>>> /^.[^:#\[\.,]*$/.test('p.foo')
false
>>> /^.[^:#\[\.,]*$/.test('p#foo')
false
>>> /^.[^:#\[\.,]*$/.test('html body')
true
>>> /^.[^:#\[\.,]*$/.test('html>body')
true

Date created: 11.18.09 02:15:00 EST