Adventures in jQuery

Thu, 03 Jul 2008 12:41:00 -0500

The last week or so I've had the pleasure of working deeply with http://jquery.com/,jQuery. And I mean that, it's been a pleasure. Once you get used to the 'style' of how it works, it makes sense and has a consistent coding experience. I've worked mainly with the core and the ui.jquery libraries, with fileupload thrown in. In the mix is also , and they have all played together nicely (so far!) I've got jQuery adding and removing custom DOM elements on the fly, while updating information on the server, uploading and deleting images and also maintaining the structure of the form so that when it is submitted in the usual "post" manner, the server knows what to do with the data it receives. So all in all I've had a good experience with it. Things it has helped me understand is the use of "anonymous Functions" (I think that is what they are called) EG:


$("#myelement").hide();

will hide the element with the id of "myelement" now the "hide" method will accept an argument of a function that it will call when it has completed. Commonly called a "callback", so i we had a function like this:


function alertme(){ alert('me'); }

you could call that function when hide was complete like this:


$("#myelement").hide( alertme );

so the function has the name "alertme", so is not anonymous. To use an anonymous function to do the same thing, this is what you would do:


$("#myelement").hide( function(){ alert('me'); } );

You can also do this in Flex. eg: rather than:


addEventListener( "SomeEvent" , someFunction );

You can go:

 
addEventListener( "someEvent" , function( event: Event): void { [do stuff here] } );

While you can put as much in you function as you like, I did find it makes code a bit hard to read. One thing that works, but somehow feels wrong, is that the anonymous functions have direct access to the variables declared in the calling function. eg:


function myFunction()
{

	var someString = "bob";
	$("#myelement").hide( function(){ alert( someString ); } );

}

This seems to be true of both JS and AS. I guess this is because the function itself belongs to the function it is being called in, so has access to the variables called in there... So all in all I've enjoyed getting to know http://jquery.com/,jQuery, and suspect it's the beginning of a beautiful friendship! ...but, I still prefer Flex!

David Harris's Technology Blog - jQuery

Adventures in jQuery