My JavaScript namespace object explained

I probably already explained this, but here it is again then. The entire base of all my JavaScript code consists of only one global object 'G' and the functions '$' and '$$'. That are the only three things in the global namespace, aka global objects, variables and functions:

The JavaScript

var G={
base:'http://<Computed Value>',
gecko:navigator.product=='Gecko',
ie6:(!!document.all && !(typeof window.XMLHttpRequest=='object')),
init:function(){for(var n in G)if(G[n].init)G[n].init()},
set:function(a,b){for(var o in b)a[o]=b[o];return a},
create:function(a,b,c,d){var o=(d||document).createElement(a);G.set(o,b);G.set(o.style,c);return o},
append:function(a,b,c,d){var o=b.tagName?b:G.create(b,c,d);a.appendChild(o);return o}
}
function $(a){return document.getElementById(a)}
function $$(a,b){return (b||document).getElementsByTagName(a)}
window.onload=G.init

G.base

This is the full URL of the Domino application: HTTP protocol, domain and filepath. I usually get these from a DbSetup document.

G.gecko

Sometimes it is useful to know if you are in FireFox. This function gives true if so.

G.ie6

Internet Explorer 6 is a pain to develop for, e.g. it lacks support for .png files. This function gives true if you are in IE6.

G.init()

init:function(){for(var n in G)if(G[n].init)G[n].init()},
...
window.onload=G.init

This function is triggered on page load. It goes over all the child objects of 'G', and if any has an init() function, this is executed. This allows me to add modules to my global namespace 'G' without creating any additional global variables, e.g.:

G.hello={
init:function(){alert('hello')}
}

G.set(a,b)

set:function(a,b){for(var o in b)a[o]=b[o];return a}

Copies the elements of one object 'b' into another 'a', e.g.:

/* assume o is a div on the page */
G.set(o, {className:'active', innerHTML:'Loading. Please wait.'})
G.set(o.style, {border:'solid 1px #666', background:'#ddd', display:'block'})

G.create(a,b,c,d)

create:function(a,b,c,d){var o=(d||document).createElement(a);G.set(o,b);G.set(o.style,c);return o}

Shorthand for creating a DOM element:

• a: the tagName (string).
• b: to set object attributes (optional).
• c: object to set style attributes (optional).
• d: the document object (optional). Use if you are creating elements in an iframe document.
• returns: the object.

G.append(a,b,c,d)

append:function(a,b,c,d){var o=b.tagName?b:G.create(b,c,d);a.appendChild(o);return o}

To append a DOM element to another one. You can append an element you already created or create a new one:

• a: the DOM element that will receive the object.
• b: the object to append: 'b' can be an existing DOM element or the tagName (string) for a new one to create.
• c: to set object attributes (optional).
• d: object to set style attributes (optional).
• returns: the object.

function $(a)

function $(a){return document.getElementById(a)}

This is a shortcut to document.getElementById().

function $$(a,b)

function $$(a,b){return (b||document).getElementsByTagName(a)}

A shortcut to document.getElementsByTagName(). Here you can also pass the document object 'b' (optional), e.g. when you are working with iframes.

Next

In the next post, I'll explain how to use this base to capture information on any web page and submit it to a Domino application.