Javascript coding suggestions

crockford I am now working on some coding conventions for use at one of my clients. Having done some work on the HTML and CSS ones, I recently started with the javascript one. As I was working on it, I looked at the work done by others, like Douglas Crockford. Some of my co-workers suggested that we did this:

var nameSpace = (function () {
// declare all of your var's before using them..
var config, init,x,doStuff;
config = {
a : 'a'
};
init = function ( arg ) {
doStuff( arg );
};
x = '36';
doStuff = function ( arg ) {
// dostuff
};
return {
init:init
};
}());

While I initially agreed with this, as it seems nice and neat, I spotted a problem with it when it gets big. As you get a really big script and more people working on it, chances are that you will get someone to forget to declare a var in the beginning of the function, hence making it global.
Like this:

var nameSpace = (function () {
// declare all of your var's before using them..
var config, init,x,doStuff;// we forgot to add doMoreStuff
config = {
a : 'a'
};
init = function ( arg ) {
doStuff( arg );
};
x = '36';
doStuff = function ( arg ) {
// dostuff
doMoreStuff();
};// doMoreStuff is global
doMoreStuff = function () {
alert( config.b );
};
return {
init:init
};
}());

So I came up with a (not so revolutionary) way of avoiding this and I am curious what you think of it?
It goes like this:

var nameSpace = (function () {
// start with var to avoid global variables
var config = {
a : 'a',
b : 'b'
},
// continue with a comma to stay in the same var declaration.
init = function ( arg ) {
doStuff( arg );
},
x = '3',
doStuff = function ( arg ) {
// dostuff
};
// end with a semi colon.
return {
init:init
};
}());

I think that this has the advantage that when someone else continues with this code he can extend it easily, while not accidentally introducing globlal variables...

var nameSpace = (function () {
// start with var to avoid global variables
var config = {
a : 'a',
b : 'b'
},
// continue with a comma to stay in the same var declaration.
init = function ( arg ) {
doStuff( arg );
},
x = '3',
doStuff = function ( arg ) {
// doStuff
},// if you add a new var it's not global
doMoreStuff = function (){
// do more stuff
}
;
// end with a semi colon.
return {
init:init
};
}());

What do you think, is this a good way to structure your code or am I missing something?

just in time initialization

just in time initialization

Or as we need a catchy name for this: JITI. This is 'cause we all know that we need a catchy name for something to catch up...

Part 1 - the HTML

what is JITI and what is it to you?

It stands for Just In Time Initialization and I first heard about it from PPK. He came in at one of my clients to review my javscript work there and he told me about some stuff he was working on. JITI is a way to utilize the DOM as you API, something to speed up the loading and rendering time of your page.

At anwb.nl/verkeer I have started using it, in order to speed up the page. We used to render the images of for instance the rain radar as we loaded the page (anwb.nl/verkeer ) and hide them with css. If you clicked on the appropriate checkbox we would set a css class on the body and show the image. This all seemed well and good, but a lot of people come to this page for just the traffic information and the traffic information alone. So why should we have them wait for the image they will never see...

JITI to the rescue.

so now instead of loading the image before hand, we only load the location of the image, like this.

<li>location/of/the/image.gif</li>

As we don't actually load the image, this results in no http request or data collected from the server, until we request the image to be shown by clicking the appropriate checkbox. We then let a small bit of javascript change that to:

<li>
<img scr="location/of/the/image.gif" alt="alttext" />
</li>
The point

So why am I so excited about this? It simply means that we wont let the user wait for data he has not requested. He will not wait longer for a couple of features he may never use, only for what he wants to use. And by doing it by utilizing the dom as our api we don't burden the server with this, just the client and he asked for it...

We do a similar thing with the weather information, instead of rendering the html structure we need to show the weather stuff, we only render the data at page load.

so the user gets from the server this:

<li>
<span>136,63,63,105</span>
<div class="weerB" title="licht bewolkt">
licht bewolkt|18.0|zo|2|0.0
</div>
</li>

Breaks added for clarity, the real thing is one big line of code, better yet the whole html code is nearly devoid of white space or breaks.

after checking the box to see the weather we change that into:

<li 
style="top: 136px; width: 63px; height: 63px; left: 105px; position: absolute;">
<div class="weerB" title="licht bewolkt">
<dl>
<dt>licht bewolkt</dt>
<dt/>
<dt>tekst</dt>
<dd>18.0</dd>
<dt>temp</dt>
<dd>zo</dd>
<dt>windrichting</dt>
<dd>2</dd>
<dt>windrichting</dt>
<dd>0.0</dd>
</dl>
</div>
</li>

Sure, we could do all this with a couple of ajax calls, but with this solution we save the server a lot of calls ( this is a page that gets a couple of million visitors a month) and it's faster after the page has been downloaded. Yes the user still has to download a couple of bytes that may not be needed, but only minimal. If the extra data is a lot more, than a ajax call to fetch that data is viable in my opinion but you have to decide what to use on a case by case basis.

I am wondering if I need a part 2 for the javascript, but I would like to hear your opinion on this