Flurl is a mashup I did recently as a practice exercise.

It takes a flickr panda photo-stream, displays a photo, and uses qurl to make a shortened URL link to the photo.

These are the notes I took while I was doing it.

The project can be found on GitHub at http://github.com/cmcculloh/Flurl

For this exercise I didn’t want to use any JavaScript library. Normally I’d use jQuery (naturally) but I wanted to feel the pain of plain jane JavaScript again since it had been well over a year since I had done any AJAX without a library.

I decided I’d roll my own library that I could use to encapsulate the AJAX and DOM selection framework to keep it seperate from the actual app and to simplify my life in actually writing the app.

Since I wanted my library to feel a little jQuerish I decided as an homage I’d name it cQuery and use the _ instead of the $.

Step 1, the ubiquitous self executing anonymous function:

(function(window, document, undefined){})(this, document);

I’ll break it down. The starting paren “(” and it’s mate are just a “cool guy” coding convention to let people know, “this is weird! This is a library! This ain’t yo mama’s JavaScript!”. It’s the same as this:

function(window, document, undefined){}(this, document);

Which is simply just a function that immediately calls itself. The main reason to do this is to prepare our code for minification. When we minify, it will end up something like this:

(function(A,B,C){})(this, document);

So anywhere in our library where we had “window” or “document” or “undefined” it will not be the much shorter “A”, “B” or “C”, much smaller!

Paul Irish explains this in a *little* more detail in his 10 Things I Learned From the jQuery Source video.

Next we build the core function of our library, add it to the namespace and give it it’s “_” shortcut:

var cQuery = function(elm){
};

window.cQuery = window._ = cQuery;

Note that if we didn’t do that last line ‘cQuery’ would not be available in the rest of our JavaScript since it is hidden away inside of the closure we talked about above.

I really like the way jQuery works, and I want my library to mimic this. So calling:

cQuery("#domElementById").someMethod().anotherMethod();

ought to work.

Functions in JavaScript are just Objects that you can invoke. Functions can have their own methods, properties, etc. So basically cQuery is just an object that can DO something on it’s own so we can say cQuery() instead of cQuery.doThing(). Much more convenient. So basically our var cQuery = function(elm){} code is just setting up my cQuery library object in a way that it can be called and passed the dom element we are working with.

Since I want to be able to “chain” things in my library, I’ll need to add the methods in there that enable my chaining. I do this by ending my cQuery function with a return statement that returns an object containing the methods I wish to be available for chaining, each of these methods in turn returning an instance of the cQuery object (unless the method is specifically supposed to return something else, which makes it a destructive method because it ends my chaining), like in this example:

(function(){
var c = function(){
return{
blah:function(){
alert("blah");
return c();
},
blah2:function(){
alert("blah2");
return c();
}
};
};

c().blah().blah2();

That’s it! Now I’ve got the core of my JavaScript library all set up, chaining enabled, library closed in but available on the namespace, all ready to be made useful! Here’s the code we’ve got so far:

(function(window, document, undefined) {

var cQuery = function(elm){
//DOM selection and storage will go here

return {
//chain-able library methods go here
};
};

//make sure our library is exposed to the global namespace and make a shortcut “_” so we don’t have to type cQuery every time.
window.cQuery = window._ = cQuery;

})(this, document);