Jesse Cravens Global RSS Feed

Javascript

So it took me awhile to truly understand JavaScript closures. There is limited documentation of the subject on the web, but here is a list of the resources I used to finally grasp not only what specifically creates a closure, but also why we would want to use them.

First, let's define closures:

  • A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression). - Jim Ley
  • ...JavaScript has closures. What this means is that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned. This is an extremely powerful property of the language. - Douglas Crockford
  • Things are different if you save a reference to the nested function in the global scope. You do so by using the nested function as the return value of the outer function or by storing the nested function as a property of some other object. - JavaScript: the Definitive Guide
  • Simply put, a closure is a variable, created inside a function, which continues to exist after the function has finished executing. - Patrick Hunlock

I should preface the more detailed explanation below with a few prerequisite concepts. If you don't truly grasp these concepts, then you may get hung up when trying to understand JavaScript closures. Fortunately, your quest to understand closures should force you to understand these concepts on a deeper level first.

  • global object and global scope
  • reference types and primitive types
  • lexical scope and the scope chain
  • the call object or the ECMA activation object
  • idea of persistent data
  • private variables
  • using return

To begin, we want to create a reusable function containing data that persists across invocations.

We don't want to hard code variables into the reusable function, and a local variable will not persist.

From what we have learned by our 'Responsible JavaScript for the Enterprise' guidelines and through our understanding of the call object, lexical scope, and namespacing: we also know that we want to greatly limit global variables in our global scope.

So instead, we want the developer to make two calls: One, to set up or 'configure' the function, and two, to invoke this 'pre-configured' function.

The power is in the first call. I like to refer to it as the configuration call.

During the configuration call, we 'freeze' the inner function by setting a reference to it in the global scope.

So this data persists. Why?

We have an external reference to this inner function.

The inner nested function retains its reference to the call object of the outer function.

The outer function's local scope resolves and the reference to its inner function remains.

This is an example from a friend that helped me finally wrap my head around the power of the technique.

function configEquation(A,B,C){
//The equation: Ax^ex1 + Bx^ex2 + Cx^ex3
//The exponents are ex1, ex2, and ex3
//The coefficients are A, B, and C and are set

var ex1 = 2;
var ex2 = 1;
var ex3 = 0;

//The exponents constitute a quadratic equation.
function theEquation(x){
var result = A * Math.pow(x,ex1) + B * Math.pow(x,ex2) + C * Math.pow(x,ex3);
return result;
}

return theEquation; //notice we return the reference not the invocation of the function(no params)
}

var myEquation = configEquation(2,3,0); //the configuration call
alert('myEquation, x = 2: ' + myEquation(2));
alert('myEquation, x = 5: ' + myEquation(5));

var myEquation2 = configEquation(1,1,1); //a 2nd configuration call
alert('myEquation2, x = 2: ' + myEquation2(2));
alert('myEquation2, x = 5: ' + myEquation2(5));

I'd like to promote a great resource for getting up to speed on JQuery syntax.

Main Page - SIMILE

SIMILE seeks to enhance inter-operability among digital assets, schemata/vocabularies/ontologies, metadata, and services. A key challenge is that the collections which must inter-operate are often distributed across individual, community, and institutional stores. We seek to be able to provide end-user services by drawing upon the assets, schemata/vocabularies/ontologies, and metadata held in such stores.

SIMILE will leverage and extend DSpace, enhancing its support for arbitrary schemata and metadata, primarily though the application of RDF and semantic web techniques. The project also aims to implement a digital asset dissemination architecture based upon web standards. The dissemination architecture will provide a mechanism to add useful "views" to a particular digital artifact (i.e. asset, schema, or metadata instance), and bind those views to consuming services.

To guide the SIMILE effort we will focus on well-defined, real-world use cases in the libraries domain. Since parallel work is underway to deploy DSpace at a number of leading research libraries, we hope that such an approach will lead to a powerful deployment channel through which the utility and readiness of semantic web tools and techniques can be compellingly demonstrated in a visible and global community.

Powered by ScribeFire.

tlbox - Web Design Tools

About tlbox
A lot of sites have been promoting pages for web developers, but none of them have asked what people are actually using to do good work. This site hopes to answer that question and provide people with the best sites first - not somewhere in the middle of long lists.
I also find myself looking for links I know I've seen on the web before, but can't seem to remember where. This site saves my good links, and organizes them by category so I can find them again. If you saw my list of unorganized bookmarks in my browser... it's sad.

Powered by ScribeFire.

Another new design for SessionsWest.com. I was digging for inspiration for this site, when Jeff called me from San Deigo last week right before he was about to go surfing. The color sheme is known as 'Morning surf,' and I built a custom flash player inspired by the album cover from the Fever Sessions. This new buildout has been my most complex drupal site to date. I embedded a photo gallery, and the mp3 player I mentioned earlier. I used drupal's front page module to give the home page a real clean, simple entry to the site. All in all it doesn't get much more simple, but I think thats what I like about it , and it reflects Jeff's style to the tee.

Dave Child has posted a number of Web development related cheat sheets in .pdf and .png format on his blog. These include CSS, xHTML, JavaScript, Ruby on Rails, PHP, and MySQL.

Thanks Dave!

Check out this ajax photogallery: minishowcase. It's lightweight, easy to customize, and a piece of cake to get up an running in no time. I removed the enormous Gallery2 from my server and replaced it with minishowcase. I lost the theming of Gallery 2, but minishowcase theming is on the way, and it wouldn't take much to create your own from scratch. Download also included easy to customize .css file.

For now it is fully functional in its own page here, but I will intgrate it as time permits.

sIFR, PHP, and More! My WordPress Plugin Competition entries… @ CHAITGEAR @ [CG @ Site5] :

Spent some time today configuring sIFR into wordpress in order to achieve these h1, h2 , h3 text you see displayed here. But then I came across this plug in for wordpress - which makes things much easier.

I making use of a number of fonts, but I love the quadaptor font.